Оформляем обложку для Facebook


Анализируем рабочее пространство

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

Шаг 1

Относительно графики для профиля есть несколько жестких правил, которые необходимо соблюдать:

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

- Аватар должен быть квадратным, на компьютере он отображается размером 160 х 160 пикселей (на мобильных устройствах меньше). Странно, что Facebook не позволяет загружать картинки именно такого размера (160 х 160). Кстати, минимальный размер картинки, которую Facebook разрешает установить в качестве аватара, 180 х 180 пикселей.

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



Шаг 2

Чтобы облегчить нам работу, к этому уроку прилагается файл с psd-шаблоном.



2. Подбираем фото

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

Шаг 1

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



Шаг 2

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



3. Расположение обложки

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

Шаг 1

Открываем файл с шаблоном в Photoshop. Затем переходим File – PlaceLinked (Файл – Поместить связанные), чтобы импортировать наше фото в шаблон. Размещаем снимок сразу над слоем с обложкой.



Шаг 2

На слое с нашим снимком жмем сочетание клавиш Alt+Ctrl+G или переходим Layer –CreateClippingMask (Слой – Создать обтравочную маску), чтобы преобразовать фото в обтравочную маску. Таким образом, видимость фотографии будет зависеть от границ слоя, к которому эта фотография привязана, как обтравочная маска.



Шаг 3

Переходим Edit – FreeTransform (Редактирование – Свободная трансформация), чтобы появились узловые точки для редактирования, масштабируем и поворачиваем снимок, пока фото не будет хорошо вписываться в пространство, отведенное под обложку.



Шаг 4

Маловероятно, что после масштабирования фото идеально впишется в шаблон. Вот в данном случае ограниченные размеры обложки действительно полезны. Идея заключается в том, чтобы использовать две копии снимка: одну для того, чтобы вырезать область руки с аватаркой, а вторую – для подгонки остальной части фото. Это позволит нам создать максимально качественный и реалистичный результат.

Дублируем фото Layer – DuplicateLayer (Слой – Дублировать слой) (Ctrl+J). Затем преобразовываем копию в обтравочную маску Layer – CreateClippingMask (Слой – Создать обтравочную маску) (Alt+Сtrl+G).



Шаг 5

Берем RectangularMarqueeTool

 (M) (Прямоугольное выделение) и выделяем область руки, которая держит аватар. Затем по форме выделения создаем обтравочную маску для копии снимка Layer –LayerMask – RevealSelection (Слой – Слой-маска – Показать выделенные области). Сейчас мы не увидим никаких изменений, так как под слоем с маской у нас лежит копия фотографии.



Шаг 6

Выделяем оригинальный слой с фото и активируем свободную трансформацию Edit – FreeTransform(Редактирование – Свободная трансформация) (Ctrl+T), чтобы подкорректировать расположение фото, при этом убедитесь, что остальные карточки хорошо видны.



Шаг 7

С зажатой клавишей Shift на панели слоев выделяем обе копии фото. Затем объединяем их вместе Layer – MergeLayers (Слой – Объединить слои) (Ctrl+E).


Шаг 8

Закончив с позиционированием, дальнейшее редактирование фотографий будет проходить внутри смарт-объекта с обложкой. Убедитесь, что слой с фото активен, затем зажимаем клавишу Ctrl и кликаем по миниатюре слоя на панели слоев, чтобы загрузить его выделение. Далее переходим Edit – Copy(Редактирование – Копировать) (Ctrl+C), чтобы скопировать выделенную область.



4. Создаем эффекты на обложке

Теперь мы должны перенести готовую обложку в смарт-объект и завершить создание нужного эффекта. Я решил сделать фото черно-белым и увеличить контрастность. Вы можете поступить так же или придумать что-то свое!

Шаг 1

Дважды кликаем по смарт объекту с обложкой, чтобы открыть его для редактирования. Затем переходим Edit – Paste (Редактирование – Вставить) (Ctrl+V), чтобы вставить скопированную в предыдущем шаге область на новый слой.



Шаг 2

Используем QuickSelectionTool

 (W) (Быстрое выделение), чтобы выделить модель с карточками и отделить их от фона. Далее используем выделение, чтобы создать маску Layer – LayerMask – RevealSelection (Слой – Слой-маска – Показать выделенные области).



Шаг 3

Подбираем подходящий фон и вставляем его в смарт-объект. Я выбрал размытое городское фото с сайта Envato Market.


Шаг 4

При необходимости корректируем фон. Например, вы можете добавить корректирующий слой Curves(Кривые) и увеличить яркость фона.


Шаг 5

Переходим в меню File – Place (Файл – Поместить) (Embedded (Встроенный) или Linked (Связанный)) и добавляем одно из дополнительных фото, которое мы сделали в начале урока. Масштабируем его, поворачиваем и перемещаем, чтобы разместить на карточку в противоположной от аватарки руке. Меняем режим смешивания фото на Multiply (Умножение), чтобы снимок сохранить затенение на обложке и не перекрывать его снимком.



Шаг 6

Снова берем QuickSelectionTool

 (W) (Быстрое выделение) и выделяем пальцы, затем переходим Layer – LayerMask – HideSelection (Слой – Слой-маска – Спрятать выделенные области).



Шаг 7

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



Шаг 8

Зажимаем клавишу Alt и переходим Layer – MergeVisible (Слой – Объединить видимые), чтобы объединить все видимые слои на отдельном новом. Затем преобразовываем этот слой в смарт объект Layer – SmartObjects – ConverttoSmartObject (Слой – Смарт-объект – Преобразовать в смарт-объект).



Шаг 9

Переходим Filter – CameraRawFilter (Фильтр – 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 (Связанный)), чтобы вставить выбранную фотку в смарт-объект с аватаром. Затем сохраняем файл, но не закрываем его!


Шаг 3

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



Шаг 4

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



Шаг 5

Используя MoveTool

 (V) (Перемещение), переносим слой с тенью на смарт-объект с аватаром. Затем переходим Edit – FreeTransform (Редактирование – Свободная трансформация) (Ctrl+T) и подгоняем тень под размеры аватара. Если из-за масштабирования стали заметны пиксели, берем BrushTool 

 (B) (Кисть) и дорабатываем тень.



Шаг 6

Снова сохраняем смарт-объект и проверяем, как выглядит аватар в шаблоне. Удаляем слой с тенью в шаблоне, чтобы проверить, сохранилась ли тень в смарт-объекте.



Шаг 7

Открываем смарт-объекты с аватаром и обложкой. Затем переходим File – Export – ExportAs (Файл – Экспортировать – Экспортировать как) и сохраняем каждый файл в формате JPG со 100%-ым качеством (Facebook сам сжимает качество картинок).


PFY