Вы знаете, что такое Photoshop, тогда создать макет сайта не будет для вас проблемой. Если обобщенно говорить о том, как сделать дизайн сайта в Фотошопе, то необходимо только:
- Создать новый документ.
- Добавить фон.
- Добавить картинки.
- Настроить стандартные кнопки.
- Наполнить блоки текстовым контентом.
- Оценить результат.
Шаг 1
Начнем с самого начала. Просто запустите Photoshop и создайте новый документ (CTRL + N) с параметрами, указанными на скрине ниже.
Шаг 2
Теперь вы должны добавить подходящий узор на свой фон.
Layer Style->Blending options->Pattern Overlay.
Шаг 3
Вы хотите создать потрясающий дизайн? Тогда используйте сетчатую структуру для проектирования. Поместите сетчатую структуру в ваш дизайн сайта с интервалами 60px и 20px.
Шаг 4
Итак … теперь пришло время создать меню для будущего сайта. Используйте инструмент Rounded Rectangle для его создания (радиус — 3 px). Ширину для меню возьмем — 940 px, а высоту — 34 px.
Чтоб сделать это меню более привлекательным, перейдите в Blending Options->Drop Shadow. Используйте настройки, которые вы можете увидеть на скриншотах:
Blending options->Inner Shadow
Для меню выбран цвет #6bafff.
Шаг 5
Давайте добавим текст в наше меню. Используйте для этого инструмент Horizontal Type Tool. Вы можете создать свой дизайн с любым шрифтом, который вам нравится. В примере использовался шрифт Aller [bold]. Размер 14px.
Шаг 6
Все кнопки меню являются ссылками, и вы должны показать, что они активны. Поэтому возьмем, к примеру, create — это прямоугольник (цвет, который для него использовался: # 5a90e5).
Результат:
Шаг 7
На каждом приличном сайте есть форма поиска. Используйте инструмент Rounded Rectangle (радиус — 3px), чтоб создать форму поиска со следующими параметрами: 124px и 26px.
Добавляем внутреннюю тень:Blending Options->Inner Shadow.
Создайте один прямоугольник с размерами 41px и 32px.
Blending Options->Drop Shadow
Blending Options->Inner Shadow
Blending Options->Color Overlay (цвет — #6bafff)
Теперь пришло время добавить привычный для функции поиска значок. Откройте Linecons Free->Vector Icons Pack и найдите там значок поиска.
И вот результат:
Шаг 8
Связь с социальными сетями очень полезна и важна для любого сайта. Попробуем создать простую кнопку Facebook.С помощью инструмента Rounded Rectangle (радиус — 3px) создаем кнопку.
Затем используем инструмент Rectangle (закругленный), чтоб создать квадрат (удерживая кнопку Shift) с размером — 16 px.
Выберите инструмент Pen Tool и отрежьте половину этого квадрата.
Нажмите Edit->Transform->Rotate, чтоб поместить этот треугольник на левую сторону прямоугольника. Выделите все слои кнопки Facebook и объедините их (Ctrl + E).
Blending Options->Inner Shadow:
Blending Options->Color Overlay (#c1cac5 )
Теперь добавьте текст Перейти или т.п. на кнопку Facebook.
Попробуйте создать свой логотип Facebook для этой кнопки. Например, вы можете использовать букву F, и выделить ее синим цветом (# 5a90e5).
Результат:
Шаг 9
Создайте новую форму: ширина 940px, высота 372px.
Как всегда, добавьте тень:
И границу: Blending Options->Stroke (20px, цвет # 6bafff).
Шаг 10
Добавьте в свой дизайн стандартные иконки. Не забудьте использовать сетку, расстояние — 180px.
Шаг 11
Добавьте текст. Вы должны использовать тот же шрифт, который использовали для панели меню. Установите размер шрифта на 30px.
Поиграйте с настройками смешивания: добавьте белую тень, цветное наложение (# 6aaefd) и внутреннюю тень, чтоб получить вот такой результат:
Шаг 12
Заполните четыре столбца (ширина каждого — 240 px) текстовым контентом. Лучше добавить разный текст в каждый столбец.
Шаг 13
Создайте кнопку Читать дальше с помощью инструментов, которые мы использовали ранее. Blending options->Inner Shadow, Drop Shadow, Color Overlay (# 919392).
Step 14
Добавьте текст Читать далее или что-то подобное на кнопку.
Шаг 15
Теперь необходимо отделить основную часть созданного сайта от нижней. Создайте линию в 1px, используя стили кнопки Читать далее.
Шаг 16
Ваш следующий блок может быть разделом на любую тематику. Используйте инструмент Rounded Rectangle для создания квадрата (удерживайте нажатой кнопку Shift). Радиус — 3px, ширина и высота — 138px.
Перейдите в Blending options ->Stroke, чтоб ввести настройки: размер-20px, цвет # 919392.
Скопируйте и вставьте этот элемент 5 раз. Поместите эти квадраты с интервалом 20px и добавьте на них фото партнеров, сотрудников и т.д.
Шаг 17
Футер сайта так же важен, как и заголовок. Спросите себя: “Что вы хотите, чтоб ваши посетители делали, когда они дошли до нижней части страницы сайта?” Ответ, который вы получите, станет отличной отправной точкой для разработки футера вашего сайта.
Добавьте градиент, например # 3a8df1 — # 6bafff.
Шаг 18
Добавьте еще три блока в футер на свой выбор, учитывая ответ на вышеуказанный вопрос. Используйте шрифт Arial Regular для заголовков (30px) и добавьте стили, например, как на скриншоте ниже:
Используйте шрифт Arial Regular для текста в разделах (12px).
Поместите несколько стандартных значков в один из разделов футера — RSS, Google Plus + или Twitter.
Ну, собственно и все! Результат:
Если на первый взгляд кажется, что создать дизайн сайта самостоятельно — не возможно и под силу только дизайнерам, то вы ошибаетесь. С помощью всем известной программы Photoshop создать дизайн сайта не составит труда. Достаточно выполнить всего 18 шагов, и вы получите собственный уникальный дизайн для своего ресурса, при этом, абсолютно бесплатно!