вторник, 19 апреля 2011 г.

Макет студии дизайна «WordPress»

В этом уроке я Вам покажу, как можно создать простой дизайн макета портфолио или тему WordPress.


Я создал новый документ с размерами 760 X 770 px.
Скопируйте следующее изображение на свой компьютер.


Откройте его в Рhotoshop, перейдите в «Редактировать (Edit)»> «Определить узор (Define pattern)». Назовите этот узор «Трава».
Создайте новый слой (нажмите CTRL+SHIFT+ALT+N) и в то же время возьмите инструмент «заливка (Paint bucket tool, установите источник для заполнения области: узор (pattern).


Потом на слое, который мы только что создали, добавьте этот градиент с помощью инструмента «заливка (Paint bucket tool.


Сделайте цвет фона #120c0c  и с помощью «кисти (brush tool рисуйте в нижней части Вашего макета, пока не получите такой результат:


Теперь с помощью закругленного прямоугольника создайте некоторые кнопки. 

Для всех этих форм используйте такой стиль слоя:



Вот результат:

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


Под номерами я использую серый прямоугольник, взяв для этой формы «прямоугольник (rectangle tool.

Инструментом «текст», сделаем несколько минусов.


Я продублирую этот слой с минусами и поверну его на 90 градусов (для поворота слоя сначало надо его выбрать, потом перейти в «Редактировать (Edit)»> «Трансформировать (transform)»>«Поворот на 90 градусов (rotate 90)».

 
Вот мой макет так выглядит до сих пор:

 
В заглавии я размещу иконку самолета


Если у Вас есть Дизайнерский пакет Photoshop (Photoshop Designer's pack), то Вы можете найти там хорошие кисти в папке "banners"  для следующего шага. 


Я хочу добавить что-то на подобие шарфа-шлейфа в конце самолета.


На следующем изображении Вы видите как я разместил шлейф. 


Для создания эффекта более реалистичного я добавлю некоторые линии.


Я выберу «кисть (brush tool с небольшой окружностью и создам несколько точек (я использую тот же цвет, которого тучи. Для этого используйте «Пипетку (Eyedropper tool)»). 
Вот мой результат.

Мой последний шаг – добавление текста на шлейф.
Это мой окончательный результат:


Для лучшего понимания создания этой модели, пожалуйста, скачайте ее, перейдя по ссылке в конце урока на сайте http://www.talk-mania.com/web-layouts/43737-design-studio-layout-wordpress-layout.html.