12:26 

Дизайн Сайта для Онлайн-Бизнеса

web-design
В творчестве, как и любви, легче остановить мгновение, чем самого себя. (Леонид С.Сухоруков)
Шаг за шагом урок научит вас как сделать яркую страничку для бизнеса.



Давайте начнем работу с создания нового файла (File>New) 766 x750 px, 72 dpi.

Затем выберем Rectangle Tool (U) для создания фона.
Щелкнув на слое на панели слоев,выберем следующие параметры.
Blending Options>Gradient Overlay



Параметры градиента:

вот так


Далее,используя все тот же инструмент,делаем центральную панель страницы.Белого цвета.

Берем Rounded Rectangle Tool (U) радиуса 2 px чтоб сделать кнопку меню, расположенной в заголовке сайта.





Параметры слоя
Blending Options>Gradient Overlay


Параметры градиента


Вот что у нас выходит..




И снова с помощью Rounded Rectangle Tool (U) радиусом 2 px чтобы сделать блик на кнопке белого цвета.


Параметры слоя Fill 17%


Комбинируем в группу все слои с кнопочками меню веб сайта (нажмите Ctrl для того,чтобы отметить нужные слои и,удерживая нажатой левую кнопку мыши, перенесите отмеченные слои на "Create a new group selection").
Сделайте пять копий новой группы и,выбрав Free Transform,разместите копии,как показано ниже. Изменим параметры кнопок...


Измененные параметры кнопки. Первый слой.
Blending Options>Gradient Overlay


Параметры градиента.


Параметры блика: Fill 49%
Blending mode-Color Dodge
Blending Options>Gradient Overlay


Параметры градиента.


Напишите названия кнопок




Далее рисуем лого для нашего сайта.Для начала возьмем Rectangle Tool (U) для основных элементо цвета #00E5E1,нажмем Alt для того,чтобы тем же инструментом стереть ненужное.




Вторая часть нашего логотипа. Нам нужно сделать полоску и с помощью Free Transform поворачиваем ее как надо.. Жмем Alt чтобы удалить ненужные элементы и не забудьте,что цвет все тот же.


Поместите надпись,содержащую имя сайта,как внизу показано.




Время нарисовать баннер. Берем Rounded Rectangle Tool (U) радиуса 10 px.


параметры слоя.
Blending Options>Gradient Overlay


параметры градиента


Blending Options>Stroke




Теперь нарисуем небольшой блик белого цвета на баннере, выбрав Ellipse Tool (U) и поставим ему Fill 11%


Далее выбираем Line Tool (U) (1 pt) белого цвета чтоб нарисовать перекрещивающиеся линии (нажав SHIFT).




Fill 20%
Blending mode-Soft Light


Берем Custom Shape Tool (U) и выбираем звездочку из таблицы


Blending Options>Drop Shadow


Blending Options>Gradient Overlay


Параметры градиента


Blending Options>Stroke


вот так:


пишем слоган на баннере.




пишем заголовок..




пишем остальной текст...


Сейчас с помощью the Rectangle Tool (U) делаем панельку входа..



Blending Options>Gradient Overlay


параметры градиента


Blending Options>Stroke




Делаем две копии последнего слоя и,выбрав Free Transformменяем размер копий,располагая их как показано ниже:


Создаем окошки информации,выбрав Rectangle Tool (U) радиусом 4 px белого цвета


Blending Options>Stroke




Делаем копию последнего слоя и выбираем снова Free Transform чтобы расположить копию как показано на следующей картинке:


Потом нам нужно нарисовать кнопочку с помощью Rounded Rectangle Tool (U) радиус 5 px.


Blending Options>Gradient Overlay


параметры градиента


Blending Options>Stroke




Копию делаем слоя с кнопкой и выбираем Free Transform чтоб расположить так как показано ниже:


Берем Custom Shape Tool (U) и рисуем другую маленькую звездочку.


Blending Options>Drop Shadow


Blending Options>Gradient Overlay


Параметры градиента


Blending Options>Stroke


Параметры градиента




Копируем последний слой и выбираем Delete Anchior Point Tool чтобы стереть ненужное . Convert Point Tool поможет вам корректировать элементы фигуры.. также нам нужно поменять параметры слоя-копии:


Blending Options>Gradient Overlay


параметры градиента




Сольем все слои со звездочками в один(нажмем Ctrl чтоб отметить нужные слои и CTRL+E чтобы сдить их ). Применим Add a Mask (внизу панели слоев) и берем Brush Tool (B )черного цвета чтобы стереть участки,выходящие за границы.




на этой панели напишем ....


Последняя стадия включает в себя написание копирайта


Тадааам !!! Веб сайт закончен!!

Полный размер тут


Автор: AdobeTutorialz
Перевод: Immortal Lintu
Источник

@темы: Web-дизайн, Уроки

URL
Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Сундук WEB-дизайнера

главная