Как в фш сделать логотип: Размер логотипа для сайта, соцсетей, печати и других платформ

Содержание

Размер логотипа для сайта, соцсетей, печати и других платформ

Содержание:
1.Размер логотипа для соцсетей
2.Размер логотипа для сайта
3.Размер фавикона для сайта
4.Размер логотипа для печати
5.Как изменить размер логотипа?

Сложно представить себе современную компанию без логотипа. Этот символ является важнейшим методом идентификации любого бизнеса. В прошлом их создавали только профессиональные дизайнеры или художники, однако в наши дни разработать качественный лого может любой человек, не владеющий специальными навыками.

Тем не менее, не важно, заказывали вы логотип у дизайнера или создавали самостоятельно: часто возникает потребность загрузить правильный размер логотипа (и фавикон) на сайт, в соцсети, использовать логотип для печати или просто изменить размер. Как это сделать — читайте в нашей статье.

Размер логотипа для социальных сетей важно учитывать, потому что логотипы меньше рекомендованного размера «растягиваются» и становятся нечеткими, а лого большего размера могут сжиматься программой и тоже выглядеть хуже, чем в оригинале.

Если у логотипа будут отличные от рекомендованных пропорции, то он может обрезаться в неудачном месте.

Если погружаться в тонкости не хочется совсем, запомните один размер: 1024 x 512 px. В большинстве случаев такая картинка будет отображаться корректно. Либо можно воспользоваться сервисом Логастер, который позволяет скачивать логотип сразу под требования самых популярных соцсетей.

Ниже представлена таблица с наиболее важными параметрами основных социальных сетей на 2020 год:

Facebook

Картинка к внешним ссылкам: 1200 x 628 px
Картинка для поста: 1200 × 630 px
Обложка: 820 х 312 px
Фото профиля: 170 х 170 p

Вконтакте

Картинка к внешним ссылкам: 510 × 228 px
Картинка для поста: 700 x 500 px
Фото профиля: 200 х 500 px

Twitter

Картинка для твита: 1024 x 675 px
Обложка: 1500 х 500 px
Фото профиля: 400 x 400 px

Instagram

Картинка для поста: 1080 x 1080 px
Картинка для Instagram Stories: 1080 × 1920 px
Фото профиля: 110 x 110 px

YouTube

Картинка поверх видео: 1280 x 720 px
Обложка канала: 2560 x 1440 px
Фото профиля: 800 x 800 px

Pinterest

Картинка для пина: 1000 x 1500 px
Пинн: 236 px ширина
Фото профиля: 165 x 165 px

Linkedin

Картинка к внешним ссылкам: 1200 х 628 px
Картинка для поста: 1200 x 1200 px
Обложка: 1536 x 768 px
Фото профиля: 300 х 300 px

Tik Tok

Видео: 1080 x 1920 px
Фото профиля: 200 x 200 px

OK. ru
Картинка для поста: 1680 х 1680 px
Обложка: 1944 × 600 px
Фото профиля: 190 х 190 px

Как загрузить логотип для каждой соцсети и как оформлять соцсети, читайте в нашей статье.

После того, как вы получили готовый файл (желательно в формате PNG с прозрачным фоном), то наверняка захотите загрузить его на свой сайт.
Чаще всего размер логотипа не слишком большой — 250 пикселей в ширину и 100 в высоту, однако если вы желаете использовать другой размер — всё в ваших руках. Ниже мы расскажем вам, как изменить размер логотипа.

Вот несколько размеров логотипа для сайта:

Горизонтальная ориентация:

— 250 px x 150 px
— 350 px x 75 px
— 400 px x 100 px

Вертикальная или квадратная ориентация:

— 160 px x 160 px
Как создать логотип для сайта и загрузить его на сайт читайте в этой статье.

Фавикон – это небольшая иконка, содержащая, как правило, логотип, первую букву бренда или характерное изображение, отражающее тип бизнеса или тематику сайта.

Размеры фавикона:
— 16 px x 16 px
— 32 px x 32 px
— 48 px x 48 px

Что такое фавикон, как создать и загрузить его на сайт, читайте в этой статье.

При печати логотипа наиболее важное значение имеет не сам размер, а то, в каком формате логотип используют. Наилучший вариант — это векторные форматы для логотипа: PDF, SVG, EPS. Дело в том, что векторные логотипы и другая графика очень легко редактируется, как все изображение в целом, так и отдельные его части. Также лого в векторе прекрасно поддается масштабированию; даже при многократном увеличении графика практически не теряет качества, что наиболее важно при печати.

Поэтому, если у вас есть логотип в векторном формате, не стоит беспокоиться в каком размере отправить лого в типографию. Достаточно наличия самого векторного лого или картинки с ним для печати.

Тем не менее, если вы используете не векторную, а растровую картинку (в чем разница между ними — читайте здесь), то чем больше размер картинки, тем лучше.

Поэтому мы рекомендуем использовать логотип с размером не менее 500рх для печати небольших размеров (сувениры, например). В идеале лучше иметь логотип от 1024рх и больших размеров.

