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

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

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

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

Изучив данный урок вы научитесь самостоятельно делать дизайн сайта в 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) и чуть правее напишем наш копирайт.

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

 

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

 

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

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

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

А вот по этой ссылке http://www.masalkinn.ru/kak-verstat-saity-podrobnoe-rukovodstvo вы найдете подробное руководство, как данный дизайн сверстать (перевести в интернет формат). Верстку сделал мой хороший знакомый Андрей Масалкин автор блога http://www.masalkinn.ru.

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

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

ВложениеРазмер
woman-design-blogohelp-ru.rar3.48 МБ
Облако тегов:

Отзывов к посту "Урок фотошоп - Как сделать дизайн сайта? Просто!" уже 128:

Аватар пользователя Гость

Я только с фона начал и первый сюрприз, фошоп  выбивает файл испорчен, пробовал другие картинки взять на фон ничего не получается выбивает- файл узора не коректен или испорчен.Просидел часа 2 подбирая картинки одна и та  ошибка ведь формат фотошопе (.PAT) и я никак незагружу картинку с форматом .jpg.

Аватар пользователя Сергей

Хочу стать верстальщиком.

Создание макета чем-то напоминает вертку: дизайнер собирает макет из картинок, а верстальшик разбирает его на картинки.

Делаю представленный выше макет.

Аватар пользователя Дмитрий

Я лет шесть назад купил книгу Money Master , в которой описывалось, как сделать дизайн сайта. Но, даже тогда это был дизайн левой ноги, а в нынешнее время - вообща молчу) Сейчас уже поисковики внимание обращают на дизайн, юзабилити, и т.д., так что это все уже стало целой наукой. 

Вывод: вы доброе дело делает, выкладывая информацию о дизайне:)

Аватар пользователя Ася

Спс за урок! Я не могу понять - это ведь только первая страница сайта. Если кликнуть на напр, "поиск" или зайти в любой раздел, то изображения и расположение информации на странице поменяются. Т.е . на всех других страницах будут и общие вещи (шапка напр) и переменная инфа. Получается, эту каждую новую страницу нужно тоже "рисовать" как отдельную?  И при рисовании за основу брать подходящие варианты "недоделанной картинки" главной страницы (напр, фон с шапкой и хедером)

Аватар пользователя Дарья

Урок действительно классный!

Аватар пользователя Маша

Сергей, спасибо за уроки. Есть вопрос - можно ли с помощью программы notepad++ сделать неподвижный фон и прокручивающуюся страницу? Если да, то как? Заранее благодарю.

Аватар пользователя Евгений

Спасибо рассеяли страх перед фотошопом))

Аватар пользователя Мария

Сергей, спасибо ОГРОМНОЕ за такой подробный, понятный и полезный урок! Все получилось! Чувствую себя гуру ))) Приступаю к верстке...

Аватар пользователя Александр

Спасибо Вам за достаточно подробный мануал. А то, что он снабжен скриншотами - это большой плюс. Думаю, что мой блог с компьютерными советами по адресу: http://liwihelp.ru скоро ждёт смена дизайна :)

Аватар пользователя Мурат

Будет хорошо если вы закончите такими же шагами до конца! ВОТ СТОЛКНУЛСЯ С ПРОБЛЕМОЙ АКТИВАЦИИ ВСЕГО ЭТОГО В РАБОЧИЙ РЕЖИМ, делал всё как у вас но не много по своему вкусу но вот урок не докончен как его кинуть в html?, точнее как правильнее раскройковать всё это потом сделать рабочий слайдер короче потратил время на развлечение с фотошопом обидно

Аватар пользователя Сергей Иванов

Так есть же все, мой коллега сделал верстку - есть ссылка в конце урок, будьте внимательнее.

Аватар пользователя Гость

Здраствуйте, только начала учиться работать в фотошопе. Спасибо Вам за такой подробный урок!
У меня возникла сложность на 9 пункте. Когда переношу логотип на "шапку" он получается на белом квадратике, а не накладывается на бабочек. Значит я что-то делаю не так. Не подскажите?

