Tags: Графика для сайта | Уроки Photoshop | уроки web дизайна | уроки веб дизайна

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

Шаг 1. Сначала создаем новый документ в Photoshop. Я задаю размер документу 760*633 пикселей. Затем заполняю фон цветом  # f2f3ed.

Шаг 2. Создайте новый слой в вашем документе и создайте область для вашей навигации. Размер моей панели меню составляет 720*80 пикселей. Далее можете залить вашу область навигации любым цветом, я использовала # 000000 черный цвет.

Далее к меню применяются следующие стили слоя:

Если вы все сделали верно у вас должно получится вот так:

Используя маленький шрифт создайте несколько кнопок меню в правом верхнем углу над панелью навигации.

Шрифт который используется Tahoma, размер 12 пт, цвет # 5a5d59.

На новом слое нарисуйте инструментом Карандаш белую полоску толщиной в 1пиксель на панели навигации, после чего поменяйте цвет с белого на черный и создайте рядом полоску черного цвета, одинаковую по высоте с предыдущей.

Эта линия будет использоваться в качестве разделителя кнопок панели навигации, которые мы создадим в ближайшее время cialis super active. После этого примените к слою с линией Фильтр> Размытие> Размытие движения, используя следующие параметры:

Вот что должно получится:

И наконец надо изменить режим наложения слоя на Мягкий свет и уменьшить непрозрачность  до 30-60%.

Теперь дублируйте ваш слой с полоской и переносите копии на расстояние примерно 80 пикселей друг от друга, до тех пор, пока ваша панель навигации не заполнится полностью.

Теперь добавляем текст для кнопок:

Шрифт в приведенном изображении используется Helvetica Neue в начертании курсивом и размером 14пт. К тексту применяем следующие стили слоя:

Теперь ваше меню будет выглядеть так:

Аккуратно не правда ли?

Шаг 3. Следующее что мы будем делать - это создавать  логотип для сайта с описанием. Создаем новый слой, затем создаем на нем выделение на верхней панели навигации, размеры моего выделения 200*120 пикселей.

Вы можете заполнить эту область любым цветом на ваш вкус,поскольку в дальнейшем мы все равно будем применять наложение градиента, затем примените для этого прямоугольника следующие стили:

Теперь ваше окно должно выглядеть следующим образом:

Добавим немного глянца в левый верхний угол прямоугольника.

Вы можете создать этот эффект используя несколько простых шагов:
Создайте новый слой, над прямоугольником. Затем стоя на слое с прямоугольником нажмите клавишу Ctr+щелкните левой кнопкой мыши по иконке слоя в палитре слоев, тем самым вызвав выделение слоя.Перейдите на новый слой, не снимая выделения и уменьшите размер выделения в1-2 пикселей пройдя по команде Выделение - Модификация - Сжать, затем используйте наложение градиента от белого к прозрачному.
Используя инструмент перо в режиме контуров, сделайте рельефный скос левого угла, создайте, закройте контур и удалите содержимое
Чтобы добиться мягкости градиента необходимо изменить режим наложения слоя на Мягкий свет либо просто уменьшить непрозрачность слоя.

Далее добавляем текст на наш логотип.

Для текста применяем следующие параметры:

Выглядит хорошо, не так ли?

Шаг 4.Теперь добавим немного графики, под логотипом. Создайте новый слой той же ширины что и ширина панели навигации, только немного больше в высоту, и сделайте отступ от панели навигации в 1 пиксель.

Моя область размером в 720*140 пикселов, заполните его любым цветом, у меня использован # 000000. Далее я добавляю такое изображение, только делаю ему оттенок зеленого цвета.

Перетащите изображение на ваш холст, затем сделайте ему размер того выделения которое вы задали раннее.

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

Затем я добавила туда несколько интересных надписей.

Я использовала шрифт Tahoma, 12 пт, # 000000 и # FFFFFF. И в заключении этого раздела напишите несколько ссылок текста справа от заголовка.

Я использовала шрифт Helvetica Neue и далее применила к тексту следующие параметры:

Шаг 5.Далее мы добавим в боковую панель еще несколько блоков. Для этого создаем новый слой, размер примерно 200*30 пикселей под нашим верхним банером.

Можете использовать любой из раннее выбраных вами цветов для заливки области. Также вы можете копировать стили слоя из панели навигации. Мне пришлось добавить стиль слоя Внутренняя тень.

Создайте другую область под нашим заголовком, заполните область черным цветом и задайте режим наложение Перекрытие.

Добавим текст в эти области, я использовала эту область под блок "Комментарии"

Можно продублировать текстовый слой и добавить разделительную полоску, если это будет необходимо.

Шаг 6. Продублировав слои вы можете сохраняя стиль, изменить  размер и затем создать еще один дополнительный блок.

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

Шаг 7.Наконец можно добавить любые другие детали на ваш вкус . Это был урок по созданию макета сайта , а чтобы узнать как из него сдулать полноценный шаблон для сайта вам необходимо изучить урок по HTML,, чтобы внедрить этот дизайн в Веб.

Надеюсь урок вам понравился, и будет вам очень полезен.

Источник.