А вы верите в то, что создание логотипа доступно каждому?

Удобный интерфейс и понятный редактор онлайн-сервиса Логастер готовы развеять всякие сомнения. Всего несколько минут и логотип ваш.

Если вам нужно изменить размер логотипа, то вы можете это сделать:
— самостоятельно с помощью Фотошопа или другой графической программы;
— на сайте Логастер, если вы создали логотип с помощью этого сервиса;
— заказать услуги в фрилансера.

С последним пунктом, думаем, все понятно — ищем фрилансера и за небольшую плату он сможет изменить лого под нужный размер.

Если вы создали логотип на сайте Логастер, то с помощью бесплатного инструмента можно задать нужный размер и скачать уже созданный логотип. Удобно, не так ли?

Если вы решили изменить размер логотипа с помощью графической программы, тогда рекомендуем вам посмотреть следующее видео:

Также вы можете воспользоваться этими онлайн сервисами, которые гораздо проще и лучше подходят для этой цели:

Picresize.com
Resizeimage.net
Sproutsocial.com/landscape

Надеемся, что, приняв во внимание наши советы, вы сможете сохранить эстетичность вашего фирменного знака при загрузке в различные соцсети, на сайт, при печати и на любых других площадках. В этой статье мы собрали информацию о всех необходимых размерах для изображений на самых популярных страницах. Поменять сайз — совсем несложно, а используя онлайн-сервис Логастер — вовсе элементарно. Никаких нелепых обрезок — логотип останется понятным и привлекательным!

Больше ресурсов:

Размеры в социальных сетях —
https://blog.hubspot.com/marketing/ultimate-guide-social-media-image-dimensions-infographic

Mobile App Icons:

Как сделать логотип в Фотошопе

В прошлый раз мы выяснили, что оказывается в Фотошопе можно сделать, пусть с небольшими изощрениями, визитку. В этот раз мы выясним, что Фотошоп способен и на вполне рабочий и пригодный для заказчика Логотип.

Логотип — вектор или растр?

Масса заказчиков под логотипом подразумевает не более чем картинку, которую они смогут посмотреть на своем компьютере. Основная проблема начинается тогда, когда заказчик, налюбовавшись на логотип в своем мониторе решает пустить его в дело. Например напечатать большой плакат размером с дом. Помнится именно такой плакат когда то вывешивал сайт Delfi. Или сделать светящуюся вывеску для своего магазина. Или напечатать календари с большим красивым логотипом, горячим, из под лапы дорогого дизайнера.

И вот уже счастливый заказчик отсылает свою мониторную картинку в фирму, создающую святящиеся вывески для магазинов. Но проходит пару часов, и заказчик получает ответ: «Большое спасибо, мы поняли какой у вас логотип. Никаких проблем, вывеску сделаем. Но, пожалуйста, пришлите нам логотип в кривых. Вы прислали нам не пойми какую картинку в JPG размером 500 на 400 px. Из этого не сделать вывеску. Если у вас нет логотипа в кривых, мы с удовольствием примем от вас дополнительную сумму денег за «векторизацию» логотипа.» Да, пожалуй подобный логотип, который достался нашему заказчику можно использовать разве что для шапки сайта. И кстати о векторизации, если вас интересует этот вопрос, почитайте мою статью Из растра в вектр.

Дело в том, логотипы делаются в векторе. Конечно, так было не всегда. Во времена моей бабушки логотипы рисовали художники и иллюстраторы на огромных холстах. В современном компьютерном мире растровый логотип — мертвый логотип. Его можно, разве что уменьшить если он большой или распечатать как есть. Векторный логотип — математическая информация о контурах логотипа. Его можно легко увеличить для печати на любой поверхности, его можно загрузить в Автокад, в спец машину по резке бумаги, в машину по выпиливанию фигур из материала.

Любая крупная компания в современном мире имеет брендбук и стратегию продвижения логотипа. То есть серию принятых внутри компаний правил позиционирования логотипа. Каким он должен быть? Что с ним можно делать. Где его можно печатать цветным, где его можно печатать стилизованным, где черно белым. Некоторые компании допускаю стилизацию, некоторые запрещают. Но в любом случае логотип начинается с простой черно-белой векторной формы. Затем идет фирменный стиль, затем идет стилизация.

Соглашусь, что некоторым компаниям, не выходящим за рамки веб пространства может никогда не понадобиться логотип в векторе, так как их лого не будет покидать пределы баннеров и шапки веб сайта. Однако при выходе в полиграфию и реальный мир вектор неизбежен.

Создаем лого в Фотошопе

В этом уроке-воркшопе по созданию лого в Фотошопе я использую свой старый логотип AQ, который я создавал для одного приятеля. Помню, мы договорились о бартере, я ему логотип и дизайн для CMS, он мне движок сайта и верстку. Правда, после того как я свою часть выполнил, ему показалось отличной идеей исчезнуть и не отвечать, вместо того чтобы сказать «Извини, совсем нет времени делать верстку».