Аватар пользователя Валерия

Здравствуйте, ответ, конечно, запоздалый, но все же... Картинку вырезать нужно и вставлять на прозрачный фон.

Аватар пользователя Гость

Замечательный урок, Спасибо!

Аватар пользователя Ольга

Здравствуйте. Что-то не получается работа с линейкой. Все движется, но как закрепить это на рисунке. Может надо что-то еще нажать?

Аватар пользователя Наталья

здравствуйте
у меня возник вопрос, почему вы на каждом белом блоке делаете заливку черным, а потом накладываете белый? С какой целью это сделано? почему, например, нельзя оставить белый и просто сделать обводку рамки сразу во время ее создания инструментом U? (у меня фотошоп 6) и тогда функций вообще не будет...
или если заливаешь черным (опять же мне не понятно зачем, почему белый не оставить) не сделать режим наложения overlay и тогда он станет белым?
как я понимаю, чем меньше функций, тем сайт легче будет верстать... или я ошибаюсь?
спасибо!

Аватар пользователя Татьяна

Интересно, неужели с дизайном все так просто? Надо потренироваться на своем сайте ))) А верстку тоже можно освоить, вроде для этого и программы специальные есть

Аватар пользователя Гость

Да, конечно, все так просто, а люди, которые учатся дизайну годами, просто глупцы.

Аватар пользователя Гость

Здравствуйте!
Меня интересует подробнее пункт 21."После этого по аналогии делаем наши остальные 4 новости".Как расположить картинки ровно между собой.я понимаю что существуют сетка и направляющие.но они же не дают большой точности,если еще способы добиться точности в верстке макетов?

Аватар пользователя Гость

Простите, а остальные страницы сайта тоже в одном psd-файле делать?

Аватар пользователя Юлия

Здравствуйте,Сергей!:)
Помогите чайнику,плиз.
Для создания сайта ведь не достаточно отрисовки только одной страницы?Правильно я понимаю?
Необходимо прорисовать также каждую страницу главного меню и не только?

Аватар пользователя Сергей Иванов

Все правильно) Не достаточно просто нарисовать, после того как нарисуете картинку в фотошопе, ее нужно будет порезать на части и сверстать в сделать html страницу.

После все это дело можно попробовать добавить на какой нибудь движок или сделать просто сайт на html.

Аватар пользователя Гость

Спасибо вам огромное за такую хорошую статью! Скажите,а если я текст в фотошопе растрировала, то его уже потом сверстать не удастся?

Аватар пользователя Сергей Иванов

верстайте текст как картинку)

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

Аватар пользователя Надежда

Спасибо за полезный урок.
Не могли бы Вы подсказать про инструмент "Перо". у меня не получается им пользоваться, т.к. при создании точек, закрашиваются автоматически близ лежащие области и непонятно куда нажимать.
Версия фотошопа Adobe Photoshop CS6.
Заранее спасибо.

Аватар пользователя Hellen

Спасибо огромное. Я нарисовала подобное но в зеленом преобладании цветов

Аватар пользователя Сергей Иванов

Пожалуйста, очень рад тому, что мой урок вам пригодился!

Аватар пользователя Стас

Солидная статья по обьему и смыслу. Рассписано до мелочей, спасибо.

Аватар пользователя anastasia

Актуально как раз для меня! Статья безусловно порадовала. Разжевано на уровне домохозяйки :)

Аватар пользователя Svetli

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

Аватар пользователя Гость

Спасибо большое. Отличный урок, отличный блог! :)

Аватар пользователя Сергей Иванов

большое спасибо за похвалу)

Аватар пользователя зара

Я в этом абсолютно ничего не понимаю, но пытаюсь это исправить. Можно уточнить, т.е. рисуется весь сайт с его контентом и картинками? тогда получатся картинки, а каким образом делаются активными те или иные ссылки? Я просто по др. это представляла. Если так создается дизайн, то его с помощью настроек не изменить уже? а только перерисовывать,да? Я в системе укоз создавала сайт, там любой раздел по цветовой схеме можно менять в настройках и картинки вставлять, поэтому мне не совсем понятно после такого опыта. простите что засыпала вопросами.

