Здравствуйте, хочу представить Вам урок от команды 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 пикселя толщиной.
С левой стороны футера добавьте какие-нибудь ссылки на сайты партнеров, к примеру, а справа - название и слоган Вашего сайта и информацию об авторских правах. Если ссылки делаем в две колонки, то между ними ставим разделители описанным выше способом (как для панели навигации).
Новости 
