Фотошоп для чайников | Уроки фотошопа
Фотошоп для чайников - портал для любителей фотошопа!
Меню сайта
Категории раздела
Обработка фото [109]
Текстовые эффекты [87]
Анимация [32]
Спецэффекты [142]
Веб-дизайн [40]
Тюнинг [9]
Фотомонтаж [62]
Кнопки [39]
Рисование [55]
Наша группа
Опрос
Как Вам наш сайт?
Всего ответов: 186
КтО ОнЛаЙн

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная - Уроки фотошопа CS5 на русском - Веб-дизайн - Создание дизайна веб-сайта с нуля

Создание дизайна веб-сайта с нуля

Мы создадим дизайн домашней страницы.Создание дизайна веб-сайта с нуля

Как видите, это очень симпатичный дизайн, с яркими цветами и не перегруженный элементами. Одна из главных черт дизайна – это то, что он являет собой переплетенную с одной стороны книгу. Готовы? Давайте начнем!

Шаг 1

Создайте в Photoshop новый документ с белым фоном. Для этого зайдите в File => New или нажмите “Ctrl+N”.

Шаг 2

Создайте прямоугольник с закругленными углами должного цвета и размера – какого захотите. Я использую зеленый прямоугольник.

creating-website-subpages-in-photoshop2.jpg

Шаг 3

Создайте серый градиент с помощью Gradient tool и непрозрачностью 13% - теперь верхняя часть сайта слегка темнее.

creating-website-subpages-in-photoshop3.jpg

Шаг 4

Затем мы нарисуем желтый эллипс и, наложив на него маску, мы поместим нужную секцию этого эллипса в прямоугольник.

creating-website-subpages-in-photoshop4_1.jpg

creating-website-subpages-in-photoshop4_2.jpg

Шаг 5

Примените подходящий стиль к слою с эллипсом: простой Stroke размером 3 пикселя и такой Outer Glow:

creating-website-subpages-in-photoshop5_1.jpg

creating-website-subpages-in-photoshop5_2.jpg

Шаг 6

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

creating-website-subpages-in-photoshop6.jpg

Шаг 7

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

creating-website-subpages-in-photoshop7.jpg

Шаг 8

Затем добавьте к кнопкам надписи и маркеры справа (это просто прямоугольники с небольшим outer glow).

creating-website-subpages-in-photoshop8.jpg

Шаг 9

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

creating-website-subpages-in-photoshop9.jpg

Шаг 10

Теперь нарисуйте места переплета для книги. Линия с двумя кружочками будет над кнопками меню и будет как бы зашнуровывать ваш шаблон наподобие электронной книги. Отверстия для шнуровки простые – просто кружочек (ellipse shape tool) плюс inner shadow.

creating-website-subpages-in-photoshop10.jpg

Шаг 11

Теперь сам шнурок. Он рисуется при помощи эллипса и отрезания лишнего (при помощи маски), оставляя только нужный изгиб.

creating-website-subpages-in-photoshop11_1.jpg

Затем измените цвет и разместите его на месте, между двумя отверстиями.

creating-website-subpages-in-photoshop11_2.jpg

Шаг 12

Добавьте текст в заголовок и внизу страницы (и логотип, если хотите). Это все делается при помощи Text tool.

creating-website-subpages-in-photoshop12.jpg

Шаг 13

Теперь нужно встроить иллюстрацию. Откройте скачанный файл в формате PSD и выберите группу слоев номер 7 (это группа в файле, который мы использовали в примере – группа слоев, содержащих здание).

creating-website-subpages-in-photoshop13.jpg

Шаг 14

Перетащите слой на нарисованный вами дизайн и произведите слияние слоев в одну группу – так вам будет удобнее с ними работать. Выделите группу и нажмите Ctrl+E.

creating-website-subpages-in-photoshop14.jpg

Шаг 15

Но подождите – работа ещё не окончена. Нам ещё понадобится добавить небольшую тень к зданию, так оно будет выглядеть более реалистично. Продублируйте слой с иллюстрацией дважды, выберите один из слоев и поставьте их Hue и Saturation на 100 (эти настройки вы найдете в опции “Adjustments of Layer”). Этот слой будет содержать тень для здания.

creating-website-subpages-in-photoshop15.jpg

Шаг 16

Затем выберите верхнюю часть слоя и удалите её

creating-website-subpages-in-photoshop16.jpg

Шаг 17

Примените “Gaussian Blur” (размером 1.7 пикселей) и измените layer fill на 33% - теперь действительно похоже на тень.

creating-website-subpages-in-photoshop17.jpg

Шаг 18

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

creating-website-subpages-in-photoshop18.jpg

Шаг 19

Теперь переместите иллюстрацию на две тени –  но соблюдайте порядок слоев. Тени должны быть под первоначальным слоем с иллюстрацией.

Создание дизайна веб-сайта с нуля

Вуаля! Вот и все – при помощи нашего урока дизайн веб-сайта готов!



Похожие материалы:


Просмотров: 2106 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
Форма входа
Популярные уроки
 
 
 
 
 
 
 
 
 
 

Хостинг от uCoz