Урок фотошоп — Как сделать дизайн сайта? Просто!

0
12638
views
Урок фотошоп - Как сделать дизайн сайта? Просто!

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

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

Урок фотошоп как сделать дизайн сайта

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

Будем делать вот такой дизайн. У меня стоит Photoshop CS5 (английская версия, не люблю русские версии программ).

как сделать дизайн сайта в фотошопе

(нажмите на картику для просмотра оригинала)

Если по какой то причине вы не хотите изучать урок и хотите просто скачать дизайн сайта в psd форматекликайте сюда и качайте

Если вам интересно самому/ой научиться делать такие дизайны этот урок для вас.

Для работы с дизайном нам понадобятся следующие файлы (скачать файлы одним архивом):

— фон с бабочками (для шапки сайта);
— шрифты;
— картинка c девушками;
— картинки для слайдера;
— иконки социальных сервисов;
— картинки для новостей;
— картинка рассылки;
— картинка счетчика.

Перед началом работы разделим наш дизайн на составляющие:

дизайн сайта в psd

1. Фон и подложка для сайта;
2. Шапка сайта (состоит из логотипа и текста, тематической картинки, фона и основного навигационного меню)
3. Слайдер, в просторечье карусель;
4. Поиск по сайту;
5. Основной контент (сами новости);
6. Сайдбар — боковая колонка (блок последние новости, блок социальные сервисы, блок подписка, блок голосование)
7. Пейжер — постраничная навигация по сайту;
8. Футер — нижняя часть сайта.

Приступим к созданию нашего дизайна в фотошопе.

Настройка фотошопа

1. Открываем фотошоп и создаем новый документ File→New (Файл→Новый или CTRL+N– в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши — если такое действие будет встречаться в уроке еще раз, я буду использовать уже только горячие клавиши, которые позволяют экономить время в программе фотошоп).

В окошке я указал следующие параметры:

Урок фотошоп - Как сделать дизайн сайта? Просто!

2. Перед началом работы произведем некоторые настройки фотошопа:

— устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами).

Урок фотошоп - Как сделать дизайн сайта? Просто!

— поставим галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) – данная настройка позволяет выбрать любой слой по клику на нем.

Урок фотошоп - Как сделать дизайн сайта? Просто!