Данный логотип представляет из себя ряд простых овальных яйцеобразных объектов. Фотошоп представляет нам ряд весьма скудных инструментов для работы с векторными путями. К счастью, этих скудных инструментов вполне достаточно чтобы сделать 60% существующих логотипов, если не больше. Я начну с создания форм, буду ссылаться на другие уроки, которые помогут вам создать мой логотип, и конечно в конце урока каждый сможет скачать мой PSD фаил со всеми слоями.

Рисуем основные фигуры

Выберите инструмент Ellipce Tool и нарисуйте обычный эллипс. На панели настроек обязательна опция Shape Layer. И если вы не знаете что это, почитайте мою статью о режимах Shape Layer, Path и Fill Pixels. Если коротко, эта опция создает векторные контуры в виде векторной маски со слоем заливки. И именно так вектор отображается в Фотошопе.

Выберите другой инструмент Direct Selection Tool, он выделяет конкретные векторные точки и может изменять направление их направляющих. Кликните им по эллипсу. Затем выделите две средние точки, верхнюю и нижнюю. Чтобы выбрать сразу 2 точки, жмите SHIFT. Когда 2 точки выделены, потяните их назад, чтобы элипс принял яйцеподобную форму. Первая форма готова.

Как залить цветом? Найдите слой овала на панели слоев Layers. Кликните по иконке заливки, в появившемся окне выберите цвет.

Продублируйте получившееся яйцо. Layer > Dublicate Layer. Выберите его на панели слоев и трансформируйте Edit > Free transform. Если вы не понимаете что происходит, читайте мою статью Трансформирование в Фотошопе через Free Transform. Если коротко, Free Transform позволяет изменять форму чего угодно, на почти что угодно. Просто нажмите SHIFT

, чтобы изменять форму пропорционально, и потяните за край рамки в сторону уменьшения. Залейте форму светло голубым цветом.

Опять продублируйте яйцо, опять воспользуйтесь Edit > Free transform, но на этот раз просто сожмите яйцо по вертикали. Затем выберите Direct Selection Tool, опять выделите средние точки, и измените длину направляющих каждой из точек. Это уменьшит угол наклона между точками. Поздравляю, мы воссоздали форму яйца. И это первый шаг на пути создания логотипа в Фотошопе. Перейдем к буквам. Это яйцо залить нужно белым цветом.

Рисуем буквы в Фотошопе

Выберите самое первое яйцо и продублируйте слой. Поместите его на самый верх и воспользуйтесь Edit > Free transform чтобы уменьшить его размер, до размера буквы, которая поместится внутри яйца. Не выключайте Free transform, потяните за средние якоря, чтобы расширить яйцо по вертикали.

Опять продублируйте это яйцо Layer > Dublicate Layer, опять выберите инструмент Free Transform и уменьшите данный слой зажав SHIFT на клавиатуре, чтобы уменьшение было равномерным. Залейте получившуюся фигуру белым цветом и при необходимости, а она скорее всего возникнет, трансформируйте её ещё раз по вертикали и горизонтали, чтобы получить визуально равномерный контур буквы, вместо сужающегося по краям.

Опять продублируйте голубое яйцо от буквы Q и переместите его в левую сторону. Это будет основой для буквы А. Для начала разверните его в другую сторону Edit > Transform Path > Horisontal и сожмите его по горизонтали, чтобы придать более сжатую форму и при необходимости воспользуйтесь Direct Selection Tool, чтобы изменить фигуру точечно, например увеличить угол овала удлинив направляющие по краям.

Снова продублируйте этот овал, уменьшите размер, залейте белым, при необходимости сожмите по вертикали, чтобы контур буквы А получился равномерным.

Осталось дорисовать часть буквы Q. Выберите инструмент Rectangle Tool и нарисуйте небольшой прямоугольник. Залейте его белым цветом и поместите под букву Q. Продублируйте, и уменьшите его при помощи Free Transform, затем поместите выше буквы Q. Наш логотип в Фотошопе близится к завершению.

Создаем сложную векторную фигуру в Фотошопе

А теперь внимание. До сих пор мы играли в кружки. Сейчас будет нечто по сложнее. По крайней мере для моих пальцев, чтобы все это описать. По непонятным мне причинам вектор в фотошопе считается самой сложной темой. Я уверен что самая сложная тема в Фотошопе это Анимация и 3D, но никак не вектор. Если вы совсем не разбираетесь вам помогут мои статьи Зачем в Фотошопе вектор, Векторные инструменты рисования в Фотошопе и Векторные примитивы в Фотошопе, но больше всего для понимания следующих процессов, вам поможет моя статья Add, Subtract и Intersect так как именно этими режимами мы будем пользоваться все оставшееся время.

Выберите на слоях внешний голубой овал от буквы А. Теперь выберите инструмент Path Selection Tool и кликните по овалу. Овал будет выделен. А на слоях вы увидите, что ваша векторная маска подсветилась. Это потому что теперь мы работаем внутри векторной маски этого слоя. Далее предупреждаю, не пользуйтесь инструментом Move Tool, он управляет слоями. Используйте только Path Selection Tool, который с виду выглядит как черная стрелочка, но управляет не слоем целиком, а только векторным контуром в маске.

