Знання Порталу. Електронні навчальні курси. Дистанційне навчання

Создание макета сайта в Adobe Photoshop CS5

Часть 1. Создание документа

Для начала создадим новый шаблон. Для этого выберем Файл => Создать. На рабочую панель выведется меню создания нового шаблона, где вы можете, как задать собственные параметры, так выбрать уже существующие наборы (рис.1.1). Набор Web для нашей задачи подходит как нельзя лучше.

^{рис. 1.1}

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

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

^{рис. 1.2}

Для более удобной работы на можно: включить сетку (Просмотр=>Показать=>Сетка), включить или отключить линейки (Просмотр=>Линейки), добавить направляющие (Просмотр=>Новая направляющая) или установить привязки (Просмотр=>Привязать к), что крайне необходимо для сайта, ввиду необходимости соблюдения максимальной точности.

Часть 2. Рисование: слои, наложение цвета и градиент

Теперь после небольшой настройки рабочей области приступим к непосредственному рисованию сайта. Рисовать мы будем с максимальным использованием слоев.

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

 При выборе цветовой гаммы очень рекомендуемо пользоваться “Треугольником цветов”.

^{рис. 2.1}

Для оперирования нашим фоном как слоем просто два раза щелкните на нем. После создание слоя его слой можно редактировать, просто щелкнув на нем 2 раза и при желании можно сохранить его, дабы после не дублировать действия для схожих объектов (рис.2.2).

^{рис. 2.2}

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

^{рис. 2.3}

Наложение градиента осуществляется выбором пункта “Наложение градиента” (рис.2.4).

^{рис. 2.4}

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

• Редактор градиента вызывается щелчком мыши на пример текущего градиент. Здесь мы можем выбрать либо уже существующие стили либо создать собственный.(рис.2.5).Изображение нашего градиента контролируется путем добавления новых ползунков (путем щечка между двумя уже существующим), передвижением их, а также их цветом. Полученный градиент можно сохранить для дальнейшего повторного использования, либо для импорта на другой компьютер. рис.2.5
• Выравнивание по слою определяет, начнется ли градиент в пределах слоя или же относительно всего холста.
• Стиль определят тип градиента: линейный, радиальный, угловой, зеркальный или ромб, что позволят кардинально менять изображение.
• Угол определят, под каким углом относительно начала координат будет рисоваться градиент.

^{рис. 2.5}

Наложение цвета и градиент можно комбинировать через установку их прозрачности.

Полученный стиль можно сохранить (рис. 2.6).                             

^{рис. 2.6}

Готовые стили хранятся под закладкой “Стили”.

Итак в ходе этих нехитрых операций мы получили фон для нашего рисунка(рис.2.7).

^{рис. 2.7}

Часть 3. Создание панели и кнопок навигации

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

Создание панели, как правило осуществляется путем использования инструментов “Прямоугольник” либо “Прямоугольник со скругленными краями” (рис.3.1).

^рис.3.1

При рисовании панели необходимо использовать режим “Слой-фигура”(рис.3.2), позже это значительно облегчит работу с ней.

^рис.3.2

Далее ее необходимо растрировать для дальнейшей работы. для этого сначала выберется слой панели, после чего Слои=>Растрировать=>Фигуру. Теперь можно ее менять дизайн фигуры на свое усмотрение. Как примера мы нанесем градиент и тень.

Переходим на форму управления стиля нашего слоя, наложение градиента было уже описано выше, поэтому мы это опустим, далее следует наложение тени.

Выберем пункт “Тень” (рис.3.3), как вы можете видеть нам предоставляется весьма тонкая настройка данного элемента, начиная цветом тени и заканчивая наличие в нем шума. Наличия ни того ни другого нам на не требуется, мы только немного изменим ее прозрачность.

^рис.3.3

Итак вот полученный нами результат (рис. 3.4).

рис.3.4

Далее создадим пару кнопок, используя для этого те же инструменты что и для создание панели, разница заключается в том что нам не нужна тень на кнопках, вместо этого мы используем эффект теснения для придаче кнопки объемного вида.
Выберем пункт “Тиснение” (рис. 3.5).

^рис.3.5

Используемые параметры:

• “Глубина” указывает глубину теснения;
•  Выбор “Вверх” или “Вниз” указывает на выпуклость или вогнутость слоя;
• “Размер” указывает на размер скоса;
• “Смягчение” указывает размытия края тиснения.
• “Затемнение” указывает характер падения тени, и ее цвет.

Также мы можем указать текстуру нашего слоя и его контур.

Для создания кнопки достаточно стандартных значений тиснения, за исключением того что для не нажатой кнопки “Направление” будет “Вверх”, а для нажатой “Вниз”. Также для создания эффекта нажатия мы установим “Инверсия” на градиенте и немного затемним сам градиент.

Для того чтобы не создавать вторую кнопку заново создайте дубликат уже существующей: Слои=>Создать дубликат слоя (рис.3.6). 

^рис.3.6

Итак создадим три кнопки : две не нажатых и одну нажатую (рис.3.7).

^рис3.7

Часть 4. Создание логотипа и шапки сайта

Теперь создадим “шапку” нашего сайта, она будет состоять из логотипа и надписи.

Сначала создадим надпись. Для этого используем инструмент “Горизонтальный текст” (рис.4.1). Укажем в меню появшемся сверху шрифт и стиль нашей надписи, а также ее цвет.

^рис.4.1

После чего наложим на нее тень и градиент, и в результате получим (рис.4.2).

^рис.4.2

Следующим шагом будет создание нашего логотипа.

Используя инструмент “Прямоугольник со скругленными краями” создадим панель, зарисуем градиентом (рис.4.3).
 

^рис.4.3

Далее используя такие инструменты как “Кисть” (рис.4.4) и “Линия” (рис.4.5) рисуем на новом слое наш логотип.

^{рис. 4.4}

^рис.4.5

В результате получим (рис.4.6), полученный рисунок состоит из множества отдельных слоев, обеднить их можно при помощи Слои=>Объединить слои.

^рис.4.6

После этого наложим на рисунок градиент (рис.4.7).

^рис.4.7

Как результат мы получаем (рис.4.8).

Если логотип вышел слишком малых размеров, то его можно трансформировать(Редактирование=>Трансформирование=>Масштабирование) . 

^{рис. 4.8}

Часть 5. Размещение контента и выбор цветов для ссылок

Теперь, когда у нас готова “шапка” нашего сайта дело за малым – создать дополнительную навигацию и набрать пример контента.

Для начала создадим дополнительную навигацию.

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

Для этого применим ранее использованный инструмент “Линия”.

Полученный результат (рис.5.1), я предлагаю заполнить градиентом, дабы линии плавно соединялись с фоном (рис.5.2). 

^{рис. 5.1}

^{рис. 5.2}

Далее сделаем надписи основной и до навигации, а также напишем пример контента, используя для этого ранее описанный инструмент “Горизонтальный текст”.

Для начала нанесем текст на основное меню, выбрав для него при этом шрифт “Dollar”.(рис.5.3)

^рис.5.3

Следующим шагом будет нанесение текста дополнительной навигации. (рис.5.4)

^рис.5.4

Теперь настал черед основного текста, а также вставок изображений по необходимости.(рис.5.5)
 

^рис.5.5

И напоследок укажем пример посещенных и не посещенных ссылок.

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

Для создания ссылок используем подчеркивание текста. (рис.5.6) 

^рис.5.6

Александр Кондратченко

Фотошоп

Зверніть увагу на додаткові посилання

Головний розділ

Знання Порталу. Електронні навчальні курси. Дистанційне навчання