— отобразим палитру History (История) идем Windows→ History  — с помощью этой палитры можно отменять предыдущие действия сделанные в фотошопе (также работают горячие клавишы Ctrl+Z и Ctrl+Alt+Z.

Урок фотошоп - Как сделать дизайн сайта? Просто!

— включаем шкалу-линейку для документа, идем Views→Rules (Вид→Линейки или CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка.

линейка в фотошопе

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

Урок фотошоп - Как сделать дизайн сайта? Просто!

Далее используя направляющих (щелкаете по линейке и тянете мышку вправо или вниз), размечаем места под основные элементы шапки:

Урок фотошоп - Как сделать дизайн сайта? Просто!

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

Создание фона и подложки для сайта

3. Открываем файл с фоном File→Open (Файл→Открыть или CTRL+O, фаил fon.jpg из архива). Полностью выделяем наш документ — нажимаем CTRL+A. Делаем из нашего рисунка фон в фотошопе, идем во вкладочку Edit→  Define Patter (Правка Определить узор), пишем название (я написал pattern).

бесшовный фон для фотошопа

сделать узор в фотошопе

4. Переходим на наш основной документ, идем Edit→Fill (Правка Заливка, SHIFT+F5), в окошке выбираем Pattern, далее выбираем иконку с нашим патерном и нажимаем OK (заливаем наш фон созданным паттерном).

заливка документа фотошоп

заливка документа фотошоп

5. Теперь создадим белую подложку для нашего дизайна. Создаем новый слой, идем Layer→ New→Layer (Слой Новый Слой). Даем ему любое название и жмем OK. В палитре со слоями (Windows→ Layers, Окно Слои, F7) должен появится новый слой.

новый слой фотошоп

новый слой

 

Сейчас нам помогут направляющие (щелкаем по линейке и тянем мышку вправо сделаем одну направляющую, а потом вторую — на глаз делаем что бы расстояние слева и справа было примерно одинаковым).

Удобно делать выделение с направляющими (если нужен точный размер области), но можно обойтись и без них (на глаз).

После этого берем инструмент прямоугольное выделение фотошоп Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область.

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

Заливаем наше выделение любым цветом берем инструмент Paint Bucket Tool (Ведро, G) или просто жмем Alt+Backspace. После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки для Drop Shadow (Отбрасывать тень) — цвет выбрал #5F1338:

создание тени

На этом с фоном закончим и перейдем к созданию шапки для сайта.

Делаем шапку для сайта

6. В начале создадим фон для шапки, из предложенного мною архива берем файл batterfly.jpg, открываем его в фотошопе File→Open. Теперь нужно перенести слой с картинкой в наш основной докумени. Для этого выбираем инструмент Урок фотошоп - Как сделать дизайн сайта? Просто! Move Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя).

Урок фотошоп - Как сделать дизайн сайта? Просто!

В появившемся окошке вваодим название слою (я назвал fon-header), чуть ниже в поле Document  (Документ) выбираем документ в который нужно вставить слой, у нас woman-design-blogohelp.psd и нажимаем OK.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Слой должен вставиться ровно посередине документа.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Теперь передвинем наш слой в самый верх, это можно сделать 2 способами:

Первый способ: берем инструмент Урок фотошоп - Как сделать дизайн сайта? Просто! Move Tool, кликаем по нашему слою с бабочками и не отпуская кнопку мыши еще нажимем клавишу Shift (что бы слой двигался равно вверх) и после этого тянем мышку вверх и в нужном месте расспологаем наш слой.

Второй способ: выбираем слой с бабочками и слой с фоном в палитре Layers (F7)

Урок фотошоп - Как сделать дизайн сайта? Просто!

После этого в настройках элемента Урок фотошоп - Как сделать дизайн сайта? Просто! Move Tool , выбираем иконку Align top edges (Выравнить обекты по верхнему краю):

Урок фотошоп - Как сделать дизайн сайта? Просто!

В итоге у нас получилось:

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

Я специально сделал фон с бабочками больше белого фона, сейчас расскажу как удалить лишние края слева и справа. Теперь выбираем мышкой наш слой с бабочками и берем инструмент  прямоугольное выделение фотошоп Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область — выделяя наш ненужный кусок. После того как вы нарисовали область ее можно двигать клавишами Вверх, вниз, право, влево.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Далее просто нажимаем Delete и удаляем ненужную нам часть слоя. По анологии делаем с правым кусочком слоя. После этого для слоя fon-header, не снимая выделение со слоя, установим ему Opacity (Непрозрачность) в 20%.

Урок фотошоп - Как сделать дизайн сайта? Просто!

7. Теперь сделаем небольшое затемние вверху шапки. Создаем новый слой — Shift+Ctrl+N. Даем ему любое название (у меня shadow-top) и жмем OK.

После этого не снимая выделения со слоя shadow-top нажимаем Ctrl и не отпуская его кликаем по иконке слоя fon-header.

 Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

После этого заливаем слой любым цветом — Alt+Backspace и идем в свойства слоя (кликаем два раза по слою). Снимае выделение, нажимаем Ctrl+H. Далее выбираем свойство Gradient Overlay (Заливка градиентом) и ставим такие свойства:

Урок фотошоп - Как сделать дизайн сайта? Просто!

Далее кликаем по полоске с градиентом и ставим такие цвета:

Урок фотошоп - Как сделать дизайн сайта? Просто!

Теперь нужно слой с затемнением (shadow-top) поместить ниже слоя (fon-header). Жмем F7, выбираем нужный нам слой, хватаем его мышкой и переносим на порядок ниже (так же можно менять порядок слоев используя клавиши Ctrl+} — опустить слой на порядок или Ctrl+{ — поднять слой на порядок).

работа со слоями в фотошопк

 

Делаем логотип для сайта

8. Фон готов теперь давайте напишем наш текст и нарисуем логотип. Берем инструмент Урок фотошоп - Как сделать дизайн сайта? Просто! Horizontal Type Tool (Горизонтальный текст, T) и щелкаем на шапке в том месте, в котором планируем написать надпись — у меня это WomanSite.ru, и пишем ее. Настройки для надписи я задал такие:

Урок фотошоп - Как сделать дизайн сайта? Просто!

Если у вас на компьютере нет такого шрифта, то его можно взять из моего архива.

C помощью инструмента Move Tool (V), расположил текст в нужном мне месте.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Далее с помощью этого же инструмента Урок фотошоп - Как сделать дизайн сайта? Просто! Horizontal Type Tool (Горизонтальный текст), выделим текст «Woman» и поменяем его цвет на другой #c9584a.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Точно так же поступим и с текстом «Site.ru», только цвет поставим #797878.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Сделаем обводку и тень нашему тексту. Кликаем два раза по слою и ставим галочки напротив Drop Shadow и Stroke (Обводка).

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

На этом с текстом все, переходим к логотипу.

9. Я хочу познакомить вас с основами рисования логотипов в фотошопе. Будем делать вот такой логотипчик (логотип сделан в виде завитушек, всего их 7 штук), на основе моего, который можно взять в заготовленном мною архиве.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Открываем в фотошопе файл logo.jpg, переносим картинку логотипа в основной документ и расплагаем рядом с текстом.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Слою с логотипом задаем Opacity (Непрозрачность) — 25% и отключаем видимость некоторых слоев — что бы не мешали (убираем иконку глазика напротив слоя в палитре Layers, F7)

Урок фотошоп - Как сделать дизайн сайта? Просто!

Логотип будем рисовать (можно сказать отрисовывать) с помощью путей, они, так же называют векторными элементами или векторное включение в растровую картинку (кому интересно, подробнее про пути можно почитать тут).

Кроме палитры Layers (F7), нам так же понадобится палитра Path (Пути). Что бы ее отобразить идем WIndows→Path (ОкнаПути).

Далее с помощью лупы (инструмент Урок фотошоп - Как сделать дизайн сайта? Просто! Zoom tool, Увеличитель , Z) приблизим нашу область перед текстом. Я увеличил на 500%.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Берем инструмент Pen Tools (Перышко, P) , поставим ему такие настройки:

Урок фотошоп - Как сделать дизайн сайта? Просто!

после этого начинаем рисовать первую завитушку — один раз кликаем мышкой в нужном нам месте и получаем первый узелок нашего будущего пути или контура:

Урок фотошоп - Как сделать дизайн сайта? Просто!

Далее рисуем второй узелок, кликаем мышкой чуть ниже и левее предыдущего узла, не отпускаем мыши ведем ее вдоль нашего контура:

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

По аналогии делаем остальные 6 завитушек.

Урок фотошоп - Как сделать дизайн сайта? Просто!

На этом создание логотипа закончено. С помощью стилей слоев закрасим каждую завитушку градиентом. Кликаем по нужному слою два раза и в настройках слоя Gradient Overlay (Градиентная заливка) заливаем его нужным нам градиентом.

В итоге у меня получилось.

Урок фотошоп - Как сделать дизайн сайта? Просто!

После этого обьеденим все слои с нашими путями, выделяем все слои в палитре Layers и обьеденяем, нажимаем Ctrl+E.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Для полученного слоя применим эффекты с текстового слоя. Выбираем слой с текстом, кликаем правой кнопкой мыши и в открывшемся списке выбираем Copy Layer Style. Выбираем слой с нашим логотипом и вставляет эффекты, правой кнопкой и в меню выбираем Past Layer Style.

Урок фотошоп - Как сделать дизайн сайта? Просто!

10. Теперь сделаем горизонтально тектовое меню. Нам понадобиться инструмент Урок фотошоп - Как сделать дизайн сайта? Просто! Raunded Rectangle Tool ()

Урок фотошоп - Как сделать дизайн сайта? Просто!

настройки поставим такие:

Урок фотошоп - Как сделать дизайн сайта? Просто!

Далее просто рисуем наш фон с закругленными углами и радиусом скругления в 10 пикселей:

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

Теперь поверх напишем наш текст, все тем же инструментом Урок фотошоп - Как сделать дизайн сайта? Просто! Horizontal Type Tool (Горизонтальный текст), я выбрал белый цвет #FFFFFF. Выставил такие настройки:

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

В итоге получилось.

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

Теперь вставим нашу тематическу картинку, открываем файл ladies.png, копируем слой с нашей картинкой в основной документ и в палитре Layers переносим слой с картинкой ниже нашего меню. В итоге у меня получилась, вот такая симпатичная шапка для нашего сайта.

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

Делаем слайдер для сайта

11. Теперь давайте сделаем дизайн слайдера для сайта. Создаем новый слой Ctrl+Shift+N. С помощью напрвляющих определим место под слайдер. Далее берем инструмент прямоугольное выделение фотошоп Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область.

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

Заливаем ее любым цветом, после этого применим к этому слою градиентную заливку:

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Напишем поверх текст «Лучшее на сайте».

Урок фотошоп - Как сделать дизайн сайта? Просто!

12. Далее рисуем фон для нашего слайдера так же инструментом прямоугольное выделение фотошоп Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область. Создаем новый слой Ctrl+Shift+N и заливаем любым цветом (у меня #FFD9DE).

Урок фотошоп - Как сделать дизайн сайта? Просто!

13. Фон сделали, теперь сделаем подложку поверх фона, для этого уменьшим нашу выделенную область на 4 пикселя, идем Select — Modify — Contact (Выделить-Изменить-Уменьшить).

Создаем новый слой Ctrl+Shift+N и заливаем ее белым цветом — #FFFFFF.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Далее не снимая выделения, при выбранном слое с нашей подложкой, с помощью еще одной направляющей поделим слой на 2 неравные части (слева будет большая часть, а справа чуть меньше).

Снимаем наше выделение, нажимаем Ctrl+H. Слева у нас будет большая тематическая картинка с описанием, а справа будет 4 маленьких картинки с описанием.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Картинки можно трансформировать с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T)

Картинки я подготовил (файлы slider-base-picture.jpg, slider-picture1.jpg, slider-picture2.jpg, slider-picture3.jpg, slider-picture4.jpg), открываем их в фотошопе и переносим в наш основной документ. Распологаем как нам нужно, у меня получилось.

Урок фотошоп - Как сделать дизайн сайта? Просто!

14. Создаем подложку для основной картинки — создаем новый слой Ctrl+Shift+N, рисуеv пряямоугольное выделение и заливаем его цветом #e15c6c. Для этого слоя поставим Opacity (Непрозрачность), поставим в 90%.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Поверх нее пишем наш текст.

Урок фотошоп - Как сделать дизайн сайта? Просто!

После этого рядом с 4 картинками тоже напишем нужный текст.

Урок фотошоп - Как сделать дизайн сайта? Просто!

На этом со слайдером все, переходим к следующему пункту — Поиск по сайту.

Делаем дизайн блока поиск по сайту

15. Создаем новый слой Ctrl+Shift+N. Чуть ниже слайдера рисуем прямоугольную область и заливаем #ccf8aa.

Урок фотошоп - Как сделать дизайн сайта? Просто!

16. Поверх пишем наш текст «Поиск по сайту:», далее берем инструмент Урок фотошоп - Как сделать дизайн сайта? Просто! Raunded Rectangle Tool (), угол скругления ставим 5 пикслей и рисуем форму поиска. Поверх формы пишем текст «Введите слово или словосочетание…», после этого делаем кнопку для поиска.

Так же инструментом Урок фотошоп - Как сделать дизайн сайта? Просто! Raunded Rectangle Tool () рисуем нашу кнопку и поверх наш текст «Найти».

В итоге у меня получилось.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Делаем оформление блока с новостями

17. Теперь переходим к рисованию самих новостей на сайте. Фон блока будем делать с помощью путей. Берем инструмент Урок фотошоп - Как сделать дизайн сайта? Просто! Rectangle Tool и рисуем прямоугольную область. Эту область можно трансформировать с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T).