Выделите инструментом Path Selection Tool  овал, затем Edit > Copy и Edit > Paste. Визуально ничего не произошло, но мы скопировали контур и теперь на маске их два. Второй контур не виден, так как находится в том же месте где первый. Это легко исправить. Кликните по контуру Path Selection Tool и перетащите его. Затем используйте Free transform чтобы деформировать контур. Я достаточно серьезно изменил форму овала, воспользовавшись не только Free transform но и Edit > transform Path > Warp

Повторите всю операцию. Выделите второй контур инструментом Path Selection Tool, нажмите SHIFT. На курсоре Path Selection Tool  появится плюсик. Теперь передвиньте контур и он скопируется. И это второй способ дублировать контуры. B в этот раз я опять воспользовался трансформацией через Warp чтобы ещё сильнее изогнуть овал.

Теперь выделите инструмент Rectangle Tool. Визуально ничего не изменилось. Но обратитесь к панели настроек Rectangle Tool. Скорее всего там выбрана опция Create Shape New Layer. Воспользовавшись Rectangle Tool вы просто создадите другой слой с новой векторной маской. А мы этого не хотим. Мы хотим рисовать только на одном слое. Переключитесь в панели настроек на опцию Add to Shape Area (+) Эта настройка добавляет векторные пути на уже созданные векторные маски. Осталось только выделить правильную векторную маску на нужном векторном слое. Нарисуйте 2 прямоугольника.


Осталось собрать из всей этой горы нормальную фигуру и для этого мы воспользуемся режимами Add, Subtract, Exclude и Intersect. Настройка — Subtract превращает векторную фигуру в «вырезающую» векторную фигуру. Как в букве 0 присутствует 2 контура. Но один внешний, заполняющий, а второй, поменьше, вырезающий. Вот и выберите инструментом Path Selection Tool большой прямоугольник и овал, и переключитесь в настройках на Subtract from Shape Area (-)

Для точности выберите инструмент Rectangle Tool, в настройках поставьте Subtract from Shape Area (-) и отрежьте ещё один кусочек от буквы А. Затем выберите инструмент Direct Selection Tool, кликните по верхнему углу узкого прямоугольника, выделите векторную точку и потяните её вниз. Фигура приобрела смысл. И если все правильно, вы только что научились делать логотип в Фотошопе с нуля.

Сливаем векторные слои

Сливаем в несколько ином смысле. Я не собираюсь растеризовать слои, которые мы старательно отрисовывали в векторе. Но посмотрите что происходит на рабочей области. Что представляют собой наши векторные фигуры? По большей части это куча овалов, которые налезая друг на друга создают видимости сложных фигур. А на деле у нас только одна сложная фигура, буква А. Мы видим Q, но только потому что белый овал поверх голубого овала, а хвостик буквы Q пересекает основное яйцо, кажется будто в этом месте яйцо прерывается, чтобы дать хвостику Q выйти за пределы, но на самом деле белый прямоугольник визуально закрывает яйцо.

С одной стороны сойдет и так, а с другой стороны, каждая из этих фигур при сохранении в PDF создаст маску с растровой заливкой, которая будет встроена внутрь. Мы получим целую кучу слоев, маски которых будут перекрывать друг друга. Такой фаил будет больше весить, а в хаосе слоев невозможно разобраться, поэтому я предлагаю создать всего 3 сложные фигуры, вместо 104-х простых.

Начнем с буквы А, которая уже сложная, но белый овал сверху по прежнему существует в виде второго слоя, закрывающего часть буквы А. Выделите инструментом Move Tool маску белого овала, находящегося выше буквы А. Затем выделите векторный контр инструментом Path Selection Tool. Скопируйте его Edit > Copy. Теперь кликните по маске слоя буквы A сделайте Edit > Paste скопированного контура. Мы внедрили контур в маску буквы А, осталось задать ему правильные настройки и эти настройки — Subtract from Shape Area (-)  Теперь вы можете смело удалить ненужный овал выше, у вас появилась сложная фигура. При уверенности что вы более не будете менять контуры, выделите инструментом Path Selection Tool все контуры буквы A и слейте их нажав кнопочку Combine на панели настроек.

Проделайте тоже самое с буквой Q. Выделите белый хвостик и белый овал и скопируйте контуры внутрь основного голубого контур от буквы Q. Смените их настройки на Subtract from Shape Area (-) Затем скопируйте и видимую часть хвостика. И я бы слил буквы A и Q, так как они не предназначены для того чтобы находиться по отдельности друг от друга. В ходе подобной работы может оказаться ситуация, когда у вас внутри одной маски будет добавляющий контур, и скрывающий. И скрывающий будет перекрывать добавляющий. Вот что происходит на самом деле. Вырезающий контур вырезают добавляющий потому что находится выше по иерархии. На самом деле все эти контуры находятся не на одной плоскости. Конечно, в фотошопе нет «Слоев» контуров, ими невозможно управлять так как в Иллюстраторе. Все что мы можем сделать, это вырезать контур и скопировать его назад. Тогда он появится выше всех остальных контуров.

