воскресенье, 08 февраля 2009
Photo Portfolio Web Page Layout
Рисуем
1) Создаём новый файл (File>New), 766x750px и разрешением 72 dpi.
2) Далее берём Paint Bucket Tool (G) и заливаем цветом #0F1715.
3) Находим в интернете текстуру, похожую на эту:
4) Создадим новый слой. Идём в Edit>Fill, выбираем нашу текстуру, жмём ОК.
На этом же слое добавим маску, которую вы найдёте внизу слоёв (Add Vector Mask).
5) Выбираем BrushTool(В), ставим Opacity на 20%, чёрный цвет, и стираем верхнюю часть.
6)Меняем Blanding mode на Soft Light:
7) Берём Rectangle Tool (U) и рисуем тонкую полосу в нижней части, цвет #0F1715.
8) Тем же инструментом рисуем будущее меню.
9) Применим следующие параметры слоя:
10) Берём Rounded Rectangle Tool (U), с радиусом 10рх и рисуем кнопку меню. Далее зажав Alt и используя Rectangle Tool (U), вырежем ненужные элементы.
Параметры слоя:
11) Выбираем Line Tool (U) (weight 2px), чтобы сделать линию выше группы меню. Цвет белый. Затем тем же инструментом, зажав клавишу Alt, прерываем линию в трёх нужных местах. Все сегменты должны соответсвовать длине предыдущей (зелёной) кнопке.
Параметры слоя:
12) Используя тот же инструмент Line Tool (U), вставляем в рисунок 4 вертикальные линии. Для всех слоёв с линиями (последние четыре) поставим Fill 30%.
13) Напишем названия кнопок со следующими настройками:
Home Page
Параметры слоя:
14) Вставьте также название сайта.
PHOTO
PORTFOLIO
15) Теперь выбираем Rectangle Tool (U), чтобы изобразить слой для размещения фотографий нашего портфеля. Не важно какой цвет вы выберете.
Параметры слоя:
16) Выберите фото и разместите поверх предыдущего слоя.
17) Удерживая клавишу Alt, сделайте щелчок мышью между слоем с фоткой и предпоследним. Фотография разместится ровно в рамках предыдущего слоя.
18)Вставьте необходимые заглавия разделов.
WELCOME, PHOTO 
TO MY PORTFOLIO, CATEGORIES 
19) Сейчас мы представим маленькими прямоугольниками слева каждый раздел. Они должны быть расположены на разных слоях. Используем RectangleTool (U).
Параметры слоёв (пряиоугольников):
20) заполните разделы соответствующим тестом.
Жирный текст :
Обычный текст:
Линки:
21)Заполните следующий раздел соответствующим текстом.
22) используйте тот же метод, с помощью которого мы создали прямоуголнички возле названий разделов. И сделайте белые прямоугольнички рядом с подразделами.
Напишите об авторских правах:
И вот наконец финальный результат!!!
Спасибо за внимание!
Источник
Перевод Trisha.
Оригинал здесь Adobe-Software
@темы:
Уроки,
Web-дизайн