| Reddy |
Дата: Среда, 20.10.2010, 00:20 | Сообщение # 1 |
|
Новичок
Статус: Offline
|
Шагов: 10
Уровень: Средний
Дополнительные инструменты: Не требуются
01. Фон
1.1 Создаём новый документ необходимых размеров (для данного конкретного примера - 1024х768), с помощью Paint Bucket Tool заливаем фон цветом #1f1f1f. Создаём новый слой, и с помощью Rectangular Marquee Tool делаем выделение шириной 990 пикселей и во всю высоту, затем кликаем правой кнопкой мыши, выбираем Stroke, и делаем рамку (1px, inside, цвет по желанию) - это будет граница нашей рабочей области. Данный слой всегда должен быть сверху, а по окончании работ его нужно скрыть или удалить.
02. Основа для меню сайта
2.1 Отступив от верха на 140 пикселя, с помощью Rounded Rectangle Tool (радиус: 6px) выделяем область размером 988х46 пикселей (цвет заливки неважен):
(показана левая часть данного выделения, увеличение - 400%)
2.2 К данному слою применяем следующие эффекты:
Inner Shadow (цвет: #ffb05b):
Gradient Overlay (цвета градиента #ff6f00 и #ff9700):
Stroke (цвет: #cd5d00):
Результат (показана часть левой стороны):
03. Создание пунктов меню
3.1 С помощью Type Tool (Verdana, Regular, 18px, Sharp) печатаем названия для пунктов меню (цвет букв любой), распределяем их равномерно по всей поверхности основания меню
3.2 Для первого пункта (в данном примере это "Главная") применяем следующие стили:
Color Overlay (цвет: #ffffff):
Stroke (цвет: #000000):
3.3 Для остальных пунктов применяем те же стили, только для Color Overlay ставим цвет: #3f3f3f, а для Stroke - #ffffff.
3.4 Последний штрих при изготовлении меню - нанесение вертикальных разделительных полосы. Для этого создадим новый слой, и при помощи Pencil Tool рисуем полоски на равном расстоянии друг от друга (цвет: #000000). Затем уменьшаем прозрачность слоя до 35%
04. Лого сайта
4.1 В данном пункте очень большое поле для творческой деятельности, но в данном примере мы исходим из того, что лого нашего сайта выполнено при помощи Type Tool, то есть обыкновенным текстом. Отмечу только тот факт, что ширина логотипа не должна превышать 750 пикселей в ширину. Также стоит оставить место по высоте для отражения логотипа
4.2 Теперь дублируем данный текстовый слой (Duplicate Layer), выполняем разворот по вертикали, в режиме маски наносим градиент, и уменьшаем прозрачность до 30% (более подробно об этой процедуре рассказано в этом уроке)
4.3 Над лого можно добавить текущую дату и время. Для этого Type Tool-ом (Verdana, Regular, 11px, None, #ffae00) печатаем их в левом вернем углу.
05. Форма входа для пользователей
5.1 Создаём новый слой, и в правой верхней части инструментом Rounded Rectangle Tool (радиус: 6px) выделяем область размером 198х98 пикселей (цвет заливки любой, отступ от верха - 30 пикселей):
5.2 Добавляем следующие стили:
[i]Inner Shadow (цвет: #575757):
Color Overlay (цвет: #373737):
Stroke (цвет: #3f3f3f):
Получаем готовую основу:
5.3 Далее, при помощи Rectangle Tool делаем основу под поля для ввода логина, пароля, кнопки "Вход" и чек-бокса "Запомнить" (цвет заливки произвольный, но каждое поле должно быть в своём слое)
5.4 Сразу же добавим стили:
Gradient Overlay (цвета градиента #272727 и #373737):
Stroke (цвет: #cd5d00):
Готовые поля:
5.5 Последний штрих для данного блока - нанесение надписей, поэтому Type Tool-ом (Verdana, Regular, 11px, None, #ffffff) печатаем названия полей:
06. Центральный блок
6.1 Создаём два новых слоя. В одном из них при помощи Rounded Rectangle Tool (радиус: 6px) делаем область 703х508 пикселей, в другом - 703х208. Отступ от меню - 11 пикселей:
6.2 Стили для данных слоёв копируем из слоя для основы формы входа для пользователей (см. пункт 5.2)
07. Заголовки блоков
7.1 Выбираем Type Tool (Verdana, Regular, 18px, None, #575757) и печатаем заголовки для блоков (Новости, Календарь, Поиск, и т.п.)
7.2 Далее размещаем под заголовками разделительные линии. Для этого создаём новый слой (желательно для каждой линии свой) рисуем две однопиксельные горизонтальные линии - одна белого цвета, другая - чёрного. Выбираем стиль наложения Soft Light, и уменьшаем прозрачность слоя до 50%
08. Блок новостей
8.1 В "новостном" блоке делаем основу для даты добавления материала - создаём новый слой, и Rounded Rectangle Tool (радиус: 6px) делаем небольшую область (70х19 пикселей):
8.2 Стиль для данного слоя такой же, как и у основания меню (пункт 2.2)
8.3 Добавляем дату - Type Tool (Verdana, Regular, 9px, None, #474747):
8.4 На той же линии, но с правой стороны так же делаем выделение 44х19 пикселей. Это поле будет использоваться для показа количества комментариев.
8.5 Добавляем стили:
Inner Shadow (цвет: #a0ff5b):
Gradient Overlay (цвета градиента #48aa00 и #67f300):
Stroke (цвет: #57cd00):
В результате должно получиться готовая основа:
8.6 Добавляем иконку для комментариев - при помощи Pencil Tool рисуем простейший прямоугольник с линиями, имитирующими текст, а так же добавляем количество комментариев Type Tool (Verdana, Regular, 9px, None, #474747):
8.7 Справа от даты располагаем название новости - Type Tool (Verdana, Bold, 12px, None, #afafaf):
8.8 Под заголовком новости, с левого края добавляем картинку для новости размером 120х90 пикселей, и добавим к ней стиль Outer Glow (цвет #ffffff):
Данный эффект добавит к изображению белую рамку
8.9 Для отображения текста новости копируем любой текст (Verdana, Bold, 11px, None, #ffffff):
8.10 Добавляем надпись "Читать дальше »" Type Tool (Verdana, Normal, 11px, None, #ff7f00):
8.11 Выбираем все слой (включая текстовые), что были созданы в пунктах 8.1-8.10, и дублируем их два раза. С помощью Move Tool сдвигаем их вниз таким образом, чтобы получилась вторая и третья новости. Под ними добавляем переключатель страниц Type Tool (Verdana, Normal, 11px, None, первый знак - #ff7f00, остальное - #dfdfdf):
09. Правый блок
9.1 Добавляем календарь. Чтобы не рисовать его самими, можно взять картинку ниже, и вставить в свой макет
9.2 Над календарём добавляем название месяца и навигационные стрелки, например "« Октябрь »". Для этого используем
Type Tool (Verdana, Normal, 9px, None, #cfcfcf):
9.3 Теперь добавим поле и кнопку для поиска. При помощи Rectangle Tool создаём два поля (каждый в своём слое!) - одно 134х20, другое 53х19 пикселей.
9.4 Копируем стили из пункта 5.4 для обоих слоёв. Добавляем надпись на кнопке Type Tool (Verdana, Normal, 11px, None, #ffffff):
10. Низ сайта
10.1 Дублируем основу меню (п.п. 2.1-2.2), и сдвигаем в самый низ. Type Tool (Verdana, Normal, 11px, None, #474747) пишем год и название нашего проекта (располагается по центру).
вуаля, шаблон готов. В итоге у Вас должно получиться что-то такое (а может и лучше  ):
|
|
спец по кнопачкам
|
|
|
|
|
| Reddy |
Дата: Воскресенье, 24.10.2010, 01:42 | Сообщение # 2 |
|
Новичок
Статус: Offline
|
Если долго мучатся - что-нибудь получится  |
|
спец по кнопачкам
|
|
|
|
|
