Рубрика: Photoshop Уроки | Урок прочитали: 1934
 (голосов: 0)

Разрабатываем дизайн для шаблона сайта в Фотошоп

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

Финальный результат:

Начнем наш урок с создания нового документа размером 960 x 900 пикселей. Я установил цвет переднего плана  #141414, затем, взяв инструмент Paint Bucket Tool (Заливка), кликнул один раз по изображению.
Я взял инструмент Brush Tool (Кисть), и, выбрав мягкую круглую кисть, нарисовал на новом слое три большие точки на изображении, используя следующие цвета: #a864a8, #ed1c24, #662d91.

Обратите внимание, что размер кисти нужно взять 600 пикселей.

Затем выберите в меню фильтр Filter > Noise > Add noise (Фильтр-Шум-Добавить шум).

Я использовал следующие параметры:

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

Затем выберите Filter > Blur > Motion Blur (Фильтр-Размытие-Размытие в движении).

В окне настроек фильтра устанавливаем угол 90 градусов, смещение 998 пикселей.

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

Создайте новый слой (можно нажать для этого CTRL+SHIFT+ALT+N).

Снова возьмите инструмент Brush Tool (Кисть), установите белый цвет переднего плана. Я снова выбрал мягкую круглую кисть большого диаметра.

Затем этой кистью нарисуйте большое пятно на изображении.

Поменяйте режим наложения этого слоя на Overlay (Перекрытие).

Теперь начнем добавлять детали в наш шаблон. Будем создавать панель навигации. Для этого возьмите инструмент Rectangle Tool (Прямоугольник) и нарисуйте фигуру прямоугольника наверху шаблона.

Затем я взял инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами) и установил в параметрах радиус 6 пикселей.

Я включил видимость сетки, потому что хочу сделать точное выравнивание элементов в последующих шагах (для этого выберите в меню View > Show > Grid – Просмотр-Показать-Сетку).

При помощи инструмента Rounded Rectangle Tool (Прямоугольник со скругленными углами) создайте три прямоугольника, как показано ниже.

Теперь для всех созданных слоев с прямоугольниками добавьте следующие стили слоя (поставьте Fill  (Заливка) 10% и установите указанные параметры на вкладках Bevel and Emboss (Тиснение) и Stroke (Обводка)):

У вас получится такой результат.

(кликните для увеличения)

Я нарисовал еще фигуры прямоугольников также с помощью инструмента Rounded Rectangle Tool (Прямоугольник со скругленными углами).

Для этих прямоугольников добавьте такие стили слоя (на вкладках Outer Glow (Внешнее свечение), Color Overlay (Наложение цвета) и Stroke (Обводка)).

Вот такой получится результат.

Теперь добавьте нужный вам текст. Используйте для этого инструмент Horizontal Type Tool (Горизонтальный текст). Я написал произвольный текст в качестве образца.

Затем можно добавить некоторое изображение вверху шаблона. Я использовал готовое 3D изображение голубого цвета. О том, как создать это изображение, вы можете узнать в этом уроке.

Примечание. Перевод данного урока на photoshop-master.ru

По бокам от этого изображения я добавил две стрелки, используйте для этого инструмент Custom Shape Tool (Произвольная фигура).

В результате получился такой шаблон сайта.


(Кликните для увеличения )

Автор: grafpedia
Переводчик: Виноградова Елена
Ссылка на источник

           

Похожие файлы и публикации:

Разрабатываем дизайн для шаблона сайта в Фотошоп
Из этого  урока Вы узнаете, как создать стильный макет для корпоративного сайта.
Разрабатываем дизайн для шаблона сайта в Фотошоп
В этом уроке Вы узнаете, как создать стильный музыкальный мини плеер, используя векторные инструменты фотошоп и стили слоя.
Разрабатываем дизайн для шаблона сайта в Фотошоп
Итоговый результат:
Разрабатываем дизайн для шаблона сайта в Фотошоп
В этом Photoshop уроке мы будем учиться создавать баннер с простым, но эффектным дизайном.
Разрабатываем дизайн для шаблона сайта в Фотошоп
В этом интересном и полезном уроке мы будем с «нуля» создавать макет для делового сайта.
Разрабатываем дизайн для шаблона сайта в Фотошоп
Откройте Фотошоп и создайте новый документ  (Ctrl + N). Установите те параметры документа, которые Вы видите на скриншоте и нажмите ОК. Теперь добавьте к документу сетку через меню Просмотр – Показать – Сетка (View > Show > Grid) и включите привязку к ней: Просмотр – Привязать – Сетка (View > Snap To > Grid). Для начала работы нужно проставить сетку через каждые 5 пикселей.
Разрабатываем дизайн для шаблона сайта в Фотошоп
В этом уроке я покажу Вам, как создать дизайн для приложения записной книжки.
Разрабатываем дизайн для шаблона сайта в Фотошоп
В этом уроке вы узнаете, как создать футуристический гранжевый текст с царапинами и неоновым светом. Давайте приступим!
Разрабатываем дизайн для шаблона сайта в Фотошоп
Создайте новый документ в Photoshop (Ctrl+N) размером 800x1024 пикс, режим RGB, разрешение 72 пикс/дюйм. Создайте новый слой (залейте его любым цветом) и кликнете по иконке Add a layer style (Добавить стиль слоя) внизу палитры слоев, выберите Gradient Overlay (Наложение градиента).
Разрабатываем дизайн для шаблона сайта в Фотошоп
В этом уроке мы будем создавать дизайн шаблона для автомобильного сайта в тёмных цветах.
Разрабатываем дизайн для шаблона сайта в Фотошоп
Финальный результат
Разрабатываем дизайн для шаблона сайта в Фотошоп
В этом уроке вы узнаете, как создать элегантный и стильный макет портфолио в Photoshop.
Разрабатываем дизайн для шаблона сайта в Фотошоп
В этом уроке, я покажу Вам, как создать иконку адресной книги с помощью Фотошопа. Давайте начнём!
Разрабатываем дизайн для шаблона сайта в Фотошоп
Начнем с нового документа: размер 760x770 пикселей, цвет фона (черный). Скачайте эту текстуру, а затем откройте ее в Photoshop
Разрабатываем дизайн для шаблона сайта в Фотошоп
Финальное изображение, которое мы будем создавать.
Разрабатываем дизайн для шаблона сайта в Фотошоп
Если вы хотите знать, как сделать выразительные обои, тогда почитайте этот Photoshop урок.
Разрабатываем дизайн для шаблона сайта в Фотошоп
Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом  #838383. Выберите инструмент Rounded tool (Прямоугольник со скругленными краями). Установите следующие настройки:
Разрабатываем дизайн для шаблона сайта в Фотошоп
В этом уроке вы узнаете, как создать чарующий эффект, используя узоры и маски. Давайте начнем!