Я веб-дизайнер. Урок 2. Шапка. Интерфейс.

---

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

---

С прошлого урока мы установили Фотошоп (ФШ), сделали настройку единиц измерения в пикселях, создали документ, сделали модульную сетку, включили прилипание объектов к элементам и сохранили файл test.psd. Открываем ФШ и сам файл на странице последних проектов.

Настраиваем интерфейс для веб-дизайнера

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

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

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

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

Замечу, что эта панель может быть как встроенная (в данном случае это так, поэтому есть неиспользуемое пространство снизу), так и открепленная от края экрана. Манипуляцию по отделению можно произвести зажав за пространство заголовка панели (еще там есть серенькие маленькие штрихи) и “отлипляя” и “прилипляя” к краю экрана (появится соответствующее свечение голубого цвета). Этот же принцип действует для всех остальных панелей и элементов интерфейса.

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

Итак, важные панели\вкладки:
1 — История (History) — отображает совершенные действия, кликая по ним, можно отменить совершенное действие, или все-таки согласится с ним и “отменить отмену”. Кстати, в ФШ горячая кнопка на отмену действия (undo) Ctrl+Alt+Z, а возврат вперед как раз таки Ctrl+Z.
2 — Работа с шрифтом (Character) — панель для работы с основными параметрами текста.
3 — Работа с параграфами (Paragraph) — редко используемая, но все же нужная для сдвига текста в блоках, например когда надо чтобы текст начал “обтекать” сбоку картинки.
4 — Свойства (Properties) — содержимое панели динамически меняется в зависимости от выбранного объекта.
5 — Слои (Layers) — это, наверное, самая важная панель проектировщика, я всегда раздвигаю ее побольше, так как слоев и папок в ней бывает просто огромнейшее количество.

Помните, что если что-то закрылось или потерялось можно:
а) сбросить раскладку интерфейса

б) найти нужную панель в меню Window, например окно со слоями:

Вроде, пока по интерфейсу все.

Начинаем рисовать. Прямоугольник

Наконец мы дошли до чего-то более существенного.
Нарисуем прямоугольник, для этого выберем на панели инструментов значок с изображением инструмента rectangle tool (горячая клавиша U)

Есть два способа нарисовать фигуру

• кликнуть один раз на холсте, при этом появятся поля с размером фигуры, которую ты хочешь получить
• нажать и держать кнопку перемещая мышь, изменяя тем самым размер.
  При втором методе, пока ты держишь кнопку мыши нажми и держи кнопку Shift, чтобы нарисовать квадрат, или держи кнопку Alt для того, чтобы фигура рисовалась не от левого верхнего угла, а из центра где ты кликнул курсором (лучше попробовать, нагляднее). Обе кнопки можно использовать вместе (например нарисовать квадрат из заданной точки. Чтобы совсем добить, во время рисования нажми и держи пробел — можешь передвигать нарисованную фигуру еще до ее создания. Вообщем попрактикуй эти три кнопки во время создания различных фигур — shift, alt, пробел.

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

1 — W — widht — ширина. Установим ее равной 1920
2 — H — height — высота. Установм значение 75
3 — Цвет заливки фигуры. Нажав на нее выпадает панель выбора цветов. Для более точной установки цвета жмем на цветастый прямоугольник в правом верхнем углу — откроется селектор цвета. В нижнем поле # введи число 555. Это поле является hex кодом цвета. С ним придется работать очень часто. Обычно цвет обозначается так #3a33c5, подробней расскажу потом. Жмем ОК. Прямоугольник станет темно-серого цвета.
4 — Цвет обводки фигуры и 5 — толщина этой обводки. Для того чтобы толщина указывалась в пикселях, кликни по полю пять правой кнопкой. На этом шаге отключим обводку фигуры выбрав в поле 4 белый прямоугольник перечеркнутый красной линией.
6 — Это поле для скругления углов, сейчас не трогаем, но пригодится.

ОК. So far so good. Теперь, наша задача разместить этот прямоугольник там, где он должен быть. Выбираем инструмент select tool (горячая кнопка V).

1 — Select tool. Наверное, самый часто используемый инструмент. С его помощью двигаются объекты.
2 — Выравнивание по верхнему краю холста выделенного элемента
3 — Центрирование выделенного объекта относительно центра холста
Важно, чтобы в панели слоев был выделен именно слой прямоугольника, а никакой иной (слой layer создан для того чтобы было видно разницу выделения).

Теперь прямоугольник должен встать на место и заполнить все пространство в ширину без зазоров по бокам и сверху.

Продолжаем рисовать. Меню.

Меню сделаем просто текстовое. Выберем инструмент “Horizontal type tool” (горячая T).

В панели Character выбираем:

1 — Шрифт Tahoma
2 — Начертание Regular
3 — Размер 25 пикселей
4 — Цвет. При клике возникает известный селектор цвета. Давай напишем три латинские EEE

Кликни в любое место на холсте, кроме как на заданном прямоугольнике. Появится курсор ввода текста. Отлично, давай сделаем меню для сайта-портфолио. Напишем следующее “Главная Обо мне Галерея Контакты”. В случае такого простого меню расстояние между этими словами просто делай пробелами в нужном количестве, но строго одинаковом. Я сделаю 5 пробелов.

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

Кстати, касательно управления масштаба просмотра — используй Alt+колесико мыши для зума. Ctrl+1 покажет макет в 100% размере.

Теперь нужно расположить полученное меню. Выберем инструмент Select tool и посмотрим на его настройки. Поставим галочку на поле Auto-select: layer. При щелчке на объект в слоях будет выбираться выбранный элемент, и действия будут применятся к этому объекту (слою). С зажатой клавишей Shift кликни по прямоугольнику. Таким образом в панели слоев выделяются оба слоя с текстом и прямоугольник.

Теперь нажмем кнопку выравнивания центров 3. Текст выровняется относительно горизонтального центра прямоугольника. После выдели только текст, кликнув по нему в панели слоев. Теперь, надо поместить текст ближе к последней направляющей.Для этого, чтобы не сбить выравнивание, жмем Shift (так элемент перемещается строго по вертикали или горизонтали), кликаем и тащим текст к направляющей (кликаем именно на текст!). Если есть необходимость подгонять по пикселям — используй стрелки на клавиатуре. В свою очередь стрелки+Shift смещают элемент на 10 пикселей.

Таким образом мы создали и разместили меню. На этом урок закончен.

---

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

---

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