Урок фотошоп - Как сделать дизайн сайта? Просто!

Теперь поверх напишем текст — загголовок для первой новости, все тем же инструментом Урок фотошоп - Как сделать дизайн сайта? Просто! Horizontal Type Tool (Горизонтальный текст), я выбрал белый цвет #b14757. Выставил такие настройки:

Урок фотошоп - Как сделать дизайн сайта? Просто!

18. Далее открываем ранее заготовленные мною картинки для новостей (файлы news-picture1.jpg, news-picture2.jpg, news-picture3.jpg, news-picture4.jpg, news-picture5.jpg). Берем первую и распологаем снизу под заголовком.

Урок фотошоп - Как сделать дизайн сайта? Просто!
19. После этого пишем текст справа от картинки. Все тем же инструментом Урок фотошоп - Как сделать дизайн сайта? Просто! Horizontal Type Tool (Горизонтальный текст), я выбрал черный цвет #000000. Только теперь мы не просто кликаем инструментом, а кликаем и не отпуская мыши тянем вправо.

Урок фотошоп - Как сделать дизайн сайта? Просто!

далее пишем наш текст и чуть ниже вставляем текст «Читать далее>>».

Урок фотошоп - Как сделать дизайн сайта? Просто!

20. Чуть ниже сделаем разделительную полоску. Полоска будет выполнена в виде пунктирной линии размером в 1 пиксель. Создаем новый слой Shift+Ctrl+N. Берем инструмент Урок фотошоп - Как сделать дизайн сайта? Просто! Pencil Tool (Карандаш). Цвет для рисования я выбрал: #c8c8c8. Теперь давайте настроим наш карандашь, жмем F5 и ставим вот такие настройки:

