Уроки » Шаблоны → Клановый шаблон  

Шаг первый: Новый холст

Создайте новый документ с размерами 900x800px. Залейте фон цветом #363636

Шаг второй: Тело документа

Включите обображение линеек (View > Rulers), линии линеек должны быть по пикселам (если это не так идите в настройки и установите Edit > Preferences > Units and Rulers и поставьте в меню Rulers: pixels)

Теперь вытащите вспомогательную линию (просто наведите курсор на линейку и зажав кнопку мыши тащите линию) слева.
Расположите линии по 50 пикселей от краев, повторите снизу и сверху. Вы должны получить блок подобно этому.



Теперь выберите инструмент Rectangle Tool :rectangl: и нарисуйте квадрат заполняющий внутреннюю часть документа, цвет #252525, в вернем меню выберите Layer > Rasterize > Shape

Теперь выберите Magic Wand Tool и щелкните по этому квадрату, в меню выберите Select > Modify > Contract > 10px
Вырежьте (CTRL+X) выделенную область, и снова вставьте (CTRL+V)

Теперь выберите слой с именем Shape 1 и примените к нему следующие стили слоя (Blending Options)





В результате этих манипуляций, вы получите что-то подобное



Теперь выберите предыдущий слой (на нем тот квадрат что мы вставили), возьмите Magic Wand Tool :magic_wa: и щелкните по квадрату, снова идем Select > Modify > Contract > 10px и опять вырезаем и вставляем выделенный участок.

Выберите слой из которого сейчас вырезали и примените к нему стили слоя.





Теперь мы получим вот это.



Шаг третий: Создание заголовка

Сверните окно в котором мы сейчас работали и создайте новый документ с размерами 760x160px
Создайте новый слой и залейте его цветом #6D0303. В этом шаге вы можете проявить свои навыки, вставьте баннер, добавьте название вашего клана. После завершения перенесите изображение в наш шаблон.

Чтобы вам было от чего оттолкнуться при создании заголовка я создал вот это.



Ваш шаблон должен выглядеть примерно вот так.



Шаг четвертый: Создание панели навигации

Создайте новый документ с размерами 760x32px. Создайте новый слой и залейте его цветом #790000, добавьте следующие стили слоя (удостоверьтесь что цвет переднего плана #790000 а заднего #000000)



Теперь возьмите инструмент Rectangle Tool :rectangl: и нарисуйте прямоугольник по верхней части наполовину рисунка. Цвет #790000, понизьте непрозрачность (opacity) до 55%



Затем, сделайте очень тонкий прямоугольник снизу используя те же самые параметры.



Теперь разделите полосу на части по 125px в ширину, используйте вспомогательные линии линейки.



Теперь выберите инструмент Line Tool :line0000: с цветом #000000 и нарисуйте линию вдоль вспомогательной линии, затем примените стили слоя



Продублируйте слой 4 раза и расставьте линии по вспомогательным. Удостоверьтесь что слои с линиями расположены ниже слоя с тонким прямоугольником (тот что внизу).



Добавьте текст ссылок, и перенесите панель в ваш шаблон. Установите панель под заголовком.



Изображение полного размера

Информация к уроку:

Категория - Уроки » Шаблоны

Дата публикации: 29-08-2010, 18:41

Опубликовал: killot

Просмотров: 559

Комментариев: 0

Ссылки к этой статье:

Источник - The Design World

Автор - Instinct

Переводчик - Killot

Найти - Все уроки с The Design World

Еще по этой теме:

Шаблон «Гранж» часть 2 Шаблон «Гранж» часть 2
Продолжение к уроку Шаблон «Гранж». В этом уроке ...
Простой шаблон Простой шаблон
В этом уроке мы создадим простой, но полноценный ...
Шаблон Шаблон "Blue-Gray" - Заголовок
Продолжаем создавать наш шаблон "Blue-Gray" В ...
Шаблон Шаблон "Blue-Gray" - Панель навигации
Продолжаем создавать наш шаблон, теперь создадим ...
Шаблон Шаблон "Blue-Gray" - Нижний колонтитул
Продолжаем создавать наш шаблон "Blue-Gray" В ...
Чистый блок меню Чистый блок меню
Сейчас мы создадим чистый блок меню для сайта. ...
Создаем шаблон простого сайта Создаем шаблон простого сайта
Если вы впервые начали рисовать шаблон для ...
Создаем панель навигации e-card Создаем панель навигации e-card
Создаем панель навигации в девчачьем стиле ...
Шаблон - Modern Шаблон - Modern
В этом туториале я покажу как создать современный ...
Шаблон - Рождественская   тема Шаблон - Рождественская тема
Создаем симпатичный новогодний (рождественский) ...

Социальные закладки:


Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 

Добавление комментария

 
 
Ваше Имя:
Ваш E-Mail:
Вопрос:
Ты робот? (да-нет)
Ответ:*
Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Введите код: