Дизайн сайта для Художника

Дизайн сайта для Художника

В уроке использованы материалы:
- орнамент;
- текстуры.

Шаг 1: Создание документа
Создаём новый документ 1100 на 1450px и заливаем цветом #ede4c7.



Далее берём отсюда текстуру 05.png и поместим в рабочее пространство (File => Place). При помощи трансформации подгоним фотографию под ширину холста (Ctrl+T) .
Для этого выбираем среднюю точку с правой стороны (см. скриншот), и в то время как держим Ctrl+Alt+левую кнопку мыши, перетаскиваем этот угол немного вправо (таким образом, расширяем).



Выбераем Erase Tool  с мягкими краями, размера 150px, начинаем аккуратно стирать края изображения. Получаем:



Далее создадим логотип с помощью Type Tool . Используемые шрифты: для "Trendy" - Avalon Medium, 48px, для "Tuts” – Sylfaen, 36px.




Шаг 2: Создание панели навигации
Используя Rectangle Tool, создаём область 949 на 67px, и применяем стили слоя: 









Затем с помощью Type Tool , добавляем ссылки для навигации: 



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



Начнём добавлять орнамент с левой стороны.



Продолжаем добавлять орнамент из того же набора, по всей длине панели навигации:



Для придания лучшего вида, применим следующие стили слоя: 





И вот результат:



Используем те же орнаменты и стили слоев для нижней части навигации, получаем:



Теперь навигация выглядит хорошо и закончено.

Шаг 3: Создание области, для содержимого сайта
Начинаем с создания рубрики "Featured Area Section". Инструментом Rectangle Tool  создаём область (949 на 266px):



Затем трансформируем её (Edit => Transform => Warp). На верхней панеле инструмента Wrap выбираем Arch и задаём изгиб -10%. 



Нажимаем Enter, получаем



Изменим цвет этой формы на #f5eed7 и применим к слою стили: 



Затем растрируем слой. (Нажав правой кнопкой мыши на слое с фигурой, выбираем Rasterize Layer.)



Сделаем нижнюю часть формы горизонтальной. Для этого выбираем Rectangular Marque Tool  и выделяем прямоугольную область от углов:



Чтобы удалить выделенное жмем Delete на клавиатуре и кнопку Ctrl+D, чтобы снять выделение. 
На левой стороне размещаем текст с помощью Type Tool , а на правой - изображение.



Создаём тень. Для этого выбираем Ellipse Tool  и создаём область будущей тени:



Немного размоем, используя Gaussian Blur (Filter => Blur => Gaussian Blur) и понизим Opacity до 21%. Теперь нужно удалить тень с нашей первоначальной области, делаем выделение Rectangular Marquee Tool .



Жмем Delete на клавиатуре и нажать кнопку Ctrl+D, чтобы снять выделение. Под этим слоем также разместим орнамент:



Выбираем Rectangle Tool  и создаём область, где будет располагаться непосредственно материал сайта. Размер 949 на 597px, заливаем цветом #f5eed7, применяем стили: 







Далее сконцентрируемся на содержимом этой области. Создаём рубрики: размещаем текст "Latest Updates" и создаём область под ним с помощью Rectangle Tool , размером 207 на 176px и цветом #ead7b8. Применяем стили: 







Результат: 



Далее добавляем изображения:



С помощью Rectangle Tool  создаём черную область, понижаем Opacity до 50% и делаем надпись "Click here to see more":



Аналогично создаём остальные области:



С помощью Ellipse Tool  создаём оригинальную нумерацию страниц внизу. Первый круг - цвет #817e7e, два последние - #910b53.
Чуть ниже нумерации создадим ещё одну рубрику "Featured Artist Section". Для её создания используем те же методы, что описаны выше для создания "Featured Area Section". 
Конечный результат для этого раздела:




Шаг 4 - Создание колонтитула 
Чтобы создать нижний колонтитул, используем те же методы, которые были использованы для создания верхней области. Берём текстуры и тот же орнамент. 
В результате получаем колонтитул:



Макет сайта готов!




Источник: trendytuts.com
Перевод: Elu