Урок фотошоп - Как сделать дизайн сайта? Просто!

И после этого рисуем нашу разделительную линию (с нажатой клавишей Shift).

Урок фотошоп - Как сделать дизайн сайта? Просто!

21. После этого по аналогии делаем наши остальные 4 новости.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Делаем оформление пейжера

22. Теперь давайте сделаем Пейжер — постраничнyю навигацию по сайту. Берем инструмент Урок фотошоп - Как сделать дизайн сайта? Просто! Rectangle Tool и рисуем прямоугольную форму. Что бы форма получалась квадратной, рисуем ее вместе с нажатой клавишей Shift. Так же форму можно трансформировать с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T).

Урок фотошоп - Как сделать дизайн сайта? Просто!

После этого напишем наш текст.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Делаем сайдбар

23. Нам осталось сделать Сайдбар (оформление боковой колонки сайта) и Футер (оформления низа сайта).

Начинаем рисовать первый блок «Популярное на сайте», берем инструмент Урок фотошоп - Как сделать дизайн сайта? Просто! Rectangle Tool и рисуем прямоугольную форму.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Для этого слоя применим эффекты Color Overlay (Заливка фоном) и Stroke (Обводка).

Урок фотошоп - Как сделать дизайн сайта? Просто!

24. Сделаем шапку для блока, берем инструмент прямоугольное выделение фотошоп Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область. Далее уменьшим нашу выделенную область на 1 пиксель, идем Select — Modify — Contact (Выделить-Изменить-Уменьшить). И в окошке поставим единичку и жмем ОК.