Аватар пользователя Сергей Иванов

В уроке я делал графическое представление сайта в программе Adobe Photoshop, после макет нужно нарезать на части, а после сверстать (в конце урока есть ссылка на блог, в котором подробно написано как сверстать мой дизайн) картинки будут картинками, ссылки сделать ссылками, текст - текстом.

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

Юкоз же - это уже готовая система для работы с сайтами, посути готовый движок на котором работает сайт.

Аватар пользователя Ольга

Вопрос: когда Вы делали блоки под конкретный раздел сайта, а как Вы размеры узнали? или делали в каком то одном размере, сколько параметры пикселей задавали? а потом уже это при верстки растягивалось?

Аватар пользователя Сергей Иванов

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

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

Аватар пользователя Гость

Спасибо большое ! Очень помогли

Аватар пользователя Сергей Иванов

пожалуйста, рад что вам мой урок пригодился!

Аватар пользователя Тамара

Сергей,здравствуйте! Вот на пенсии постигаю новые для себя знания. Ваш блог исключительно интересен. Вы просто молодец. Я такие знания только начала осваивать, поэтому многого даже не знаю. В пошаговой инструкции у меня проблемы: "Для работы с дизайном нам понадобятся следующие файлы (скачать файлы одним архивом)"- скачала, а при работе не открывается. "Перед началом работы разделим наш дизайн на составляющие" - как это делается я не знаю. Если не трудно напишите на почту или новую запись, я на у Вас подписалась на обновления.

Аватар пользователя Сергей Иванов

по порядку:

1. файлы лежат в RAR-архиве их нужно распаковать сначала программой WinRAR или же любым архиватором.

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

Начинайте работу с пунтка - Настройка фотошопа

будут вопросы пишите, отвечу)

Аватар пользователя Гость

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

Аватар пользователя Сергей Иванов

вот на этой картинке http://www.blogohelp.ru/files/u2/51-text2.jpg включена кнопочка "ТТ", ее нужно убрать и будет печататься строчными буквами.

Также может еще быть, что ваш шрифт не поддерживает строчные буквы)

Аватар пользователя Игорь

Вот это да!

Если честно, я использовал Adobe Muse - ну, потому что, вроде, проверенный производитель, и прога простая. Но основная причина была в том, что Фотошоп я вообще не понимал. Но с таким мануалом ситуация кардинально меняется!

Большое спасибо!

Аватар пользователя Анна

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

Аватар пользователя Сергей Иванов

Как сверстаете так и будет, макет можно сверстать и так и так.

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

Аватар пользователя Ольга

Ссылку на ваш сайт прислала подруга.Конкретно из-за этого урока. Пробежалась по нему поверхностно пока, но урок очень подробный и надеюсь, что у меня все получится. А вам спасибо за труд! Я знаю, что это такое, потому что сама иногда пишу уроки.

Аватар пользователя Katerina

МК просто шикарный!!!
Огромное спасибо, сделала свой первый дизайн сайта конечно сама вижу что много недоделок получилось, но в общем довольна)). Если хотите скину покажу что получилось))

Аватар пользователя Сергей Иванов

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

Аватар пользователя Андрей

Спасибо огромнейшее за урок,очень хорошо все расписано,только у меня 12версия русская,пришлось немного помучаться,а так супер,МОЛОДЕЦ

Аватар пользователя Ника

Сергей, подскажите пожалуйста!!!

Как вы сделали, чтобы "главная" "звёзды" "мода" и пр. НЕ были подчёркнуты сплошной линией (у меня так не получается).
И как вы расположили их по центру полосы? ( У меня все слова вверху полосы и двигаются только вместе с рамкой)

Аватар пользователя Сергей Иванов

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

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

