Вы вошли как Гость Группа "Гости"Приветствую Вас Гость RSS  
Главная


Форма входа
E-mail:
Пароль:

[Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: _1_, Mystikal, Любанечка  
Весенний Форум. Общение на любые темы » Уроки Photoshop и Image Ready » Уроки Photoshop » Создание макета (Эффект jupiter для фона; создание окна, кнопок)
Создание макета
eLineДата: Вторник, 14.04.2009, 00:43 | Сообщение # 1
V.I.P.
Группа: Проверенные
Сообщений: 964
Репутация: 208
Подарки: 14
Статус: Offline
шаг1 | фон
о шаге: данный шаг не обязателен к выполнению. вы может воспользоваться совершенно любым изображением. даже простым градиентом.
в шаге описывается только принцип.

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

действие2 | работа с изображением
- создаём новый слой. заливаем его чёрным цветом. он должен находиться под слоем с изображением.
- выполним действие: Filter -> Blur -> Motion Blur | Angle: 35; Distance: 999px.
- если результат не удовлетворил потребности, повторите предыдущее действие: Ctrl + F.
- я воспользовался фильтром ReDynaMix в режиме Ultra-Contrast с определёнными настройками.
- далее, необходимо добавить яркость и контрастность: Image -> Adjustments -> Brightness/Contrast... | Brightness: +40; Contrast: +100.
- советую выделить некоторые цвета, сделать их ярче: Image -> Adjustments -> Selective Color...

шаг2 | окно
о шаге: в данном шаге мы создадим окно.

действие1 | начало
я создал новый документ необходимого для меня размера, изображение, полученное в первом шаге, объеденил с чёрным фоном и уменьшил до нужных мне размеров.
буду работать с документом 800х600px.

действие2 | стекло
- создайте новый слой под слоем background. залейте его чёрным цветом.
- создайте новый слой над слоем background с нашим фоном. выберите инструмент Rectangular Marquee Tool. сделайте прямоугольное выделение размером 600х400рх. для этого необходимо выбрать режим Fixed Size.
- данное выделение залейте чёрным цветом. назовите слой window. примените следующие настройки слоя:
- разместите прямоугольник по центру. это в принципе важно.
- зажмите клавишу Ctrl и нажмите левой кнопкой мыши на превью-картинке слоя прямоугольника в палитре слоёв. у вас должно получиться прямоугольное выделение.
- не снимая выделения, выберите слой background и нажмите сочетание клавиш Ctrl + J, что должно создать новый слой с прямоугольным куском фона. назовите его window_background и поместите под слой window.
- необходимо выполнить размытие по Гауссу: Filter -> Blur -> Gaussian Blur...
| для слоя backround: Radius: 4-7px // по вкусу:)
| для слоя window: Radius: 50px

шаг3 | кнопки и финиш
о шаге: всё просто. мы сделаем кнопочки с разделителями. подкорректируем фон.

действие1 | основание
- выберите инструмент Rectangular Marquee Tool. сделайте прямоугольное выделение 600х40рх. залейте белым цветом. разместите также, как и слой window - по центру.
- назовите слой buttons. разместите его выше всех. примените следующие настройки слоя:
- разместите их в том месте, где считаете нужным.
- любым удобным способом сделайте горизонтальную линию. разместите её как показано на рисунке. слой назовите horizont_line. разместите выше всех слоёв в палитре.

действие2 | разделитель
- создайте новый слой. назовите его separator1. разместите его выше всех в палитре слоёв.
- создайте выделение размером 1х40рх. залейте белым цветом. примените настройки слоя аналогичные тем, что мы использовали для создания слоя buttons, за одним исключением. параметр Fill Opacity: 100%.
- примените маску слоя. залейте градиентом от чёрного к белому по вертикали. примените настройки слоя:
- продублируйте слой. установите параметр Fill на 50%; Opacity на 80%.

действие3 | коррекция фона
- выберите фон background. примените маску слоя. залейте градиентом от чёрного к белому к чёрному.
- сделайте выделение слоя window. проследуйте путём: Select -> Inverse.
- перейдите на слой window_background. нажмите delete на своей клавиатуре.
- выполните иные действия по вкусу:)

__

окно готово:)
в следующих шагах мы будем делать из данного шаблона небольшую html страничку.
спасибо за внимание:)
автор урока jupiter.sl | s.berezyuk aka line
помощь | Matias
*туториал предназначен для опытных пользователей photoshop


- разработка и создание сайтов!
ЛюбанечкаДата: Вторник, 14.04.2009, 13:28 | Сообщение # 2
...le feu au-dedans...
Группа: Модераторы
Сообщений: 1889
Репутация: 207
Подарки: 53
Статус: Offline
Ну вообщем как то так...

Картинка кликабельна...


Весенний Форум. Общение на любые темы » Уроки Photoshop и Image Ready » Уроки Photoshop » Создание макета (Эффект jupiter для фона; создание окна, кнопок)
  • Страница 1 из 1
  • 1
Поиск:

Сегодня к нам заходили:

Мини-чат:


Аватарочка © 2019