Оригинальный сайт для художника - Дизайн сайтов - Дизайн - Уроки

Главная » Статьи » Дизайн » Дизайн сайтов

Оригинальный сайт для художника

В уроке использованы материалы: - орнамент; - текстуры. Шаг 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 - Создание колонтитула Чтобы создать нижний колонтитул, используем те же методы, которые были использованы для создания верхней области. Берём текстуры и тот же орнамент. В результате получаем колонтитул: Источник: http://demiart.ru/forum/index.php?showtopic=139574
1 2 3 4 5 Категория: Дизайн сайтов \| Добавил: mixsnt (17.08.2012)
Просмотров: 842 \| Теги: Создание сайта бесплатно, идеи для сайта, дизайн сайта фотошоп, как сделать меню сайта, веб дизайн фотошоп., шапка сайта фотошоп \| Рейтинг: 0.0/0