Будите переводить в интернет формат, читайте мою статью Как сделать текст в меню в виде ссылок

надеюсь я вам помог.

Аватар пользователя Ника

Да, большое спасибо!

Аватар пользователя Илья Алексеевич

Урок просто шикарный, спасибо! Хотя конечно сам это я вряд ли смогу сделаь)

Аватар пользователя Санька

Это прекрасно. Сижу и тихо плачу от счастья. Я всегда мечтала научиться верстать макеты сайтов, создавать сайты в реальности - следующий шаг. И никто, никто толком не обьяснял. Здесь все так доступно описано, что я за пять минут разобралась. Спасибо! (остальные за такие уроки берут бешеные деньги, наверное, а вы бесплатно выкладываете) =)

Аватар пользователя Сергей Иванов

Рад что вам пригодилось, можете рассказать об этом своим друзьям, я буду вам очень признателен.

Аватар пользователя Гость

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

Аватар пользователя Сергей Иванов

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

Аватар пользователя zinkuev

Честно говоря, не ожидал увидеть в рунете статью наподобие этой. Я ведь сам когда-то хотел что-то наподобие этого сделать, да вот руки все не доходили. Лень, она такая. А вы молодец! дизайн вышел красивым, да и объяснить потрудились.
PS. Нашел статью на мауле.

Аватар пользователя Иван

Спасибо за урок, всё получилось сделать с первого раза.

Аватар пользователя Сергей Иванов

пожалуйста, рад что он вам пригодился)

Аватар пользователя Irina

ОГРОМНОЕ СПАСИБО!!!!

Аватар пользователя Сергей Иванов

пожалуйста, рад что вам понравилось)

Аватар пользователя непонятно

Как соедить макет сайта с html документом

Аватар пользователя Сергей Иванов

В конце урока есть ссылка на блог, в котором рассказано как сверстать данный макет, изучайте)

Аватар пользователя Nata

Здравствуйте! Урок понравился. Жаль не хватает информации о растоянии и размерах в пикселях между элементами и почему бын выбран изначально такой размер документа, и какие бывают варианты.

Аватар пользователя Mentoll

+1 я тоже задаюсь таким вопросом!
Начал вот делать своё макет,а он получается узким...
Можно ли это как-то исправить?
И вообще действительно - нужны размеры в урок...

Аватар пользователя Сергей Иванов

Я же указал размеры всего дизайна 1024 пикселя по ширине (желательно что бы оснавная часть дизайна умещалась на 1000 пикселях по ширине) на 1632 пикселя по высоте.

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

Аватар пользователя Сергей

А слова "Главная" "Звезды" и т.п. писать каждое слово отдельно или через пробел? Спасибо.

Аватар пользователя Сергей Иванов

как вам удобно так и делайте)

я делал каждое слово на отдельном тектовом слое - мне так удобнее с ними работать.

Аватар пользователя Гость

Спасибо за ваш блог!!Нашел много полезной для себя информации

Аватар пользователя Сергей Иванов

пожалуйста, заходите еще)

Аватар пользователя ЕВГЕН

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

Аватар пользователя Сергей Иванов

Рад тому, что вам все понятно, значит у меня получилось передать свои знания.

По поводу вашей просьбы, я уже обо всем позаботился и сделал готовую элетронную книжку, которую можно скачать на компьютер и поделиться с друзьями - 6 авторских уроков для программы Adobe Photoshop + бонус!

Пользуйтесь на здоровье!

Аватар пользователя Ученик

Супер урок, все получилось. Только вот подскажите мне как начинающему, что делать дальше с этой картинокой?

Аватар пользователя Сергей Иванов

Конечно подскажу, в конце урока, чуть выше формы подписки на мою рассылку, после слов "А вот по этой ссылке..." есть активная гиперссылка - думаю это, как раз то что вам нужно)

Аватар пользователя Semisemicvetik

Я увлеклась веб-дизайном год назад, зубрила фотошоп запоем, перелопатила интернет на предмет уроков по "рисованию" сайта, но лучшего урока для новичков я не встречала!!!