Создаем новый слой Ctrl+Shift+N и заливаем любым цветом.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Далее для слоя с шапкой блока применяем свойство слоя Gradient Overlay (Градиентная заливка) и прверх напишем наш текст «Популярное на сайте «.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Для слоя с фоном блока применим эффект Color Overlay (заливка цветом) цветом и Stroke (обводка) цветом #FFC486.

Урок фотошоп - Как сделать дизайн сайта? Просто!

25. Пишем текст наших популярных новостей.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Рядом с каждой новостью сделаем иконочку-маркер, откроем мой заготовленный файл marker.png название_файла.jpg, копируем слой с маркером в наш основной документ и инструментом  Урок фотошоп - Как сделать дизайн сайта? Просто! Move  Tool распологаем наш маркер рядом с названием новости, далее копируем (Ctrl+J) этот слой 4 раза и распологаем в нужных нам местах.

Урок фотошоп - Как сделать дизайн сайта? Просто!

26. Перейдем к следующему блоку с социальными кнопками. Блок делается по аналогии с предыдущим, только для шапки блога используем такой градиент . Текст пишем «Присоединяйтесь к нам в:».

Урок фотошоп - Как сделать дизайн сайта? Просто!

а для фона такие эффекты: заливка белым цветом и обводка цветом #95d9ee.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Иконки берем из моего приготовленного архива: twitter.png, facebook.png, vkontakte.png.