Аналогичную работу проделайте с контурами большого яйца чтобы в итоге получить всего 2 слоя — внешняя темно голубая полоска и внутренняя светло голубая. И мне кажется, мы только что нарисовали логотип в векторе при помощи Фотошопа. Осталось только сохранить его в формат PSDEPS или PDF.

Печать логотипа

В плане печати логотипа важны цвета. Работайте в цветовом режиме CMYK, Image > Mode > CMYK о котором вы подробно можете почитать в моей статье Цветовой режим CMYK, чтобы узнать, как готовить графику для печати почитайте статью Подготовка к печати за 10 минут. Если вы уверены, что логотип создается прежде всего для Веб контента я все равно посоветовал бы вам добиться максимально ярких цветов в CMYK, а затем уже переводить логотип в RGB для использования в веб. В таком случае вы будете уверены в том, что логотип будет выглядеть одинаково как на печати так и в интернете. И я надеюсь, что теперь вы сможете сами создать вполне профессиональный в техническом плане логотип.

Скачать исходник

Автор:

Как сделать логотип в Фотошопе

Каждая уважающая себя современная компания заботится о своём имидже, поэтому она создаёт и впоследствии поддерживает условия, направленные на постоянное улучшение имиджа, что способствует привлечению большого количества клиентов.

Важнейшей частью имиджа является логотип, просматривая который клиент формирует своё первоначальное представление о компании. Логотип представляет собой уникальное изображение, состоящее из рисунков, текстовой информации или одновременно этих двух составляющих.

В Фотошопе, помимо прочего, можно создать и логотип

Создать логотип и визитку компании можно, воспользовавшись возможностями графического редактора Adobe Photoshop. Создание простого варианта является совершенно несложным и увлекательным творческим процессом, но настоящие профессионалы знают секреты, как сделать логотип в Фотошопе, чтобы его можно было использовать даже при печати больших плакатов.

Основы создания логотипа

Создать простой логотип компании под силу всем, кто освоит основы работы с графическим редактором Adobe Photoshop и изучит рекомендации настоящих профи, как создать логотип в Фотошопе.

Разновидности логотипов

Прежде чем приступить к созданию логотипа, важно уточнить, каким он должен быть, к какой разновидности должен относиться. Графические дизайнеры выделяют три их разновидности.

Первая заключается в создании простого варианта, сопровождаемого только определённой текстовой информацией. Чаще всего за основу берут название компании и красиво прорисовывают буквы. Профессионалы рассматривают эту разновидность как самую простую для создания, но при этом достаточно строгую. Безусловно, надпись должна сопровождаться креативностью, иначе привлечь внимание потребителей вряд ли удастся.

Второй разновидностью являются графические изображения, рисунки, при создании которых могут использоваться конкретные предметы, а также абсолютная абстракция. Важно только, чтобы графический вариант позволял клиенту самостоятельно понять, какую деятельность осуществлять организация, представленная таким логотипом.

Как сделать логотип для сайта компании в фотошопе

Рад приветствовать на fotodizart.ru! Сегодня в продолжение предыдущей статьи об изготовление логотипов, как обещал, будет урок по фотошопу в котором мы создадим лого. Из урока вы узнаете, как сделать логотип для сайта компании без привлечения к разработке сторонних разработчиков, а обойтись своими силами.

Наверняка многие из вас знают, что логотипы правильнее создавать в векторных редакторах, но так как нам нужно сделать логотип только для сайта, будет достаточно и растрового редактора. Создавать логотип мы будем при помощи фигур (shape), благодаря чему, его можно будет масштабировать без потери качества.

Для начала создадим ряд набросков. Я буду создавать лого для псевдо экспертной компании, которую назову «Профи-Эксперт». Сделав наброски, я выбрал тот, который на мой взгляд больше подходит, отсканировал скетч и загрузил его в фотошоп.

Предварительно в фотошопе создал новый холст с размерами 600 на 200 px. 72 dpi., вы можете задать свои размеры это не так важно, логотип в последствие можно будет масштабировать (уменьшать или увеличивать) без особых проблем.

Далее выставляю направляющие по всем углам фигуры графического знака в виде галочки. Чтобы установить направляющую у вас должны быть активны линейки, если их нет, нажмите сочетание клавиш ctrl+R. Далее зажав левую кнопку мыши на линейке, не отпуская необходимо потянуть на холст тем самым создав направляющую. Устанавливаем их таким образом как показано на скриншоте ниже. Если вдруг случайно установили не в том месте, выберите инструмент «Перемещение» (V) и подвиньте куда необходимо.

Убавляем непрозрачность у слоя со скетчем и начинаем создавать логотип. Выбираем инструмент «Перо» (P), и проверяем на верхней панели инструмента настройки, чтобы был активен режим слой фигура и создать новый слой фигуру. Если что-то стоит не так исправляем.

Теперь создаем две фигуры, из которых состоит знак логотипа, для этого устанавливаем  опорные точки, тем самым обрисовав первую фигуру, также поступаем и со второй фигурой. Цвет фигур не имеет значения.