Жаль, что не встретился мне раньше. Автор постарался, чтобы было доступно, легко, красиво...

Большое спасибо!

Аватар пользователя Сергей Иванов

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

Аватар пользователя BuDDa

Доброго времени суток! Урок просто супер :) И можно вопрос, конечно прошу прощения если он уже был. А на всех движках можно совершать такие маневры?

Аватар пользователя Сергей Иванов

вообще-то данный урок для графического редактора Adobe Photoshop, а так графический макет сайта, можно прикрутить к любому движку (cms) на котором работает ваш сайт.

Аватар пользователя Alisa

Спасибо большое за прекрасный урок! Самый лучший в поиске!
К вам такой вопрос: от веб-дизайнера требуется только psd-файл для сдачи программисту?
Или шрифты и фотографии должны быть приложены?
Очень бы хотелось узнать алгоритм.

Спасибо!

Аватар пользователя Сергей Иванов

Алиса спасибо за комментарии и извините за столь долгий ответ (был в отъезде).

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

Далее заказчик верстает макет (или сам или отдает верстальщику на верстку). Есть веб-дизайнеры которые делают макеты сайтов и также верстают верстают их (мне эже верстать не нравится).

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

p.s. если у вас есть еще вопросы, напишите мне через обратную связь - я с радостью на них отвечу.

Аватар пользователя SeoDuck

Отличный урок. Как говорится "всё разжевано даже для тех кто в бронепоезде".

Аватар пользователя Сергей Иванов

Рад тому, что урок вам понравился)

Аватар пользователя Олег

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

Аватар пользователя Саша

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

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

Аватар пользователя Сергей Иванов

Когда нажимаете CTRL+A: выделяется все содержимое выделенного слоя - http://www.blogohelp.ru/files/u2/5-pattern.jpg

"Переходим на наш основной докум..." - выбираем в фотошопе открытый файл с нашим дизайном (который создали в шаге №1).

Аватар пользователя Rivoi

Молодец ! Отлично сделано ! Спасибо за подробный урок!

Аватар пользователя Гость

Хороший урок)
Вот что то не могу понять как сделать нормально фон меню контента, где цвет #5F1338 у меня только правая сторона с тенью получается.
Фотошоп у меня CS4

Аватар пользователя Сергей Иванов

Рад тому, что урок вам понравился)

Что у вас стоит в полях Distance (Дистанция) и Size (размер) ? Поставьте для Distance (Дистанция) значение 0 (тень должна стать с двух сторон).

у меня на картинке как раз так и сделано - http://www.blogohelp.ru/files/u2/9-shadow.jpg

Я ответил на ваш вопрос?

Аватар пользователя Don Rimini

отличный урок. как раз пытаюсь вникнуть в это дело

Аватар пользователя Сергей Иванов

Вникайте побыстрее - это очень интересно, если будут вопросы спрашивайте)

p.s. рад видеть вас на блоге

Аватар пользователя alla

Замечательный урок, как будет свободная минутка обязательно попробую создать что-то оригинальное)

Аватар пользователя Ангелина

Присоединяюсь хороший пост

Аватар пользователя Сергей Иванов

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

Аватар пользователя alla

Спасибо)

Аватар пользователя Seo блог

Затем, надо еще освоить верстку, а это потруднее будет...

Аватар пользователя Сергей Иванов

Можете начать с этого урока - Как верстать сайты? - Подробное руководство (в уроке как раз рассказано, как сверстать дизайн из моего урока).

Аватар пользователя Гость

Здравству!очень интересный урок, только вот не получилось у меня =( вы не могли бы мне помочь в создании и установкедизайна для юкоз? пожааааааааааалуйста умоляяяяяяяю если что анпишите плиз на мой маио пожалуйста!vam-pir_96@mail.ru буду очень ждаьб ответа!

Аватар пользователя Сергей Иванов

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

Аватар пользователя Роман Малышев

Пост супер!

Аватар пользователя Сергей

Первые несколько пунктов можно опустить если пользоваться готовым действием с 960.gs, за пару кликов имеем разлинееный готовый проект :) Верстальщик потом спасибо скажет.

