Дизайн макета сайта в Photoshop. Детальное руководство

Что нужно знать о рисовке макета сайта в Photoshop?

Главным образом, почти 98% проектов функциональных сайтов начинаются с разработки и рисовки веб-дизайна в Фотошопе.

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

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

• шапка;
• расположение меню;
• навигация;
• цветовая гамма;
• шрифты и т. д.

Первое что тебе нужно – концепция.

Ответь себе на вопрос: «Для чегокого тебе нужно создать дизайн веб-сайта?». Прорисуй целевую аудиторию и просчитай в уме перечень функций и задач, которые должен обязательно выполнять сайт.

Однако существуют каноны — дизайн сайта должен быть максимально функционален, практичен и эстетичен.

Пошаговое создание дизайна сайта в Photoshop

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

 

Шаг №1

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

 

Шаг №2

Твой макет сайте будет шириной в 960 пикселов (px). Нажми «Файл» — «Создать» (> File > New Document) или комбинацию клавиш «Ctrl+N». Поставь размер 1200х1500 пикселов и разрешение 72 пиксела. Цвет RGB, 8 бит, фон – белый.

 

Шаг №3

Выдели весь документ при помощи инструмента «Прямоугольная область» (> Rectangular Marque Tool) или нажми комбинацию клавиш «Ctrl+A» -она автоматически выделит всю область документа без исключений.

 

Шаг №4

Перейди в меню «Выделение» – «Трансформировать выделенную область» (> Select > Transform Selection).

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

 

Шаг №5

Установи линейки (направляющие) точно по границам выделения. Перетащи их вручную указателем мыши. Если у тебя в Фотошопе не включены линейки, зайди в «Просмотр» и нажми галочку напротив — «Линейки» (> View > Rulers).

 

Шаг №6

Далее, сделай отступ между краями рабочей области макета и зоной главного контента. Перейди в меню «Выделение» – «Трансформировать выделенную область» (Select > Transform Selection). Уменьши выделение по ширине до отметки в 920 пикселов.

 

Шаг №7

Следующее, что нужно сделать – создать выделение высотой в 465 пикселов, как это показано на примере.

 

Шаг №8

Создай новый слой и залейте выделенную область серым, используя, например, «Инструмент Кисть» (> Brush Tool) или «Инструмент Заливка» (> Paint Bucket Tool).

 

Шаг №9

Выбери цвета для градиента, используя палитру цветов – она на панели инструментов слева.

 

Шаг №10

Примени градиент. Его можно найти также на панели инструментов или кликнув два раза мышкой по необходимому слою. На примере пошагово объяснено что за чем нужно кликать – 1. «Наложение градиента», 2. «Градиент», 3. Выбрать ваши цвета из палитры «Набор». 4. Указать желаемый угол градиента.

 

 

Шаг №11

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

Итак, продолжи. Создай новый слой (сразу его проименуй!) – «Ctrl + Alt + Shift + N»и выберите мягкую кисть, размер, например около 600 пикселов (можешь менять размеры по своем вкусу).

 

Шаг №12

Передвинь все слои в следующем порядке – «Подсветка» — «Шапка» — «Фон».

 

Шаг №13

Кликни кистью один раз в центре шапки. Поставь прозрачность и удали потом часть пятна – разруби его, например, инструментом «Прямоугольная область» и нажмите клавишу «Delete». Слой с подсветкой сожми по вертикали и растяни (комбинация клавиш «Ctrl + T»).

 

Шаг №14

Чтобы отцентрировать необходимые слои – выбери их и выбери инструмент «Перемещение» (> Move Tool) или клавиша «V». На панели свойств (вверху) нажми «Выравнивание центров по горизонтали» (> Align Horizontal Centers).

 

Шаг №15

Создай новый слой («Shift + Ctrl + N»). Поставь карандашом (> Pencil Tool) точку. Растяни ее по горизонтали («Ctrl+T») и сгладь края градиентом как делал это ранее.

 

Шаг №16

Временно отключи видимость фонового слоя. Ставим там две точки инструментом «Каранадш» (Pencil Tool), размером в 2 пиксела. Жми далее «Редактирование» – «Определить узор» (Edit > Define Pattern).

 

Шаг №17

Создаем новый слой («Shift + Ctrl + N») и нажми «Редактирование» — «Выполнить заливку».

 

Шаг №18

Выбери далее «Регулярный» и кликни на созданный тобой узор.

 

Шаг №19

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

 

Шаг №20

Как видишь, у нас получилась «шашечка», непрозрачность которой стоит уменьшить.

 

Шаг №21

Далее, выделяй узор в произвольном порядке инструментом «Овальная область» (> Elliptical Marquee Tool). Применяй инверсию выделенной области и при помощи «Растушевки» (> Feather) сгладь края и удаляй ненужную область узора.

 

Шаг №22

Затем пишем название логотипа при помощи инструмента «Горизонтальный текст». К слою с логотипом можно также добавить стиль слоя «Тень» (>Drop Shadow), что находится в меню слоя (два раза жми кнопкой мыши на нужный слой).

 

Шаг №23

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

 

Шаг №24

Напиши название для будущих кнопок.

 

Шаг №25

Здесь в дальнейшем будет так званный – слайдер для контента. Выдели область размером 580х295 пикселов и помести туда любой снимок.

 

Шаг №26

Далее, создай визуальный эффект к слайдеру. Создай новый слой («Shift + Ctrl + N»), выбери «Кисть» (> Brush Tool) и по тому же принципу, что и с точкой – поставь точку диаметром около 400 пикселов и растяни ее (Ctrl+T).

 

Шаг №27

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

 

Шаг №28

Убираем ненужные края, чтобы смотрелось аккуратнее.

 

Шаг №29

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

 

Шаг №30

Добавь указательные стрелки инструментом «Произвольная фигура».

 

Шаг №31

Создай новый слой и прямоугольником выдели область внизу слайдера — инструмент «Прямоугольная область выделения» (> Rectangular Marqee Tool). Сделай ее полупрозрачной (непрозрачность — 50%). Напиши текст.

 

Шаг №32

Добавь описание сайта или проекта.

 

По материалам: www.webdesguru.com