После чего слой со сканированным скетчем логотипа можно удалить или отключить, так как он нам больше не понадобится. Напишем нужный нам текст «Профи-Эксперт» инструментом «Горизонтальный текст» (T), шрифт я выбрал Franklin Gothic Demi, начертание Italic, путем подбора выбрал размер  55пт., цвет шрифта использую #414141.

Теперь нужно поработать над знаком логотипа, сделать логотип более красивым и презентабельным.  Для этого на фигуру, которая сейчас  черного цвета наложим линейный градиент с цветом от #0c60a0  до  #469ccd, угол установим на 105° при помощи стиля слоя. Для этого идем, меню слои > стиль слоя > наложение градиента.

Теперь аналогичным способом наложим градиент и на фигуру, которая красного цвета, только градиент будет цветом от #3f9ddd до #57bae4, угол установим на 90°.

И в заключение добавим полосу более светлого цвета на боковую линию второй фигуры. Добавим ее при помощи инструмента «Линия» размером в 1px., цветом #b3e2ff.

Теперь и вы знаете как сделать логотип в фотошопе, у вас это займет немного времени. Главное немного фантазии, не перегружать элементами и можно сделать отличный логотип и не придется прибегать к помощи дизайнера. В заключение результат урока, а также еще один вариант данного логотипа.

Остались вопросы по уроку? Ничего страшного специально для вас я подготовил и записал видеоурок по этому материалу. Посмотрите видео и я думаю все станет понятно как ясный день. Логотип создается в фотошопе буквально за считанные минуты, а результат получается довольно неплохой. Кстати в видеоуроке есть одно добавочное действие которое позволит нам перевести текст логотипа в кривые.

Понравился урок?  Не забудьте поделиться с друзьями, возможно, он им будет полезен.

Как сделать логотип в фотошопе

Логотип присутствует на всех продуктах компании и должен производить хорошее впечатление на клиента, быть ярким и запоминающимся. Чтобы его сделать можно использовать программу Фотошоп – разнообразие техник и инструментов позволяет создавать впечатляющие графические работы.

Прежде, чем приступить к созданию лого, следует проработать концепцию дизайна. Лаконичные формы и простые цвета лучше, чем перегруженная графикой конструкция – такие варианты лучше выглядят на визитках и корпоративных продуктах, формируют впечатление о фирме как о надежном и серьезном предприятии.

В данном уроке мы рассмотрим создание логотипа из полигонов – это соответствует современным тенденциям в веб-дизайне, выглядит ярко и стильно, но при этом не слишком вычурно. Такое логотип может быть у студии по веб-дизайну, фотоателье, предприятия, связанного с цифровыми технологиями.

Итак, начнем с создания нового документа. Назначим ему размеры 400 на 400 пикселей.

Активируйте инструмент Pen Tool или Ручка и начинайте рисовать многоугольники. Их можно сгруппировать разными способами – заключить в сферическую форму или хаотично набросить друг на друга. В итоге получаем следующее изображение:

Здесь полигоны тесно прилегают друг к другу и расположены беспорядочно, но в пределах одной формы.

Тут между полигонами есть зазор, они расположены таким образом, что формируют трехмерную сферу:

А на этом изображении полигональные фигуры сгруппированы в абстрактную форму, будто сконструированную из оригами.

Таким образом, подобная техника позволяет бесконечно экспериментировать с новыми фигурами в процесс создания собственного уникально логотипа. Также можно в готовой фигуре менять заливку всех ее составляющих с помощью панели слоев:

Обратите внимание, программа как бы заливает каждый новый слой определенным цветом, а фигуры, которые мы рисуем, выступают в роли масок, сообщающих, какие области экрана будут скрыты. Поэтому если вы удалите векторную маску, вся рабочая поверхность экрана окрасится в цвет удаленной фигуры.

Далее выбираем шрифт для названия компании на нашем логотипе. Можно воспользоваться уже имеющимися шрифтами, либо скачать бесплатный шрифт с какого-либо сайта.

Активируем инструмент Текст и внизу фигуры пишем название компании выбранным шрифтом. В нашем случае это шрифт Аmble размером 14 пт жирного начертания (Bold)/

Результат:

Это один из примеров, по такой технологии можно сделать любой другой вариант.

Как сделать водяной знак в фотошопе и автоматически добавлять его на фото

Водяной знак — это способ защиты своих авторских прав на фотоконтент. Это может быть логотип фирмы, фамилия автора, ссылка на сайт или любое другое уникальное слово или изображение, указывающее на ваше авторство.

Знак называют водяным в связи с тем, что по стандарту его нужно делать полупрозрачным. Ведь на изображении важно само содержимое, а знак не должен привлекать к себе основное внимание. Правильный водяной знак — это неяркая полупрозрачная метка у края изображения.