просто для PS можно отсюда взять.
github.com/nathansmith/960-Grid-System/tree/master/app_plugins/photoshop

Аватар пользователя Дмитрий Лебедь

Действительно стоящий внимания пост. Вы молодец! Долго работали над написанием поста?

Аватар пользователя Сергей Иванов

дизайн в фотошопе сделал за 2 вечера, а вот оформление урока с описанием заняло 2 недели (в основном по вечерам 1-3 часа).

Аватар пользователя garif12

ааа все нашел, в архиве с готовым psd нарыл)

Аватар пользователя garif12

Дошел до места где блок голосование создаем, там нужно вставить radiobutton написано а откуда его взятЬ? в архиве нет такого кругляшка) Что делатЬ?)))

Аватар пользователя Сергей Иванов

рад видеть вас на блоге и рад что мой урок вам пригодился.

Аватар пользователя Сергей

Хороший урок, жаль не очень владею фотошопом.

Аватар пользователя Елена

Полезный урок! Спасибо! Как раз то, что искала!

Аватар пользователя Сергей Иванов

Никогда не поздно, научиться, если конечно есть к этому интерес! А я помогу, чем смогу)

Аватар пользователя Елена

Классный урок! просто и понятно!

Аватар пользователя Yana

Я ни с чем "не лажу", ни с версткой, ни с фотошопом. Но когда-то надо начинать. Когда соберусь, обязательно загляну на эту страничку. В закладки её, непременно.

Спасибо автору.

Аватар пользователя Сергей Иванов

Рад видеть вас на блоге, надеюсь в будущем, вам урок пригодится)

Спасибо за комментарий.

Аватар пользователя Seele

Отличный урок для новичков! Вот было бы очень хорошо приложить и урок самой верстки этого шаблона, а особенно интеграция под WP! :)

Аватар пользователя Сергей Иванов

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

Насчет интерграции под wp, врят ли, мы можем сделать под drupal, но это уже другая история)

Аватар пользователя Seele

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

Аватар пользователя Разработчик

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

Аватар пользователя Сергей Иванов

Рад, что мой фотошоп урок, вам помог)

Аватар пользователя Евгений

Отлично предоставлен урок. Простенько стандарнеько но наглядно и понятно.

Аватар пользователя Женя

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

Аватар пользователя Гость

3. Открываем файл с фоном File→New (Файл→Новый или CTRL+N, фаил fon.jpg из архива).

Это не ошибка? Наверное, не Новый, а Открыть?

Аватар пользователя Сергей Иванов

Спасибо, конечно ошибка. Исправил.

Аватар пользователя Alex

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

Аватар пользователя Сергей Иванов

Рад за вас, у меня с версткой туго)

Дизайн получился простой, так как делал для новичков) Точной такой же готовый шаблон вы не найдете)

Аватар пользователя Alex

хорошо не такой же) но разметку похожую не трудно найти

Аватар пользователя Перспективный блоггер

Браво!

Аватар пользователя Сергей Иванов

Спасибо

Аватар пользователя sidash

Приятный дизайн. Жаль, что я верстать не умею((

Аватар пользователя Сергей Иванов

Спасибо. Я тоже с версткой не очень лажу, всего ведь знать невозможно) Знаю много, но понемножку)

Отправить комментарий

Содержимое этого поля является приватным и не будет отображаться публично.
  • Строки и параграфы переносятся автоматически.
  • Используйте специальные теги [adsense:format:slot] или [adsense:format:[group]:[channel][:slot]] или [adsense:block:location] для показа Google AdSense ads.
  • Вы можете использовать метки BBCode в тексте.
  • Вы можете разместить код, используя теги <code>...</code>(общий) или <?php ... ?> (выделенный PHP).

Подробнее о форматировании