Я веб-дизайнер. Урок 3. Группировка. Прозрачность.

---

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

---

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

История

В комментариях ко второму уроку @tannedd попросила упомянуть подробнее об панели история. А точнее, что нажимая на каждый пункт в панели История можно вернуться к определенному шагу назад, или, ткнув на первый пункт - вернуть документ в первозданный вид. По умолчанию, количество шагов отмены ограничено парой десятков. Как увеличить это количество? Жмем Ctrl+K и в меню Performance выбираем нужное количество History States.

1 - иконка панели
2 - если кликнуть то документ вернется в начальное состояние
3 - шаги истории, кликабельны.

Прозрачность

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

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

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

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

Группировка

Очень важная часть умения пользоваться слоями в ФШ это их группировка. В ФШ можно создавать папки, куда можно помещать различные слои и объекты. Видимость и перекрывание слоев будет аналогично их расположению в панели, т.е. Слой, который находится в самом низу панели Layers, также будет находится в самом низу на холсте.
Создать папку можно нажав Ctrl+G или иконку внизу панели слоев.

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

Теперь переименуем их сверху вниз по большим блокам. Будем делать следующие блоки: header, hero, content, footer. Название можно делать и по-русски, но я предпочитаю такой вариант. Хеддер - это там где наше меню, логотип, фон для него, поэтому так и нужно все рассортировать. Для этого я создам еще несколько папок, перетащу их в соответствующем положении. Перемещение элементов работает по принципу drag’n’drop. При перетаскивании групп лучше сворачивать группы, что бы папка не упала не в тот каталог. У меня получилось вот так:

Работа с перетаскиванием слоев это задача требующая навыков Робин Гуда в плане меткости, поэтому можно перемещать активные элементы в панели слоев с помощью комбинаций Ctrl+[ или Ctrl+] (это в английской раскладке там где русские Х и Ъ).

Основы работы со слоями, надеюсь, понятны. Двигаемся дальше к добавлению логотипа.

Добавляем логотип

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

Не долго думая, я беру иконку, выбираю его формат, размер и скачиваю. В этом уроке я скачаю формат PNG. Жмем глазик, формат PNG, размера 128 вполне хватит и Free download. Затем скачанный файл из папки перетягиваем прямо в рабочую зону.

Файл входит в режим предварительного редактирования. Просто жмем Enter. Перетащим этот логотип в соответствующую папку в слоях. После чего нажмем в области названия файла правой кнопкой и выберем Convert to smart object. Зачем я расскажу в другом уроке.

Если сетка по каким то причинам была выключена то включим сочетанием клавиш Ctrl+: (это где Ж) или в меню View - Show - Artboard guides. Будем размещать логотип по сетке. Логотип должен быть в контентной части, поэтому вначале изменим размер до нужного. Выделив в слоях логотип жмем Ctrl+T, появятся ползунки управления. Тут важный момент, что изменение размера может исказить пропорции. Жмем Shift чтобы ничего не исказилось. Когда размер устроил жмем Enter для применения изменений. Я изменил размер до 43x58 чтобы по вертикали он уместился в хеддер и осталось пространство. Подставляем логотип и получаем примерно вот так:

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

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

---

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