В каких случаях полезно использовать водяной знак

  1. Чтобы защитить от копирования свой фотоконтент, который вы выкладываете в сети интернет, например, в социальных сетях или персональном сайте. Изображения с чужими водяными знаками неохотно копируются пользователями. Даже если все-таки кто-то, например, репостнул себе в публичную группу такое изображение, то вытекает второй случай пользы таких знаков…
  2. Пиар. Пользователи, которые, несмотря на ваш водяной знак, скопировали себе на сайты или публичные странички, создают вам бесплатную рекламу. Логика проста — человек, увидевший ваше изображение, также обратит внимание и на водяной знак. А дальше, если его заинтересовало ваше творчество, он получит необходимую информацию о том, как вас найти, ибо любому понятно, что это и есть первоисточник данного контента.
  3. Не забываем о банальной раскрутке бренда. Люди, копирующие ваш контент, распространяют его по всем мысленным и не мысленным источникам. А постоянное мелькание бренда оставляет в памяти некий след, который потом сослужит пользу, в том числе и коммерческий успех.
  4. Если фотоконтент достаточно специфический, как, например, на этом сайте, где я выкладываю обучающие скриншоты, чтобы отбить желание конкурентов копировать контент, водяной знак как ничто другое в этом помогает. Собственно конкуренты вряд ли захотят строить свой аналогичный сайт с картинками, на которых прямая ссылка на мой проект. Даже если они это и сделают, я не буду расстроен, поскольку, как указано в пункте 2, это реклама и дополнительный источник целевого трафика.

Как делать водяной знак

Для начала определитесь что это будет: логотип, ссылка, какое-то слово или что-нибудь другое. Например, на своем сайте в качестве водяного знака я использую ссылку стилизованную под основной логотип сайта. Если картинка где-нибудь и мелькнет, то заинтересованный пользователь знает как найти первоисточник.

Водяной знак нужно сделать небольшого размера. Лучше придерживаться своего некого стиля. На мой взгляд, знак качества — это стабильность, поэтому не стоит дергать знак на каждой фото в разных местах. Лучше пусть это будет всегда одно и тоже место. ИМХО.

Сделайте знак полупрозрачным и погасите яркость красок. Он не должен быть броским и кидаться в глаза. На изображении главное само содержимое, а не ваш «вырви глаз» водяной знак.


Используя вышеуказанные советы, сначала сделаем набросок.

Откройте любое изображение и поместите в него ваш будущий водяной знак.

В рамках этой статьи мы не будем учиться делать логотипы или красивые надписи. Это совсем другая история и у каждого она своя…

Предполагается, что у вас уже есть заготовка, из которой вы намерены сделать водяной знак.

Далее повествование пойдет на примере логотипа этого сайта. Он был сохранен отдельным файлом. Чтобы добавить его к другому изображению в фотошопе, следуйте этим инструкциям.

В результате у вас должны быть два слоя на палитре с основным изображением и картинкой/текстом, что только что добавили.

После этого установите необходимый размер водяного знака, чтобы он не был слишком маленьким или большим.

Для этого, проследите чтобы картинка с логотипом была выбрана (как на скриншоте выше — выбранный слой отмечен синим цветом), выберите инструмент Свободная трансформация Ctrl+T. Вокруг недоиспеченного водяного знака появится ограничительная рамка. Двигайте ее за углы, чтобы уменьшить/увеличить картинку.

Совет

Чтобы картинка пропорционально изменялась, удерживайте клавишу Shift, когда тяните за углы.

Закончив с размером, нажмите клавишу Enter или кнопку в виде галочки на панели параметров инструмента.

Теперь нужно переместить водяной знак в неприметное место. Классический вариант — нижний правый угол.

Для этого выберите инструмент Перемещение V. Проследите, чтобы активным слоем была картинка с логотипом, а затем перетащите его в нужное место.

Примечание

У вас может присутствовать эффект примагничивания к краям. Чтобы этого не было, удерживайте нажатой клавишу Ctrl, когда перемещаете картинку.

Установив в нужно место, для пущей красоты и точности, можно еще более детальней подвинуть картинку. Для этого, при выбранном инструменте Перемещение, нажимайте на клавиши со стрелками на клавиатуре и картинка будет сдвигаться ровно на 1 пиксель (что такое пиксели). Если при этом еще и удерживать клавишу Shift, то сдвиг будет сразу на 10 пикселей.

Последний этап — создание эффекта полупрозрачности.

Для этого, проследите, чтобы активным был слой с водяным знаком, двигайте ползунок параметра Непрозрачность до тех пор пока, не найдете золотую середину.

По идее, водяной знак готов. Все эти действия по созданию водяного знака в фотошопе не занимают много времени и если вы редко собираетесь прибегать к данному способу защиты фото, то можно на этом остановится. Но если вы собираетесь работать часто с водяными знаками и с большим количеством фотографий, то лучше всего сделать экшен для автоматического добавления водяного знака.

Автоматическое добавление водяного знака с помощью экшена

Напомню, что экшен — это автоматическая операция с заранее прописанным алгоритмом действий. Нажав на одну кнопку, фотошоп сам выполнит все заложенные действия в считанные секунды. Это мощный инструмент для экономии времени. Подробнее о том, что такое экшены в фотошопе и как ими пользоваться.

