Я веб-дизайнер. Урок 1. Подготовка.
Здравствуй, мой юный падаван. Добро пожаловать на мои уроки начинающего веб-дизайнера. На своих небольших уроках я научу тебя основам этого интересного ремесла: использование фотошопа, сетки, создание кнопок, работа с вектором. Я научу создавать простой макет дизайна сайта, чтобы его можно было передать HTML-верстальщику. Также расскажу много тонкостей и нюансов в этой захватывающей профессии. Моя задача не только научить создавать дизайн, но и дать основы работы с Фотошопом, поэтому интересно будет многим.
Для начала прочитай эту статью. В ней я описал, что тебе нужно для работы. А пока ты ставишь себе фотошоп последней версии (Photoshop CC2017), немного теории.
Задача веб-дизайнера, по сути своей, достаточно проста: нужно нарисовать многослойную картинку, которую впоследствии передают верстальщику и он шаманит над ней. Дизайнер, как бы, создает план будущего сайта: продумывает какого размера будут кнопки, где они будут, какой будет шрифт, и многое другое. Скучать не придется. Важно при этом понимать, что вслед за твоей работой будет пыхтеть как минимум еще один человек, который сильно ворчит, если вдруг что не так. Постараюсь рассказать, как нивелировать это ворчание :)
И вот, будем считать, что ты установил фотошоп (далее по тексту ФШ) и запустил его. Замечу, что я использую только английскую версию ФШ, так как нужно учить терминологию именно на английском, если вдруг придется работать с иностранными заказчиками и разработчиками. Я не буду подробно описывать каждый пункт настроек, просто буду давать аннотации важных элементов. Открыв ФШ в версии СС2017 открывается окно с последними проектами. Для нас сейчас нужна кнопка New, которая создаст новый документ:
После чего появится диалоговое окно создания документа. На этом этапе просто нужно выбрать вкладку web и выбрать предустановку Web large 1920x1080. Проверь, чтобы отмеченные зоны совпадали с твоими настройками. Жми “Сreate” (создать).
Появился новый документ. Давай сделаем важную настройку. Жмем Ctrl+K (далее если у тебя Мак жмем кнопку Cmd). Жмем в соответствии со скриншотом и выставляем в полях Pixels. Жми ОК.
Следующим шагом будет подготовка модульной сетки, по которой мы будем размещать элементы. Модульная сетка очень важна в отрисовке дизайна. Раньше такие сетки создавались вручную или качались с сайта https://960.gs/, но теперь в ФШ есть встроенная утилита по построению сетки. Следуй скриншотам и сделай так, что бы все было 1:1.
Получилась примерно вот такая картина:
Почему именно такие цифры? Дело в том, что продукт, который мы делаем в последствии попадет под “нож” верстальщика, который работает со своим набором инструментов. Цифры, которые ты видишь в полях это своеобразные стандарты, ориентированные на фреймворк bootstrap, с которым умеют (хоть и не все любят) работать верстальщики. По документации этого фреймворка создается 12-ти колоночная разметка, с интервалами 30 пикселей. Так называемая контентная зона расположена по центру и должна быть шириной 1170 пикселей, поэтому применяем простую математику: 1920 (ширина всего полотная) минус 1170 (контентная зона) разделить на 2 (отступы справа и слева) равно 375 пикселей.
Мы создали направляющие для нашего макета. Теперь надо сделать, чтобы эти направляющие никуда не съехали — закрепим их. Заодно включим “прилипание” элементов.
1 — включает \ отключает прилипание к объектам и элементам из списка 2
3 — фиксирует модульную сетку, чтобы случайно ее не сдвинуть
Ты молодец, мы почти закончили подготовку! Осталось сохранить наш проект, чтобы ничего не потерялось. Проекты ФШ сохраняются в формате PSD, они достаточно тяжеловесны. Поэтому ими обычно обмениваются при сдаче проекта или острой необходимости. Назовем файл test и сохраним его в удобную папку.
ФШ спросит не очень важную штуку, поставим галочку, чтоб он больше не спрашивал.
Таким образом, в следующий раз, когда мы откроем ФШ он покажет наш файл test.psd в окне последних файлов.
На сегодня закончим с практикой. В следующем уроке разберемся с некоторыми панелями и нарисуем шапку с меню. Не пропусти урок — подпишись!