Как сделать баннер для фейсбука в фотошопе
Facebook обслуживает более 80 миллионов малых предприятий по всему миру, использующих брендовые страницы. И даже если мы не должны судить о книге по её обложке. вы не хуже меня знаете, что такое бывает редко. Вот почему так важно ваше правильно оформить брендовую страницу на Facebook.
Но, что такое обложка страницы на Facebook? Каковы размеры баннеры для группы Facebook и как создать изображение, которое будет отлично смотреться на настольных компьютерах и мобильных устройствах?
Эта статья научит вас всему, что вам нужно знать, и даст вам шаблон обложки группы в Facebook.
Что такое обложка страницы Facebook?
Когда кто-то посещает вашу страницу на Facebook, ваше изображение обложки – это первое, что они видят, и оно занимает почти весь экран.
Однако, хорошо оптимизированная фотография на обложке Facebook побудит зрителей подписаться на вас, изучить вашу страницу, взаимодействовать с вашим брендом, посетить ваш веб-сайт и совершить покупку в вашем магазине.
Какой размер фото для обложки Facebook?
Фотографии на обложке Facebook (или «баннер Facebook») отображаются с разрешением 820 пикселей в ширину на 312 пикселей в высоту на настольных компьютерах и 640 пикселей в ширину на 360 пикселей в высоту на мобильных устройствах. Размер изображения обложки Facebook должен быть не менее 400 пикселей в ширину и 150 пикселей в высоту.
Для достижения наилучших результатов Facebook также рекомендует использовать файл PNG.
Теперь, если вы относитесь к тому типу людей, которые любят быть сверхтехнологичными, фотография на обложке Facebook будет загружаться быстрее всего как файл sRGB JPG шириной – 851 пиксель, высотой – 315 пикселей и при весе менее 100 килобайт.
Большая проблема с фотографиями на обложке Facebook
Возможно, вы заметили проблему с изображениями обложек Facebook: мы используем только одну фотографию обложки Facebook, но она отображается по-разному на настольных компьютерах и мобильных устройствах.
Как Facebook помогает нам решить эту проблему? Никак, Facebook просто учитывает соотношение сторон разных устройств.
Помните, что Facebook просматривается в альбомной ориентации на рабочем столе и в портретной ориентации на мобильных устройствах. Проблема не в размерах пикселей, а в форме.
На мобильных устройствах верхняя и нижняя часть изображения увеличивается примерно на 75 пикселей с каждой стороны. Это означает, что Facebook не сжимает и не растягивает вашу обложку до нужного размера, поэтому ваше изображение всегда будет выглядеть наилучшим образом. Это также относится к обложкам Facebook, о которых мы поговорим чуть позже.
Лучший размер фото на обложке Facebook
Решение этой проблемы с изображением обложки Facebook – сделать фотографию намного выше рекомендованных 820 x 312 пикселей.
В частности, ваше изображение должно быть 820 пикселей в ширину и 462 пикселя в высоту.
Это даёт вам 75 дополнительных пикселей вверху и внизу изображения, которые будут обрезаны при отображении на рабочем столе.
Лучший размер видео для обложки Facebook?
Видео-обложки Facebook отображаются так же, как и фотографии. По этой причине рекомендуемый размер видео-обложки Facebook также составляет 820 на 462 пикселя. Ваше видео должно быть от 20 до 90 секунд.
Видео-обложки Facebook менее эффективны на мобильных устройствах, поскольку они не воспроизводятся автоматически. Вместо этого они загружаются в виде эскиза.
Более того, звук в обложках Facebook также не воспроизводится автоматически – зрители должны нажать на видео, чтобы услышать звук. По этой причине лучше убедиться, что ваше видео по-прежнему интересно и увлекательно без звука.
Тем не менее, если учесть, что 85 процентов пользователей Facebook смотрят видео с выключенной громкостью, хорошей практикой будет сделать ваши видео интересными без звука при их публикации на Facebook.
Наконец, не волнуйтесь, если у вас уже есть отличное видео, но его размеры не совсем подходящие. Перед редактированием видео просто попробуйте загрузить видео и использовать функцию Facebook «Переместить».
Как создать фото для обложки Facebook
Теперь, когда вы понимаете размеры, вот шесть главных советов о том, как создать обложку для Facebook.
Используйте Shopify Hatchful для создания пакета бренда
Если вы ещё не создали логотип или визуальный брендинг для своего бизнеса, попробуйте Shopify Hatchful.
Этот бесплатный инструмент позволяет вам быстро и легко создать отличный брендовый пакет – он включает изображения, отформатированные для каждого из ваших основных каналов в социальных сетях.
Hatchful даже предлагает два варианта обложки для Facebook.
Используйте бесплатный инструмент для редактирования изображений
Если у вас уже есть логотип или визуальный брендинг, воспользуйтесь бесплатными инструментами для редактирования изображений и графического дизайна. Мы перечислим некоторые из них ниже в этой статье.
Большинство инструментов графического дизайна оснащены шаблонами обложки для Facebook. Обычно они отформатированы для рабочего стола (820 на 312 пикселей). Потому лучше создать новый дизайн, используя размеры, подходящие для настольных компьютеров и мобильных устройств (820 на 462 пикселя).
Затем загрузите шаблон фотографии обложки Facebook в свой дизайн, чтобы вы могли видеть, какие части вашего изображения будут обрезаны на настольных устройствах.
Используйте бесплатные стоковые фотографии и видео
Что делать, если у вас нет ярких изображений или видеозаписей для использования на вашей странице в Facebook? Нет проблем!
Создавая обложку для Facebook, стоит помнить о различиях между страницами Facebook и профилями Facebook.
Обязательно примите во внимание эти дополнительные элементы при создании обложки для Facebook.
Придерживайтесь рекомендаций Facebook
Большинство рекомендаций Facebook основаны на здравом смысле. Однако, их стоит прочитать, чтобы избежать глупой ошибки, которая может привести к тому, что Facebook удалит вашу страницу с сайта.
Эти рекомендации включают:
- Не используйте материалы, защищенные авторским правом, которые вам не принадлежат или на которые у вас нет лицензии.
- Убедитесь, что ваша фотография на обложке Facebook подходит для семейного просмотра и безопасна для работы.
- Если вы напрямую рекламируете продукт или услугу на обложке Facebook, убедитесь, что вы не нарушаете какие-либо правила рекламы Facebook.
Для получения дополнительной информации ознакомьтесь с правилами для страниц Facebook.
Как изменить фото на обложке Facebook
После того, как вы создали обложку или видео для Facebook, загрузить их на Facebook проще простого.
Просто зайдите на свою страницу в Facebook, щелкните значок камеры, а затем нажмите «Загрузить фото».
Рекомендации по фото на обложке Facebook
Теперь, когда вы знаете практические аспекты, вот четыре лучших метода создания привлекательного изображения обложки Facebook.
Используйте изображение с сильным фокусом
Лучше избегать абстрактных изображений, которые не служат четкой цели. Помните, ваша фотография на обложке Facebook – это возможность привлечь внимание посетителей. Так что используйте изображение, которое привлекает внимание людей и вызывает любопытство.
Ваш образ также должен соответствовать внешнему виду вашего бренда.
Сделайте акцент справа от изображения
Изображение профиля и боковая панель находятся в левой части страницы, поэтому обложки, как правило, выглядят лучше, когда фокус находится в правой части изображения.
Также есть тактическое преимущество в привлечении внимания зрителя к правой части страницы: именно здесь находится призыв к действию страницы Facebook.
Не включайте мелкий текст или визуальные элементы
Вы должны убедиться, что любой текст или визуальные данные, которые вы включаете, достаточно большие, чтобы их можно было легко просматривать на небольшом экране смартфона.
Это важно учитывать, когда подавляющее большинство пользователей Facebook заходят на сайт со смартфонов.
Регулярно обновляйте фото на обложке Facebook
Каждый бренд и бизнес уникальны, поэтому не существует универсального решения, которое подойдёт всем, когда дело доходит до хорошей фотографии на обложке Facebook. Но есть несколько вещей, которые следует учитывать, чтобы улучшить вашу игру на Facebook.
Оптимизировать для мобильных устройств
Когда мы смотрим на наши профили в Facebook и меняем изображения обложек, мы, чаще всего, находимся на рабочем столе, но, подавляющее большинство людей, просматривающих Facebook, делают это через мобильные устройства.
Брендинг
Согласованный брендинг с вашим профилем Facebook очень важен, поскольку ваши клиенты хотят сразу знать, что ваш профиль правильный, а не учетная запись для фанатов / спама.
Правило CTA
Вы нашли отличные изображения. Они могут быть привлекательными, мотивационными и вирусными. Но, ничто не может сравниться с фотографией на обложке с призывом к действию. Ваше фото на обложке можно использовать для рекламы вашей распродажи или нового продукта, который вы запустили.
Независимо от того, что является новым для вашего бизнеса, вы должны подтолкнуть своих клиентов к тому, чтобы они узнавали больше о вас.
Тестовые видео и изображения
Тестирование видео и изображений может помочь вам понять, чего хотят ваши клиенты. Возможно, изображения отлично подходят для взаимодействия на Facebook, но видео помогают мотивировать ваших клиентов посетить ваш сайт. Вы никогда не узнаете, что мотивирует ваших клиентов, пока не протестируете свои сценарии.
Сделайте это увлекательным
Все изображения должны быть созданы для привлечения внимания, и изображения на обложках Facebook не должны быть исключением. Создание изображений, которыми люди хотят поделиться с друзьями и семьей, будет означать бесплатное распространение и продвижение бренда людьми, которым нравитесь вы и ваш бизнес.
Социальное доказательство гораздо важнее в сегодняшней среде электронной коммерции, чем реклама и маркетинг!
Инструмент для создания обложек для Facebook
Существует множество инструментов, которые могут помочь вам создавать обложки для Facebook, поэтому вам не нужно общаться с дизайнером каждый раз, когда вам нужно новое изображение.
Ниже приведены пять самых популярных инструментов создания на Facebook, так что вы можете начать создавать прямо сейчас.
Canva
Canva – это инструмент для создания изображений для любой платформы, но особенно для обложек Facebook. Их шаблоны обложки также просты в использовании. Вы просто выбираете макет, изображения, шрифты и цвета, которые подходят вашему бренду, и готово!
Adobe Spark
С Adobe Sparks вы можете бесплатно создавать потрясающие обложки для Facebook. Этот инструмент помогает создавать яркие баннеры, которые усиливают ваш бренд и привлекают аудиторию за считанные секунды. К тому же они выглядят супер профессионально.
Bannersnack
В Bannersnack есть множество шаблонов, с которых можно начать, просто перетащив изображение и текст, вы получите отличные результаты за считанные минуты. В этом бесплатном инструменте также есть миллионы стоковых фотографий и анимаций.
Fotor
Создавайте привлекательные обложки Facebook с помощью Fotor, которые выразят эмоции вашего бренда всего за несколько кликов. За четыре простых шага вы можете получить идеальный актив для своей стратегии в Facebook, который повысит вовлеченность ваших подписчиков.
Crello
Crello позволяет создавать обложки для Facebook или видео, которые понравятся вашим подписчикам. Их шаблоны предлагают пользователям вдохновение и творческий подход, поэтому они могут создавать ресурсы, которые обычно выходят за рамки их возможностей. С Crello вы можете конкурировать с более крупными брендами на вашем рынке.
Резюме – обложка страницы на Facebook
- Фотографии обложек Facebook отображаются с разрешением 820 пикселей в ширину и 312 пикселей в высоту на настольных компьютерах и 640 пикселей в ширину и 360 пикселей в высоту на мобильных устройствах.
- Лучше всего создавать изображение шириной 820 пикселей и высотой 462 пикселя, помня, что на настольных устройствах верх и низ фотографии будут обрезаны на 75 пикселей каждый.
При создании обложки Facebook помните о следующих передовых методах:
- Привлекайте внимание зрителя, используя изображение с сильным фокусом.
- Сделайте акцент на правой части изображения, чтобы визуально сбалансировать макет страницы Facebook.
- Избегайте добавления мелкого текста или визуальных деталей, которые будет сложно увидеть пользователям смартфонов.
Наконец, после того, как вы создали и загрузили свою обложку в Facebook, обязательно проверьте, как она отображается на разных устройствах, и внесите необходимые изменения. Таким образом, вы можете быть уверены, что она будет отлично выглядеть для всех!
В этом уроке мы научимся создавать обложку, на которой вы держите в руке карточку с вашим аватаром. Таким образом, два отдельных элемента мы объединим в рамках одного дизайна.
Сложность урока: Средний
Аватар и обложка в профиле Facebook – уникальное средство самовыражения и возможность выделиться среди других пользователей. Эти два изображения полностью независимы друг от друга. Аватар отображается рядом с любыми комментариями и статусами пользователя, а обложку видно только на вашей личной странице. А что, если разработать такой аватар и обложку, которые будут частью единого дизайна?
В этом уроке мы научимся создавать обложку, на которой вы держите в руке карточку с вашим аватаром. Таким образом, два отдельных элемента мы объединим в рамках одного дизайна.
Анализируем рабочее пространство
У Facebook есть интересный подход к размещению аватара и обложки. Но перед тем, как начать работу, мы должны выяснить, какие есть ограничения. Нет ничего хуже, чем столкнуться с проблемами, которые изначально не учли.
Шаг 1
Относительно графики для профиля есть несколько жестких правил, которые необходимо соблюдать:
- Обложка должна иметь размер точно 851 пиксель в ширину и 315 пикселей в высоту. Если у картинки другие параметры, то Facebook автоматически ее обрежет или растянет до нужного размера.
- Аватар должен быть квадратным, на компьютере он отображается размером 160 х 160 пикселей (на мобильных устройствах меньше). Странно, что Facebook не позволяет загружать картинки именно такого размера (160 х 160). Кстати, минимальный размер картинки, которую Facebook разрешает установить в качестве аватара, 180 х 180 пикселей.
- Вокруг аватара, в любом случае, всегда будет белый контур. Он прописан в исходном коде, и мы никак не сможем это изменить. Но мы постараемся учесть это в дизайне.
Шаг 2
Чтобы облегчить нам работу, к этому уроку прилагается файл с psd-шаблоном.
2. Подбираем фото
Концепция моего дизайна следующая: на обложке изображен основной снимок со мной, на котором я в руке держу карточку в аватаром. Вместо фотографий, которые я держу в руках, я использовал обычные белые карточки, на которые мы позже наложим картинки.
Шаг 1
Самым сложным оказалось сделать снимок для обложки. Допустимое разрешение достаточно неудобное, из-за чего мне пришлось держать карточки слишком высоко, а это не выглядит естественно и непринужденно.
Шаг 2
Закончив со снимком для обложки, нам нужно сделать еще несколько разных фото. Проявите свой творческий потенциал и поэкспериментируйте с одеждой, позами и дополнительными атрибутами. Важно, чтобы все фото были разными, но визуально их что-то объединяло, например, это может быть одинаковый фон и настройки камеры.
3. Расположение обложки
В шаблоне используются смарт-объекты, благодаря которым экспортируемые фото всегда будут размещены точно пиксель к пикселю. Но внутри смарт-объекта достаточно сложно правильно разместить объект. Поэтому сперва мы подберем наиболее удачное положение фото на шаблоне, а затем перенесем его в смарт-объект.
Шаг 1
Открываем файл с шаблоном в Photoshop. Затем переходим File – Place Linked (Файл – Поместить связанные), чтобы импортировать наше фото в шаблон. Размещаем снимок сразу над слоем с обложкой.
Шаг 2
На слое с нашим снимком жмем сочетание клавиш Alt+Ctrl+G или переходим Layer – Create Clipping Mask (Слой – Создать обтравочную маску), чтобы преобразовать фото в обтравочную маску. Таким образом, видимость фотографии будет зависеть от границ слоя, к которому эта фотография привязана, как обтравочная маска.
Шаг 3
Переходим Edit – Free Transform (Редактирование – Свободная трансформация), чтобы появились узловые точки для редактирования, масштабируем и поворачиваем снимок, пока фото не будет хорошо вписываться в пространство, отведенное под обложку.
Шаг 4
Маловероятно, что после масштабирования фото идеально впишется в шаблон. Вот в данном случае ограниченные размеры обложки действительно полезны. Идея заключается в том, чтобы использовать две копии снимка: одну для того, чтобы вырезать область руки с аватаркой, а вторую – для подгонки остальной части фото. Это позволит нам создать максимально качественный и реалистичный результат.
Дублируем фото Layer – Duplicate Layer (Слой – Дублировать слой) (Ctrl+J). Затем преобразовываем копию в обтравочную маску Layer – Create Clipping Mask (Слой – Создать обтравочную маску) (Alt+Сtrl+G).
Шаг 5
Берем Rectangular Marquee Tool (M) (Прямоугольное выделение) и выделяем область руки, которая держит аватар. Затем по форме выделения создаем обтравочную маску для копии снимка Layer – Layer Mask – Reveal Selection (Слой – Слой-маска – Показать выделенные области). Сейчас мы не увидим никаких изменений, так как под слоем с маской у нас лежит копия фотографии.
Шаг 6
Выделяем оригинальный слой с фото и активируем свободную трансформацию Edit – Free Transform (Редактирование – Свободная трансформация) (Ctrl+T), чтобы подкорректировать расположение фото, при этом убедитесь, что остальные карточки хорошо видны.
Шаг 7
С зажатой клавишей Shift на панели слоев выделяем обе копии фото. Затем объединяем их вместе Layer – Merge Layers (Слой – Объединить слои) (Ctrl+E).
Закончив с позиционированием, дальнейшее редактирование фотографий будет проходить внутри смарт-объекта с обложкой. Убедитесь, что слой с фото активен, затем зажимаем клавишу Ctrl и кликаем по миниатюре слоя на панели слоев, чтобы загрузить его выделение. Далее переходим Edit – Copy (Редактирование – Копировать) (Ctrl+C), чтобы скопировать выделенную область.
4. Создаем эффекты на обложке
Теперь мы должны перенести готовую обложку в смарт-объект и завершить создание нужного эффекта. Я решил сделать фото черно-белым и увеличить контрастность. Вы можете поступить так же или придумать что-то свое!
Шаг 1
Дважды кликаем по смарт объекту с обложкой, чтобы открыть его для редактирования. Затем переходим Edit – Paste (Редактирование – Вставить) (Ctrl+V), чтобы вставить скопированную в предыдущем шаге область на новый слой.
Шаг 2
Используем Quick Selection Tool (W) (Быстрое выделение), чтобы выделить модель с карточками и отделить их от фона. Далее используем выделение, чтобы создать маску Layer – Layer Mask – Reveal Selection (Слой – Слой-маска – Показать выделенные области).
Шаг 3
Подбираем подходящий фон и вставляем его в смарт-объект. Я выбрал размытое городское фото с сайта Envato Market.
При необходимости корректируем фон. Например, вы можете добавить корректирующий слой Curves (Кривые) и увеличить яркость фона.
Переходим в меню File – Place (Файл – Поместить) (Embedded (Встроенный) или Linked (Связанный)) и добавляем одно из дополнительных фото, которое мы сделали в начале урока. Масштабируем его, поворачиваем и перемещаем, чтобы разместить на карточку в противоположной от аватарки руке. Меняем режим смешивания фото на Multiply (Умножение), чтобы снимок сохранить затенение на обложке и не перекрывать его снимком.
Шаг 6
Снова берем Quick Selection Tool (W) (Быстрое выделение) и выделяем пальцы, затем переходим Layer – Layer Mask – Hide Selection (Слой – Слой-маска – Спрятать выделенные области).
Шаг 7
Добавляем другие фото, используя способ, описанный выше. Добавляем маски, чтобы убрать лишние области и создать видимость, что каждая карточка — это новый снимок.
Шаг 8
Зажимаем клавишу Alt и переходим Layer – Merge Visible (Слой – Объединить видимые), чтобы объединить все видимые слои на отдельном новом. Затем преобразовываем этот слой в смарт объект Layer – Smart Objects – Convert to Smart Object (Слой – Смарт-объект – Преобразовать в смарт-объект).
Шаг 9
Переходим Filter – Camera Raw Filter (Фильтр – Camera Raw) и на вкладке Basic (Основные) вводим следующие настройки:
Exposure (Экспозиция): +0.30
Highlights (Свет): +88
Shadows (Тени): +42
Whites (Белые): +86
Clarity (Четкость): +37
Saturation (Насыщенность): -76
Переключаемся на вкладку Effects (Эффекты) и вводим следующие настройки:
Dehaze (Удаление дымки): +26
Post Crop Vignetting (Виньетирование) Amount (Количество): -33
Шаг 10
После применения фильтра Camera Raw кликаем по маске фильтра на панели слоев. Вокруг трех карточек создаем выделение и заливаем его черным цветом Edit – Fill (Редактирование – Заливка) (Contents (Содержимое) устанавливаем на Black (Черный)). Благодаря этому мы удалим черно-белый эффект на карточках.
Шаг 11
Сохраняем файл с обложкой и возвращаемся к документу с шаблоном оформления. Скрываем или удаляем слой с фотографией для обложки, который мы использовали в начале для правильного позиционирования, чтобы мы могли видеть новую обложку, созданную в смарт-объекте.
5. Работаем с аватаром
Теперь мы можем заняться аватаром! Несмотря на то, что аватарки Facebook имеют размер всего 180 х 180 пикселей, будет лучше, если мы создадим большую картинку. В нашем шаблоне можно работать с аватаром размером до 1000 пикселей в ширину и высоту.
Шаг 1
Дважды кликаем по смарт-объекту Profile-Blank (Профиль-пустой), чтобы открыть его. Обратите внимание, что исходный файл значительно больше обязательных 180 пикселей. Чем выше качество исходного изображения, тем лучше будет выглядеть установленный аватар.
Шаг 2
Переходим в меню File – Place (Файл – Поместить) (Embedded (Встроенный) или Linked (Связанный)), чтобы вставить выбранную фотку в смарт-объект с аватаром. Затем сохраняем файл, но не закрываем его!
Возвращаемся к файлу с шаблоном, чтобы проверить, как выглядит аватар с нашим фото. Получилось неплохо, но реалистичность результата во многом зависит от легкой тени от пальцев. Не забывайте, что мы не можем производить каких-либо манипуляций с белой обводкой, поэтому тень на аватарке должна быть едва заметной.
Шаг 4
В шаблоне над слоем с аватаркой создаем новый слой для тени. Зажимаем клавишу Ctrl и кликаем по миниатюре слоя с аватаркой, чтобы загрузить его выделение. Затем берем мягкую круглую кисточку (В) с низкой непрозрачностью серого цвета и аккуратно наносим тени под пальцами.
Шаг 5
Используя Move Tool (V) (Перемещение), переносим слой с тенью на смарт-объект с аватаром. Затем переходим Edit – Free Transform (Редактирование – Свободная трансформация) (Ctrl+T) и подгоняем тень под размеры аватара. Если из-за масштабирования стали заметны пиксели, берем Brush Tool (B) (Кисть) и дорабатываем тень.
Шаг 6
Снова сохраняем смарт-объект и проверяем, как выглядит аватар в шаблоне. Удаляем слой с тенью в шаблоне, чтобы проверить, сохранилась ли тень в смарт-объекте.
Шаг 7
Открываем смарт-объекты с аватаром и обложкой. Затем переходим File – Export – Export As (Файл – Экспортировать – Экспортировать как) и сохраняем каждый файл в формате JPG со 100%-ым качеством (Facebook сам сжимает качество картинок).
Делаем бесшовный дизайн профиля для Facebook в Фотошоп
Хотите обновить дизайн профиля в Facebook? В этом уроке мы создадим с вами бесшовный дизайн фото профиля и обложки, которые после установки будут составлять одно целое изображение.
Сложность урока: Средний
Хотите обновить дизайн профиля в Facebook? В этом уроке мы создадим с вами бесшовный дизайн фото профиля и обложки, которые после установки будут составлять одно целое изображение. Такого эффекта мы добьемся за счет наложения одной картинки на другую. Многие пытаются создать такой же эффект, но из-за проблем с размерами не у всех это получается. Давай посмотрим, получится ли у нас.
1. Создаем шаблон дизайна
Шаг 1
Создаем новый документ со следующими параметрами:
- Width (Ширина) и Height (Высота): отвечает за размеры документа. Вводим 1630 пикселей для ширины и 734 пикселя для высоты.
- Orientation (Ориентация): отвечает за ориентацию страницы. Выбираем Landscape (Пейзажная).
- ColorMode (Цветовой режим): отвечает за цветовой режим документа. Выбираем RGB.
- Resolution (Разрешение): отвечает за качество деталей на растровом изображении и измеряется в пикселях/дюйм или пикселях/сантиметр. Так как наша картинка предназначена для веб, этот параметр не так важен, поэтому оставляем стандартное значение 72 пикселя/дюйм (для печати, как правило, используют 300 пикселей/дюйм).
- BackgroundContent (Содержимое фона): отвечает за цвет фона. Выбираем White (Белый).
Шаг 2
Берем Rectangle Tool (U) (Прямоугольник), кликаем левой кнопкой мышки в любом месте полотна. В появившемся окне вводим размер 1630 х 605 пикселей и жмем ОК, чтобы создать прямоугольник.
Открываем панель Window – Properties (Окно – Свойства) и оси X и Y устанавливаем на 0 пикселей. Затем устанавливаем Stroke (Обводка) и Fill (Заливка) на None (Нет).
На панели слоев дважды кликаем по названию слоя и называем его «Фото обложки».
Шаг 3
Снова берем Rectangle Tool (U) (Прямоугольник) и кликаем в любом месте полотна, чтобы создать прямоугольник размером 307 х 307 пикселей. На панели Properties (Свойства) устанавливаем положение по оси X на 38, по оси Y – на 341. Затем параметры Stroke (Обводка) и Fill (Заливка) устанавливаем на None (Нет).
На панели слоев дважды кликаем по новому слою с прямоугольником и называем его «Фото профиля».
Шаг 4
Кликаем правой кнопкой по слою «Фото профиля» и выбираем Duplicate Layer (Создать дубликат слоя) (или жмем Ctrl+J) и нажимаем ОК. Называем копию «Рамка».
Шаг 5
Дважды кликаем по слою «Рамка» (НЕ по названию или миниатюре слоя), чтобы открыть окно Layer Style (Стиль слоя).
Применяем стиль Stroke (Обводка). С его помощью можно создать обводку любого объекта, используя цвет, градиент или узор.
Устанавливаем Size (Размер) на 8 пикселей, Position (Положение) на Outside (Снаружи), Fill Type (Тип обводки) – на белый цвет. Opacity (Непрозрачность) оставляем на 100%, а Blend Mode (Режим смешивания) – на Normal (Нормальный).
Теперь добавляем Drop Shadow (Тень). Этот стиль добавит тень под содержимым слоя. Устанавливаем Blend Mode (Режим смешивания) на Normal (Нормальный), цвет на черный, Opacity (Непрозрачность) – на 22 пикселя, Distance (Смещение) – на 0, Spread (Размах) – на 100%, Size (Размер) – на 10 пикселей. Остальные параметры устанавливаем, как показано ниже.
Шаг 6
Выбираем слой «Фото профиля», берем Rectangle Tool (U) (Прямоугольник) и кликаем в любом месте полотна, чтобы создать прямоугольник размером 1630 х 129 пикселей. На панели Properties (Свойства) устанавливаем положение по оси X на 0, а по оси Y – на 605. Затем Fill (Заливка) устанавливаем на белый цвет, а Stroke (Обводка) – на None (Нет).
Называем этот слой «Основание».
Шаг 7
Выбираем слой «Фото профиля» и в верхнем меню переходим Layer – New Fill Layer – Solid Color (Слой – Новый слой-заливка – Цвет). Нажимаем ОК и выбираем цвет заливки. Называем этот слой «Заливка».
Шаг 8
Далее, чтобы отредактировать форму прямоугольника, мы добавим для него дополнительные опорные точки.
Для этого на панели слоев выбираем слой «Основание». Берем инструмент Path Selection Tool (A) (Выделение контура) и кликаем по прямоугольнику на этом слое, чтобы активировать контур.
После выбора контура на нем появятся все существующие опорные точки. Выделенная опорная точка выглядит как полностью заполненный цветом квадрат, а невыделенная – как пустой квадрат.
Активируем Add Anchor Point Tool (Перо+ (добавить опорную точку))
Чтобы добавить новую опорную точку, размещаем инструмент на контуре и кликаем левой кнопкой мышки. Добавляем четыре новые точки, как показано ниже:
Шаг 9
Так как при добавлении опорной точки она появляется с направляющими усиками, а нам они не нужны, мы должны от них избавиться. Для этого берем Convert Point Tool (Угол) и кликаем по всем четырем точкам.
Шаг 10
Берем Direct Selection Tool (A) (Частичное выделение).
Хватаем вторую точку слева и перемещаем ее ниже под первую. Делаем то же самое с третьей точкой справа. В результате мы вырезали часть прямоугольника под фото профиля. Теперь этот прямоугольник должен выглядеть вот так:
Шаг 11
Дважды кликаем по слою «Основание» (НЕ по названию или миниатюре слоя), чтобы добавить стиль слоя Drop Shadow (Тень). Устанавливаем Blend Mode (Режим смешивания) на Normal (Нормальный), Opacity (Непрозрачность) – на 35%, цвет на черный, Angle (Угол) – на 90 градусов, Distance (Смещение) – на 0 пикселей, Spread (Размах) – на 40% и Size (Размер) – на 200 пикселей.
Шаг 12
Теперь мы должны отредактировать стили слоя «Основание» отдельно от самого слоя. Для этого мы должны перенести этот стиль на отдельный слой. Кликаем по слою «Основание», затем правой кнопкой нажимаем по стилю слоя Drop Shadow (Тень) и в контекстном меню выбираем Create Layers (Образовать слои). В результате стиль должен появиться в виде отдельного слоя под основной.
Шаг 13
На панели слоев выбираем созданный выше слой с тенью. В английской версии Photoshop он будет называться “Base’s Drop Shadow”, в русской – «Тень Основание». Не переключаясь с этого слоя, зажимаем клавишу Ctrl и кликаем по миниатюре слоя «Рамка», чтобы загрузить его выделение.
Шаг 14
Наша задача – удалить тень внутри выделения. Переходим Edit – Cut (Редактирование – Вырезать) (Ctrl+X), затем снимаем выделение Select – Deselect (Выделение – Снять выделение) (Ctrl+D).
Шаг 15
Выбираем слои «Тень Основание», «Основание» и «Рамка». Чтобы выбрать сразу несколько слоев, мы сначала кликаем по слою «Рамка», затем, удерживая клавишу Shift, кликаем по слою «Тень Основание».
Далее жмем правой кнопкой мышки по одному из выделенных слоев и выбираем Merge Layers (Объединить слои) (Ctrl+E).
Шаг 16
Пришло время сохранить текущий результат. Переходим File – Save As (Файл – Сохранить как). В выпадающем списке выбираем формат PSD. Вводим название файла (например, Дизайн-профиля.psd), выбираем место сохранения и нажимаем кнопку Save (Сохранить).
Шаблон для дизайна профиля в Facebook готов! Далее я расскажу вам, как добавить картинку и сохранить готовые для загрузки файлы.
2. Как добавить картинку в шаблон
Шаг 1
Переходим на панель слоев в правой части программы и смотрим на текущие слои:
- «Рамка»: этот слой является шаблоном настоящей страницы в Facebook, с его помощью мы добьемся идеального размещения фото и сразу увидим, какой результат нас ждет после установки графики в Facebook.
- «Заливка»: этот слой содержит цветную заливку и является временным заполнителем фото профиля и обложки. Мы будем размещать картинку над этим слоем.
- «Фото профиля»: с помощью этого слоя мы вырежем фото для аватара и сохраним его.
- «Фото обложки»: с помощью этого слоя мы вырежем картинку для шапки страницы и сохраним ее.
Шаг 2
Постарайтесь подобрать достаточно большое фото, хотя бы 2000 пикселей в ширину, чтобы оно четко подошло под размеры шаблона без потери качества.
Отнеситесь к подбору фото с должным вниманием. Аватар будет находиться в нижнем левом углу картинки. На снимке из урока человек находится в нижнем левом углу композиции, что облегчает нам позиционирование. На хорошем фото главный объект композиции должен быть маленького размера или находиться на расстоянии. Идеальным вариантом будет картинка с пейзажем на фоне.
Шаг 3
В Photoshop переходим на вкладку с открытым фото. С помощью команды Select – All (Выделение – Все) (Ctrl+A) выделяем весь документ. Затем жмем Ctrl+C, чтобы скопировать выделенную область.
В верхней части программы переключаемся на вкладку с шаблоном дизайна. На панели слоев выбираем слой «Заливка», чтобы он был активным, и жмем Ctrl+V. В результате мы вставим скопированную картинку под слоем «Рамка».
Шаг 4
Кликаем по слою с вставленным снимком, чтобы сделать его активным.
Переходим Edit – Free Transform (Редактирование – Свободное трансформирование) (Ctrl+T). В результате по краям фото появится специальная рамка трансформации.
Чтобы изменить масштаб картинки, тянем за опорные точки рамки. Удерживая клавишу Shift, мы пропорционально изменим масштаб. Если подвести курсор к узловой точке, то он превратится в двойную стрелку.
Чтобы передвинуть объект в режим трансформации, просто кликаем мышкой внутри рамки и, не отпуская кнопку, перемещаем ее.
Для поворота перемещаем курсор за пределы рамки трансформации, чтобы он стал двойной изогнутой стрелкой, и кликаем, чтобы повернуть объект. Если при этом зажать клавишу Shift, то шаг поворота будет составлять 15 градусов.
Также вы можете отразить фото, перейдя в меню Edit – Transform – Flip Horizontal (Редактирование – Трансформирование – Отразить по горизонтали).
После каждой трансформации растрового изображения (в отличии от векторного), картинка становится менее четкой. Мы можем минимизировать потерю качества, если будем выполнять всю необходимую трансформацию за один раз, то есть сначала настраиваем масштаб, поворот и т.д., чтобы получить конечный результат, а только потом подтверждаем изменения нажатием клавиши Enter.
Убедитесь, что картинка заполняет собой и фото профиля, и фото обложки.
Шаг 5
Закончив с размещением снимка, кликаем на маленький значок глаза слева от названия слоя «Рамка», чтобы скрыть его.
3. Сохраняем фото профиля и обложки
Шаг 1
Зажимаем клавишу Ctrl и кликаем по миниатюре слоя «Фото профиля» на панели слоев. В результате появится выделение квадратной области размером 307 х 307 пикселей, куда мы будем вставлять аватар.
Переходим Image – Crop (Изображение – Кадрировать), чтобы вырезать картинку по форме выделения.
Шаг 2
Затем переходим File – Export – Save for Web (Файл – Экспорт – Сохранить для веб) (для Photoshop CC 2015 и выше) или File – Save for Web & Device (Файл – Сохранить для веб и устройств) (для более старых версий программы).
В выпадающем меню Format (Формат оптимизированного изображения) выбираем JPEG. В меню Quality (Качество сжатия) выбираем Very High (Очень высокое).
Закончив, нажимаем кнопку Save (Сохранить). Вводим имя для фото профиля и жмем ОК.
Шаг 3
Переходим на панель Window – History (Окно – История). На этой панели выбираем предыдущее действие, чтобы вернуться на шаг назад. Вместо этого можете воспользоваться сочетанием клавиш Ctrl+Alt+Z.
Шаг 4
Зажимаем клавишу Ctrl и на панели слоев кликаем по миниатюре слоя «Фото обложки». В результате выделится прямоугольная область размером 1630 х 605 пикселей. Переходим Image – Crop (Изображение – Кадрировать), чтобы вырезать картинку.
Шаг 5
После кадрирования переходим File – Export – Save for Web (Файл – Экспорт – Сохранить для веб) (для Photoshop CC 2015 и выше) или File – Save for Web & Device (Файл – Сохранить для веб и устройств) (для более старых версий программы).
В выпадающем меню Format (Формат оптимизированного изображения) выбираем JPEG. В меню Quality (Качество сжатия) выбираем Very High (Очень высокое).
Закончив, нажимаем кнопку Save (Сохранить). Вводим имя для фото профиля и жмем ОК.
4. Устанавливаем графику в Facebook
Шаг 1
Чтобы добавить или изменить фото профиля, делаем следующее:
Переходим на страницу и наводим на область аватара. Нажимаем Update Profile Picture (Обновить фото профиля). Теперь вы можете:
- Загрузить фото с компьютера.
- Сделать новое фото.
- Выбрать загруженное или отмеченное фото.
Выбираем Upload a photo from your computer (Загрузить фото) и находим сохраненное фото профиля. Не обрезайте ваше фото на Facebook! Внизу слева нажимаем кнопку Skip Cropping (Пропустить обрезку) и сохраняем результат.
Шаг 2
Чтобы добавить или изменить фото обложки, делаем следующее:
- Переходим на страницу.
- Наводим на область с обложкой.
- Далее нажимаем на кнопку UpdateCoverPhoto (Обновить фото обложки) или AddCoverPhoto (Добавить фото обложки), если его вообще нет.
- Выбираем Choosefrommyphoto (Выбрать из моих фото) и находим нужную картинку на компьютере.
- Выбрав фото, у вас появится возможность изменить его положение, потянув за картинку мышкой. Ни в коем случае не двигаем картинку на данном этапе!
- Нажимаем SaveChanges (Сохранить изменения).
Запомните, что размеры картинок, созданных в рамках данного урока, пропорциональны размеру шапки и аватара в Facebook, поэтому нет необходимости обрезать или менять положение картинок.
К сожалению, Facebook изменил структуру страниц, поэтому картинки, созданные в уроке, не будут работать на страницах. Теперь фото профиля отображается слева от обложки. На данный момент создать бесшовный дизайн можно только для личного профиля.
Такая же проблема и с мобильной версией сайта. Если зайти на любую страницу Facebook с iPhone, вы увидите, что обложка отображается не так, как на компьютере – на смартфоне видна только центральная область, а фото профиля находится в центре.
Тем не менее, мы можем доработать наши картинки, чтобы они хорошо смотрелись и на мобильных устройствах.
Чтобы избежать проблем с картинкой, не размещайте важную информацию справа от фото профиля, особенно, если большинство ваших посетителей пользуются мобильной версией сайта.
Поздравляю, мы закончили!
Отличная работа! Бесшовный дизайн для Facebook готов. Попробуйте поэкспериментировать и добавить интересные детали, чтобы конечный результат смотрелся еще ярче и привлекательнее. Надеюсь, вы узнали для себя что-то новое и воспользуетесь полученными знаниями в будущих проектах. Не стесняйтесь делиться своим результатом ниже в комментариях!
Не хотите тратить время на урок? Предлагаю посмотреть мой плагин для Photoshop (платно), с помощью которого вы сможете добиться такого же эффекта за считанные секунды. Seamless Identity Action for Facebook – плагин для Photoshop для создания эффектного оформления профиля в Facebook.
В этом уроке Вы узнаете, как создать анимированный баннер в Photoshop CS5, используя временную шкалу.
Сложность урока: Средний
Анимированные Gif файлы были поводом для многих шуток в дизайнерских обществах. Это потому, что анимационные картинки известны тем, что немного навязчивы и загромождают интернет-странички. Однако при правильном использовании, анимация может привлечь внимание к себе и заставить забыть о другом содержимом страницы. Сегодня мы покажем, как использовать Photoshop CS5 для создания анимированных GIF баннеров. Давайте начнем!
Прим. переводчика: для этого урока подойдёт и Photoshop CS4.
Это тот самый баннер, о котором пойдёт речь в этом уроке.
Шаг 2. Поместите логотип в верхней центральной части баннера
Шаг 3. Напишите слоган под логотипом.
Откройте диалоговое окно Стили слоя (layer styles)и настройте Тень (Drop shadow). Уменьшите расстояние (distance ) и размер (size ) на 2px.
Теперь добавьте Наложение градиента (Gradient Overlay) и установите режим смешивания на Умножение (Multiply) с непрозрачностью 28%.
Шаг 5. Добавим список рекламных предложений. У нас это будет Tutorials (Уроки), Articles (Статьи), Tips (Советы), Freebies (бесплатно), Basix (Азы), Videos (Видео), Premuim (Премиум) как показано на рисунке.
Растрируйте текстовые слои и создайте Обтравочную маску (Сreate a clipping mask).
Шаг 6. Теперь поместите привлекательную картинку. В нашем случае мы использовали значок премиум-программы для PSDTUTS, но вы можете использовать все, что подходит вам.
Шаг 7. Добавим ещё нужный текст ниже картинки, которую мы вставили в шаге 6.
Откройте диалоговое окно Стили слоя (layer styles) и настройте Тень (Drop shadow). Уменьшите расстояние (distance ) и размер (size ) на 1px.
Включите и проверьте Внутреннее свечение (Inner glow) и оставьте в настройках все как есть.
Добавьте Наложение градиента (Gradient Overlay) с Непрозрачностью (Opacity) 6%
Шаг 9. Теперь, когда мы закончили создание всех наших слоёв, мы готовы приступить к работе по анимации. Во-первых, откройте панель анимации Окно – Анимация (Window> Animation). Я буду использовать панель анимации по Временной шкале (Timeline Animation), а не в Покадровой анимации (frame animation).
Примечание: Эта функция доступна только в Photoshop Extended.
Теперь устанавливаем все слои видимыми, но уменьшаем их непрозрачность до 0%. Фон не трогаем.
Шаг 10. Смотрите изображения ниже для инструкций о том, как вставлять ключевые кадры и где увеличивать непрозрачность. Для каждого созданного нами элемента отдельный скриншот с инструкцией.
Прим. переводчика: ключевые кадры можно будет перемещать мышкой. Так же можно выделить несколько ключевых кадров для перемещения.
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
Шаг 11. Ваша Временная шкала (Timeline Animation), должна выглядеть примерно так, как ниже.
(нажмите на изображение, чтобы увеличить)
Вот и все! Вот такой баннер у нас получился!
А это баннер переводчика по уроку. Практика очень хорошо закрепляет теорию!
Если вы читаете это, вероятно, потому, что вы поняли, что не все размеры изображений идеальны для вашей обложки на Facebook. Часто бывает, что мы находим изображение, которое нам нравится и думаем, что оно будет идеально смотреться на нашей фан-странице, но позже мы обнаруживаем, что оно выглядит пиксельным или просто не соответствует требованиям к пикселям, которые необходимо разместить на обложке.
Вы можете потратить время на поиски изображения, отвечающего этим требованиям, или можете создать оригинальный баннер на свой вкус .
Кроме того, если вы ищете обложку или баннер для своей рекламной страницы Facebook, вы наверняка захотите добавить конкретную информацию о ней, например, контактную информацию или рекламные объявления.
Для этого существуют сотни программ для редактирования фотографий, но одной из самых известных всегда был Photoshop. Создайте обложку или баннер Facebook с помощью Photoshop CC это детская игра, настолько, что мы объясним это ясно и точно ниже.
Как создать обложку или баннер Facebook с помощью Photoshop CC
Конечно, первое, что мы делаем - открываем Photoshop CC (последняя версия, созданная Adobe CreativeCloud). Далее создаем новый документ с необходимыми размерами: 851 x 315 пикселей. Многие предпочитают работать с рекомендациями, но в данном конкретном случае они не нужны. Если вы хотите их удалить, нажмите Ctrl + H.
Помните, что в этой статье мы покажем вам, как правильно работать с Photoshop CC и оптимизировать вашу работу с помощью этой программы. Мы также поможем вам создать Баннер Facebook , но детали, стиль и размещение элементов баннера - на любой вкус и потребности.
Хотя мы рекомендуем некоторые методы проектирования, это не жесткие и быстрые правила, которым следует точно следовать. В идеале вы должны использовать эти инструменты для дальнейшего развития своего творчества.
Выберите обложку
Первым делом нужно выбрать фотографию из нашей галереи, и она не должна занимать весь баннер, поэтому мы можем разместить ее по центру или по бокам. Однако баннер может также быть оформленным с использованием обычного текста или ссылочной фотографии . В этом дополнительном поле вы можете разместить дополнительную информацию о нашей работе или любой другой текст.
Разместить текст
Для этого мы будем использовать наиболее актуальную информацию, выбирая шрифт или шрифт, который можно бесплатно установить в Photoshop CC , размер и цвет шрифта, которые нам подходят. Таким же образом мы можем поиграть с другими деталями, такими как наложение цвета, фокусировка или размытие изображения и падающая тень. Вы также можете создать или создать 3D-эффект для текста с помощью Photoshop CC .
В зависимости от того, сколько текста мы собираемся разместить, пространство может быть организовано путем объединения текста или части текста с фигурой (это может быть линия, прямоугольник, прямоугольник, как вы хотите), так чтобы это не было в воздухе, и есть баланс. не забудь не добавлять слишком много текста, иначе баннер будет перегружен . Но не забывай добавить водяной знак авторского права чтобы идентифицировать это изображение со своей фан-страницей.
Дополнительные советы по лучшему дизайну
При создании баннера вы можете столкнуться с некоторыми косметическими проблемами, которые хотите улучшить. Есть также некоторые детали в дизайне, которые могут улучшить качество вашего баннера, который вы, возможно, не знаете, поэтому следующие советы очень полезны.
Воспользуйтесь всеми цветовыми пространствами
Если вы выбрали фотографию со сплошным цветом с одной стороны, это можно использовать для ее выделения. задний – план в свободном пространстве. Для этого мы выбираем часть этого цвета, копируем и вставляем ее, затем нажимаем Ctrl + T для свободного преобразования. Таким образом мы можем растянуть цвет, чтобы покрыть оставшееся пространство баннера.
Улучшение некоторых цветовых различий
Мы можем улучшить разницу в оттенках, используя ластик, расположенный в левая боковая панель. И мы настраиваем его характеристики, такие как размер, твердость и непрозрачность краев. Кроме того, вы можете создать отдельный слой, чтобы установить оттенок, насыщенность и яркость изображения.
Photoshop - это программа для редактирования фотографий, разработанная в первую очередь для таких целей, она широко используется во всем мире из-за простоты использования и отличных результатов. Как мы видели, создать баннер с помощью Photoshop CC проще, чем кажется, выполнив следующие действия: ты не сможешь потерпеть неудачу .
Читайте также: