Уроки по Фотошопу, Иллюстратору, Флэшу и 3ds max. Статьи по дизайну и фотографии.

Создаем макет блога в Фотошопе.

Создадим макет сайта с помощью Фотошопа на примере макета блога. Быстро и просто.

макет блога

gradient overlay
drop shadow
inner shadow
шапка сайта
Шаг 1. Создаем новый документ (Ctrl+N) подходящего размера (например, 1200*800 px). Создаем новый слой и, выбрав Rectangle Tool (Прямоугольник (U)), рисуем прямоугольник размером 1200*140 px (т.е. 100% по ширине). И применяем к этому слою Стили Слоя.
header Шаг 2. Добавляем тень, как показано в следующем уроке
тень Шаг 3. Копируем слой с тенью из прошлого шага и переносим ее вниз + идем Edit>Transform>Flip Vertical (Редактирование>Трансформация>Отразить по вертикали).
навигация Шаг 4. Задаем в качестве основного цвета (foreground color) черный (#000000), затем задаем новый слой и называем его "navbar". Используя Rectangle Tool(U), рисуем прямоугольник размером 900*27 пикселей. Размещаем его, как показано на рисунке внизу и уменьшаем Непрозрачность до 5%.
навигация Шаг 5. Теперь, выбираем в качестве основного цвета (foreground color) белый и создаем новый слой "navbarstroke". Выбираем инструмент Pencil Tool (Карандаш (B)) и рисуем обводку. Непрозрачность данного слоя ставим - 8%.
навигационное меню Шаг 6. Добавим кнопки, для этого будем использовать шрифт verdana, bold, 12 размера, белого цвета. Для раделения нарисуем на новом слое белые вертикальные линии подходящей Непрозрачности. Также добавим индикатор нахождения на соответствующем разделе сайта в виде маленького треугольника (рисуем его на отдельном слое, как делала это ранее). У нас навигационное меню будет состоять из 7 пунктов, с расстоянием между линиями примерно 88 пикселей.
поисковая форма Шаг 7. Нарисуем поисковую форму. Для этого задаем в качестве основного цвета - #426d97 и рисуем на новом слое подходящего размера прямоугольник (у нас это 200*18 пикселей). Плюс к этому добавляем 1 пиксельную обводку с помощью соответствующего Стиля Слоя - Stroke (Обводка). Непрозрачность делаем примерно 12%.
gradient overlay
поисковая форма
Шаг 8. Добавим теперь поисковую кнопку. На новом слое с помощью все того же Rectangle Tool(U) рисуем 67*18px прямоугольник. Добавляем соответсвующий текст (шрифт - verdana, 11 pt, белый) и применяем к слою с конопкой следующий стиль
stroke
drop shadow
заголовок
Шаг 9. Добавляем заголовок. Задаем основной цвет - белый. Шрифт - Trebuchet MS, размер - 32 пикселя. Применяем к нему следующие Стили Слоя
заголовок Шаг 10. Добавим тень к заголовку. Дублируем слой с тенью дважды, размещаем ее сверху и снизу от текста, уменьшаем и стираем лишнее. Для второй тени также идем Edit>Transform>Flip Vertical.
основной блок Шаг 11. Займемся основным текстовым блоком, для этого создаем новую группу слоев "post" и помещаем в неё все новые слои в эту группу. Для заголовков будем использовать шрифт Verdana, bold, 14 pt, #74aae2, для фраз “Posted by…” - Verdana, 11 pt, #8796ad, а для основного текста - Verdana, 12 pt, #616161. Размер текстового блока делаем 650 пикселей по ширине. Линии означающее конец раздела рисуем на новом слое и #e3e3e3 цвета с помощью Pencil Tool(B). После запись в разделе будем писать шрифтом Arial, size 11, #5c5b5b.
иконка комменариев Шаг 12. Рисуем иконку комментариев. Задаем основной цвет - #76aae3. На новом слое с помощью Custom Shape Tool(U) рисуем подходящую форму. После этого меняем основной цвет на белый и с помощью Pencil Tool(B) рисуем маленькие белый линии. Для сопрводтельного текста будем использовать шрифт Arial, size 11, #5c5b5b.
текстовый блокШаг 13. Дублируем текстовый блок и перемещаем его вниз.
Шаг 14. Пришло время для боковой панели. Рисуем область (на новом слое) шириной 200 пикселей с помощью Pencil Tool(B), предвартельно задав для основного цвета #74aae2. Для текста будет использовать шрифт verdana, size 14, #74aae2.
боковая панельШаг 15. Для подложки под аватарку будем использовать основной цвет - #ededed и инструмент Rounded Rectangle Tool(U), а для шрифта на боковой панели - verdana, size 11, #616161.
иконкаШаг 16. Нарисуем иконку, которая будет стоять напротив пунктов меню Recent Posts и Archives. Кроме этой иконки остальный установки будут аналогичны использованным в шаге 15.
иконка листаШаг 17. Рисуем иконку, для этого увеличиваем масштаб до 3200% и задаем для основного цвета - #bebcbc. Далее выбираем инструмент Pencil Tool(B) c диаметром 1px и рисуем форму.
иконка листаШаг 18. Добавляем согнутый уголок все тем же инструментом, но #acabab цвета.
иконка листаШаг 19. Теперь, давайте добавим тени с помощью Карандаша двух цветов: #e7e7e7 и #ebebeb.
макет блогаШаг 20. Разместим иконку в подходящих местах.
макет блогаШаг 21. Ну вот почти и все. Добавим лишь разделительную черту между основным блоком и боковой панелью. Для этого воспользуемся ранее сделанной тенью, повернем её (Edit>Tranform>Rotate 90 CW) и сотрем лишнее. Ну вот и все, наш макет блога готов!

Урок переведен автором сайта и при цитировании его на русском языке ссылка на сайт обязательна. Автор Mark.


Другие уроки Фотошоп >>