Поскольку у нас сейчас стоит задача избавиться от многочисленной нудной работы, использование экшена идеально для этого подойдет.

Данный экшен будет работать так:

Открываем в фотошопе фотографию и нажимаем воспроизведение экшена с водяным знаком. Повторяем эти действия для каждой фотографии.

Здесь ничего сложного нет, главное чтобы действий было как можно меньше и все они были четкие и понятные программе.

Шаг 1

Экшен будем создавать на заранее открытой фотографии. Поэтому выберите и откройте в фотошопе любую.

Шаг 2

Я рассматриваю пример на своем заранее созданном логотипе. Этот файл должен быть у вас сохранен на компьютере. Выберите папочку, где он будет лежать. Это местоположение больше нельзя будет менять / переименовывать, в том числе другие папки предшествующие конечной. Проще говоря, поместив картинку, например, по такому пути: «C:\Users\Имя пользователя\Desktop\Картиночки\logo.png», ни одну из папок больше нельзя будет переименовывать, перемещать и так далее. В противном случае экшен перестанет работать.

Шаг 3 Откроем палитру.

Откройте палитру с экшенами / операциями: Окно — Операции или клавиши Alt+F9.

Вот так она должна выглядеть:

Шаг 3 Начинаем запись.

Создайте новую папку для своих экшенов. Нажмите на третью справа кнопку. Появится окно, в котором придумайте имя папки.

Теперь создадим новую операцию. Нажмите на вторую справа кнопку Создает новую операцию. Придумайте ей имя.

После нажатия на кнопку Записать, вы увидите, что на палитре стала активной кнопка записи (красный значок), как на видеокамере. Это значит, что началась запись наших действий в программе.

Шаг 4

Первым делом выполняем команду открыть картинку с будущим водяным знаком: Файл — Открыть или Ctrl+O. Далее найдите картинку у себя на компьютере.

Картинка должны открыться на новой самостоятельной вкладке (что такое вкладки).

Шаг 5

Следующая задача скопировать логотип и перенести на исходную фотографию.

Для этого нажмите клавиши Ctrl+A. Мы сделали полное выделение содержимого картинки, по периметру должны появиться «марширующие муравьи».

Сделаем копию Ctrl+C. Так картинка была скопирована в буфер обмена.

Перейдите на предыдущую вкладку с открытой фотографией и вставьте туда скопированный логотип — Ctrl+V.

Шаг 6

Просто перетащить логотип в нужное место нельзя. Фотошоп, может быть, и запомнит координаты, но когда вы будете открывать фотографии других размеров, водяной знак может оказаться чуть ли не по середине фотографии. Это ерунда. Нужно сделать так, чтобы фотошоп всегда определял где края у фотографии и выравнивал логотип относительно их расположения.

Для этого на палитре слоев выделите слой с самой фотографией и нажмите Ctrl+A, чтобы выделить его весь.

Примечание

У меня фоновый слой получил название «Layer 1» из-за моих прыжков из разных локализаций фотошопа. Если вы используете русскоязычную версию программы, то у вас должно быть написано «Фоновый слой»

Следующим шагом опять сделайте активным слой с логотипом. Мы будем его позиционировать относительно только что созданной выделенной области. О том как происходит выравнивание объектов в фотошопе у меня есть отличная статья.

Выберите инструмент Перемещение — V.

На панели параметров инструмента нужно нажать кнопки: Выравнивание по нижнему краю и Выравнивание по правому краю.

Шаг 7

Убираем рамку выделенной области — Ctrl+D, она нам больше не понадобится.

Итак, мы только что прижали водяной знак в самый нижний правый угол. Но так близко к краям это не красиво. Нужно сделать небольшие отступы от краев.

Для этого при выбранном инструменте Перемещение, зажав клавишу Shift нажмите по одному разу на левую и верхнюю стрелочки на клавиатуре. Произойдет сдвиг картинки на 10 пикселей в заданные стороны. Если этого много, нажимайте на стрелочки без Shift’a, тогда сдвиг будет по 1 пикселю.

Финальный аккорд — на палитре слоев измените непрозрачность логотипа. Я поставил 60%.

Шаг 8

Закройте вкладку с логотипом, которая была создана на 4 шаге. Она должна быть второй по счету.

Для этого ОБЯЗАТЕЛЬНО сначала нажмите на эту вкладку, чтобы она стала активной (активная вкладка подсвечивается более ярким цветом), после этого нажмите на крестик. Иначе, фотошоп запишет в экшен закрытие нашей основной вкладки с фотографией.

В итоге файл экшена должен выглядеть следующим образом:

Не забудьте нажать на кнопку Стоп, чтобы завершить запись экшена.

Проверка на работоспособность

Вновь откройте любую фотографию. На палитре операций, нажимая на стрелочку возле названия экшена, можно скрыть/отобразить подробный список действий. Чтобы не загромождаться лучше скрыть.

Для активации экшена, выделите его на палитре и нажмите кнопку Воспроизвести.

Результат