Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Разрабатываем дизайн для шаблона сайта в Фотошоп
Adobe Photoshop » Уроки 08 декабря 2010 DeNRiXПечать


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

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

Начнем наш урок с создания нового документа размером 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 изображение голубого цвета.
Разрабатываем дизайн для шаблона сайта в Фотошоп

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

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


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (2)

#1 написал: DeNRiX | 8 декабря 2010 19:04
     

получилось, урок не сложный т.к всё детально рассуждается, но длинный, делал 25 минут
#2 написал: naikon | 8 декабря 2010 22:02
     

DeNRiX,
Вот это молодец)
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.