DIZ-CS.RU - Мы с Вами НАВСЕГДА!
Активный форум » Раздел графики » Уроки фотошопа и вопросы » Урок Разрабатываем дизайн для шаблона сайта в Фотошоп
  • Страница 1 из 2
  • 1
  • 2
  • »
Сообщение # 1
Аватарка Андрей123
DIZ-CS/COM
OFF
Пользователь
Сообщения:180
Награды:478
Отзывы:0
Skype пользователя:
В этом уроке вы узнаете, как совсем несложно можно создать дизайн с прозрачными кнопками для шаблона сайта.

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

Начнем наш урок с создания нового документа размером 960 x 900 пикселей. Я установил цвет переднего плана #141414, затем, взяв инструмент Paint
кликнул один раз по изображению.
Я взял инструмент 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 Горизонтальный текст). Я написал произвольный текст в качестве образца.

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

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

Сообщение # 2
Аватарка -shake-
New Designer
OFF
Пользователь
Сообщения:31
Награды:52
Отзывы:0
Skype пользователя:
Сайт пользователя:
пасибо лови + =)
Сообщение # 3
Аватарка cIIan4
спан4..........
OFF
Пользователь
Сообщения:332
Награды:95
Отзывы:0
Skype пользователя:
Zoider, + Неплохо
Сообщение # 4
Аватарка s1mplewOw
OFF
Пользователь
Сообщения:90
Награды:0
Отзывы:0
Skype пользователя:
Спасибо smile
Сообщение # 5
Аватарка GR1DER
OFF
Пользователь
Сообщения:26
Награды:13
Отзывы:0
Skype пользователя:
Сайт пользователя:
вот что получилось у меня:
http://s15.radikal.ru/i188/1102/33/84983dc888ca.png
Сообщение # 6
Аватарка HacTpoeHue
id104836922
OFF
Премиум
Сообщения:338
Награды:124
Отзывы:0
ВКонтакте пользователя:
Skype пользователя:
Сайт пользователя:
Спасибо... пригодилось!
Сообщение # 7
Аватарка News_Master
OFF
Пользователь
Сообщения:27
Награды:51
Отзывы:0
источник хотяб кинул людям...
норм
Сообщение # 8
Аватарка Nai[s]ek
OFF
Пользователь
Сообщения:553
Награды:238
Отзывы:21
Skype пользователя:
вааау супер спс!
Сообщение # 9
Аватарка Adward
OFF
Пользователь
Сообщения:16
Награды:55
Отзывы:0
Источнин Фотощоп-Мастер .
За урок спасибо. Но он очень старый.
Сообщение # 10
Аватарка MIROSH
OFF
Пользователь
Сообщения:52
Награды:65
Отзывы:0
Skype пользователя:
Сайт пользователя:
Спс!
Сообщение # 11
Аватарка Fest1e
NEXT MODER
OFF
Пользователь
Сообщения:145
Награды:81
Отзывы:0
Skype пользователя:
Quote (Safy)
оч классно, молодец!
Сообщение # 12
Аватарка Flomaster™
OFF
Пользователь
Сообщения:45
Награды:30
Отзывы:0
Skype пользователя:
спасиба, классный макет получается
Сообщение # 13
Аватарка Felli
OFF
Пользователь
Сообщения:1
Награды:0
Отзывы:0
Соглашусь. Действительно супер.
Gur
Сообщение # 14
Аватарка Gur
OFF
Пользователь
Сообщения:5
Награды:0
Отзывы:0
Сайт пользователя:
Макет не впечатлил, можно было и лучше сделать, хороший урок, а источника указать нужно было-б. smile
Сообщение # 15
Аватарка v0siK
OFF
Пользователь
Сообщения:209
Награды:1
Отзывы:0
Хороший урок. спасибо.
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:
Писать на форуме могут только авторизованные пользователи.