Вставляем иконки в наш документ и распологаем в нашем блоке. Ниже делаем текст для социалок.

Урок фотошоп - Как сделать дизайн сайта? Просто!

27. Далее рисуем блок подписки. Делаем фон для блока, делаем шапку блоку, пишем текст, картинку берем из архива название картинки subscribe.jpg, делаем форму подписки и кнопочку «Подписаться» (форму мы уже делали когдарисовали блок Поиск по сайту) и распологаем как на рисунке.

Урок фотошоп - Как сделать дизайн сайта? Просто!

28. Далее рисуем блок Голосование на сайте. Все по аналогии с предыдущими блоками. Только еще вставим переключатель Radiobutton. Берем файл из архива и вставляем в наш документ.

Урок фотошоп - Как сделать дизайн сайта? Просто!

На этом с блоками все, перейдем к созданию нижней части сайта — Футеру.

Рисуем футер для сайта

29. Создаем новый слой. В самом низу сайта рисуем прямоугольное выделение инструментом прямоугольное выделение фотошоп Rectangular Marque Tool (Прямоугольное выделение, M), заливаем его любым цветом. Далее делаем этому слою градиентную заливку.

Урок фотошоп - Как сделать дизайн сайта? Просто!

После этого сделаем разделительную полоску (между футером и пейжером). Ее тоже зальем градиентной заливкой.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

 

30, Далее пишем текст для меню. Я выбрал цвет и для инструмента поставил такие настройки.

Урок фотошоп - Как сделать дизайн сайта? Просто!

Урок фотошоп - Как сделать дизайн сайта? Просто!

Получилось вот так.

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

 

31. Чуть ниже сделаем полоску разделитель. Приблизим место под текстовым меню с помощью лупы. Создаем новый слой, берем инструмент Урок фотошоп - Как сделать дизайн сайта? Просто! Pencil Tool (Карандаш). Кисть ставим в 1 пиксель, цвет берем #f2cbcf и рисуем линию. Сразу под ней рисуем еще одну линию цветом #ffe4e6.

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

В итоге у меня получилось

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

 

32. Далее копируем слои с нашим логотипом и текстом, располоижим их справа, предварительно уменьших их с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T).

Ниже текстового меню расположим счетчик (картинку можно взять из архива — файл counter.jpg) и чуть правее напишем наш копирайт.

Урок фотошоп - Как сделать дизайн сайта? Просто!

(нажмите на картику для просмотра оригинала)

 

На этом все, как сумел расскрыл вопрос — как сделать дизайн сайта в фотошопе.

 

как сделать дизайн сайта в фотошопе

(нажмите на картику для просмотра оригинала)

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

Так же вы можете бесплатно скачать дизайн женского сайта в PSD формате.

Давайте вместе изучать этот интересный и загадочный мир программы Adobe Photoshop.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here