Оранжевый сайт для дизайн-студии

[web-design]

Website Design Studio

Рисуем

1. Создаем новый документ 800x600 пикселей

2. Далее выбираем инструмент Rectangle Tool (U) и рисуем прямоугольник такого же размера как и наш документ.

3. Переходим к свойству нашей фигуры Blending Options>Gradient Overlay и выставляем следующие параметры







4. Далее рисуем линию белого цвета как на рисунке



5. Выбираем инструмент Pen Tool (P) и рисуем несколько треугольников





В параметрах нарисованных нами треугольников выставляем Fill 0%, и переходям к свойствам слоев Blending Options>Gradient Overlay



Свойства градиента



Получаем следующее:



6. Выбираем инструмент Rounded Rectangle Tool (U) и рисуем новую фигуру предварительно выставив радиус в 35 пикселей. Тут будет располагаться основной контент



Далее начнем рисовать панель для меню сайта. Берем Rounded Rectangle Tool (U) и рисуем фигуру с радиусом 30 пикселей в нутрии нашего контента. Далее выбираем инструмент Rectangle Tool (U) и при нажатой клавише ALT рисуем прямоугольника как показано на рисунке.



Переходим в свойства слоя Blending Options>Inner Shadow



Blending Options>Gradient Overlay



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





7. По аналогии с заготовкой к меню сайта мы рисуем нижнее часть (футер).



Переходим в параметры слоя: Fill 0%
Blending Options>Inner Shadow



Blending Options>Color Overlay





8. Далее мы нарисуем панельку для ленты новостей. Для этого мы опять возьмем Rounded Rectangle Tool (U) с радиусом 35 пикселей и рисуем в левой части контента прямоугольник светло серого цвети (#F6F6F6). Далее при нажатой клавише ALT, внутри нашего новосново прямоугольника мы рисуем 2 прямоугольника и получаем



9. Теперь на нашей панели для меню мы нанесем несколько декоративных линий. С помощью Rectangle Tool (U) рисуем небольшой прямоугольнику белого цвета. Затем его нужно немного наклонить (CTRL+T)





Далее клонируем наш прямоугольник несколько раз и равномерно распределим копии по все длине панели:



Затем небольшой совет, растеризуйте все наши клонированные прямоугольники и объедините их в один слой (CTRL+E). После этого выставляем прозрачность слоя Fill 20% и Blending Mode-Overlay



10. Приступим к кнопкам. Возьмем Rounded Rectangle Tool (U) белого цвета с радиусом 20 и рисуем как показано на рисунка



В свойствах слоя выставляем Blending Options>Inner Shadow





Далее рисуем следующую кнопочку, тем же Rounded Rectangle Tool (U) с радиусом 20.

В свойствах слоя выставляем следующие параметры:
Fill 20%
Blending Options>Inner Shadow



Blending Options>Gradient Overlay







Копируем наш последний слой, нажимаем CTRL+T и делаем его немного уже. В свойствах слоя выставляем:
Fill 20%
Blending Options>Inner Shadow



Blending Options>Gradient Overlay







Далее копируем полученную кнопочку несколько раз



11. Берем Rectangle Tool (U) и рисуем вот такую полоску



В свойствах слоя выставляем Blending Options>Drop Shadow



Blending Options>Gradient Overlay







Пишем название:





Blending Options>Drop Shadow





Забиваем текст в кнопочки:
Кнопка с белым фоном "home page"



Остальные кнопки:



И вот что получаем:



Вставим заголовки в основном контенте и новостной колонке:





Далее подготавливаем «РЫБУ» (текст в контенте)





Даты в новостной колонке





Контакты:





В свойствах слоя выставляем:





С помощью инструмента Rounded Rectangle Tool (U) с радиусом 5 пикселей рисуем пару плашек для работ из портфолио.





На место этих плашек вставляем пару картинок для портфолио

Конечный результат:



Желаю удачи

Автор: Adobe Tutorialz
Перевод: Beavis
Источник

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

Comments

[Госпожа Ия-тян]

Здорово! Красиво, лаконично, Понятно Спасибо

[web-design]

Госпожа Ия-тян
Вам спасибо

[Azura Daedra]

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

[.Vozduh]

Azura Daedra, так в любой творческой профессии. ))) Но хороший пример может подкинуть хорошую идею и ускорить процесс.

[Госпожа Ия-тян]

Azura Daedra - если трудно "с листа" придумать дизайн сразу в среде разработки то сначала сделай цветными карандашами наброски на листике бумаги! Мне всегда помогает набросок никто не увидит зато это поможет визуально оценить композицию цветовые сочетания и так далее

[Azura Daedra]

mahini точно
хотя часто, смотря разные примеры, свой может быть уже не "своим", а интерпретированным чужим дизайном. Но хотя почему бы и нет ))

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

[.Vozduh]

Azura Daedra, не обязательно интерпретированным. Просто глаз падает на какую-нибудь штучку и в голове стреляет. Пример как наводка работает. Это то же сто и

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

[Azura Daedra]

mahini ну да... согласна)
по-всякому вобщем то бывает. Но конечно здорово вообще смотреть чужие работы. Учиться у других тоже нужно)))