Кто на сайте?

Экспорт новостей




Rambler's Top100

Главная arrow Новости arrow Уроки Photoshop arrow Дизайн для сайта. Урок
Дизайн для сайта. Урок Версия для печати Отправить на e-mail
Написал Administrator   
Среда, 27 Май 2009
Здравствуйте, хочу представить Вам урок от команды HV-designs в моем вольном пересказе. В этом уроке мы научимся создавать профессиональный дизайн макета сайта. Давайте начнем.

Создайте новый документ 850 х 900 пикселей с черным фоном, на фоновом слое добавим немного шума. Идем Filter > Noise > Add Noise. Используйте настройки, как показано на изображении ниже.

 
 

В левом верхнем углу добавим название и слоган нашего сайта, а справа добавим RSS информацию, значки я использовал из коллекции dryicons.com. Цветовой код для оранжевых надписей #f1a904.


Под нашим заголовком и RSS информацией нарисуем на новом слое прямоугольник для меню навигации, используя инструмент Rectangular Marquee Tool.


Добавим для этого слоя стили, используя настройки с картинок ниже.







Установим для этого слоя непрозрачность 30%. У Вас должно получиться что-то вроде этого:

 

Создадим новый слой над слоем с навигацией и, используя инструмент Rectangular Marquee Tool, создадим выделение как показано на рисунке.


Зальем выделенную область белым цветом и установим непрозрачность слоя 5%. Теперь добавим текст для каждого пункта нашего меню.


Между пунктами меню сделаем разделители в виде двух 1-пиксельных линий разного цвета.


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


Теперь сделаем что-то наподобии маленькой галереи. Допустим, это будет Ваше портфолио. Найдите какую-нибудь картинку, которую не стыдно разместить на главной странице и поместите ее ниже нашей панели навигации. Добавьте слою стиль, как на картинке ниже.




Справа создайте белый прямоугольник на новом слое и установите ему непрозрачность 13%. Это место у нас будет использоваться под небольшие эскизы изображений.


Добавляем эти изображения и распределяем их равномерно по прямоугольнику. Теперь под ними изобразим навигацию по галерее: используя иконки от dryicons.com, добавим стрелки Следующий и Предыдущий.


Для следующего шага нам потребуются диагональные линии. Сохраните изображение, которое Вы видите ниже, откройте его в Photoshop, затем пройдите в меню Edit > Define Pattern и сохраните текстуру для последующего использования.


 

Создайте новый слой и прямоугольное выделение для первой колонки, затем удерживая клавишу Shift, еще одно выделение для второй колонки.

Залейте слой белым цветом, поставьте непрозрачность 5% и примените к слою стиль Pattern Overlay, выбрав из палитры Ваш новый паттерн. С помощью ползунка Scale отрегулируйте масштаб полосок. Должно получиться что-то вроде этого:

 

Вставьте заголовки для каждой колонки в эти прямоугольники. Ниже разместите какой-либо текст.


Теперь осталось сделать футер. Создайте на новом слое белый прямоугольник во всю ширину холста с непрозрачностью 5% и примените к нему стиль Stroke черного цвета 3 пикселя толщиной.


С левой стороны футера добавьте какие-нибудь ссылки на сайты партнеров, к примеру, а справа - название и слоган Вашего сайта и информацию об авторских правах. Если ссылки делаем в две колонки, то между ними ставим разделители описанным выше способом (как для панели навигации).

Вот что должно у Вас получиться в итоге:

  

Успехов!
Оригинал: hv-designs.co.uk
Перевод: www.stilia.ru
Последнее обновление ( Пятница, 29 Май 2009 )
 
 


Добавить комментарий

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