Мы запустили Форум! (*beta)
сортировать посты по: Рейтингу | Посещаемости | Комментируемые
Подсказка
Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.
*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

1. Создайте новый документ 950х1100 пикселей и залейте фон цветом #f8f8f8. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение в верхней части холста на всю его ширину высотой 120 пикселей. Создайте новый слой (Create New Layer) и залейте его любым.

2. К слою с прямоугольником примените следующие стили в меню Стилей слоя (Layer Style - Blending Options):
Наложение градиента (Режим – Нормальный, Стиль – Зеркальный):
Наложение градиента (Режим – Нормальный, Стиль – Зеркальный):


3. Под нижней обводкой прямоугольника создайте 1-пиксельную белую линию на всю ширину холста. Используйте инструмент Линия (Line Tool) или сочетание инструментов выделения и заливки.

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

5. Примените к нему такие стили:
Наложение градиента (Режим – Нормальный, Стиль – Линейный):
Наложение градиента (Режим – Нормальный, Стиль – Линейный):



6. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте ещё одно выделение под предыдущим прямоугольником. Высота прямоугольника должна быть 65 пикселей, а ширина равна ширине холста. К слою с этим прямоугольником примените стиль Наложение градиента (Layer Style - Gradient Overlay):


7. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 15 пикселей создайте прямоугольник в любом месте на холсте.

8. Сделайте копию прямоугольника и скройте её. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение поверх закруглённого прямоугольника и залейте его тем же цветом на том же слое.


10. Сделайте выделение копии (Ctrl+Click) и на слое с длинным прямоугольником нажмите Delete. Затем снова скройте копию.

11. Проделайте то же самое для другой стороны. Примените следующие стили для этой фигуры:
Отбрасывание тени (Режим – Умножение):
Отбрасывание тени (Режим – Умножение):




13. Сделайте несколько копий этой фигуры и расположите их правее. Измените их цвет и удалите стиль Отбрасывание тени.

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


16. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте чёрную полоску под первой фигурой, как показано ниже:





21. Заголовок у меня состоит из слов “shop” и “smart”. К первому слою я применил такие стили:
Отбрасывание тени (Режим – Умножение):
Отбрасывание тени (Режим – Умножение):

Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):




22. К слову “shop” примените те же стили слоя, но измените настройки стиля Наложение градиента (Режим – Нормальный, Стиль – Линейный):




24. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте область контента и примените тёмно-серую обводку.


26. В нижней части добавьте 1-пиксельную линии того же цвета, что и обводка прямоугольника:

27. Внутри прямоугольника напишите категории и добавьте между ними разделители. Цвет разделителей того же цвета, что и обводка.





Перевод: Глеб Хегай
Ссылка на источник урока
Создан: 24 марта 2010
написал : Oika_63
Текст описания не соответствует картинкам. Ну и ... в начале всё так хорошо описано, а в конце ОЧЕНЬ кратко. :)
---------------11 ноября 2011 19:01 | ICQ: -- | [цитировать]
написал : Глеб
Oika_63
В каких шагах текст не соответствует картинкам?
Предполагается, что в конце Вы сами сориентируетесь и поймёте, что нужно сделать, основываясь на хорошо описанном в начале урока. процесс повторяется ведь.
---------------В каких шагах текст не соответствует картинкам?
Предполагается, что в конце Вы сами сориентируетесь и поймёте, что нужно сделать, основываясь на хорошо описанном в начале урока. процесс повторяется ведь.
12 ноября 2011 01:03 | ICQ: -- | [цитировать]
написал : Oika_63
Я сейчас уже не вспомню какие именно "неточности" и где, но начиная с 5-го точно пошли не соответствия текста, картинок и подписей к ним.
---------------14 ноября 2011 02:41 | ICQ: -- | [цитировать]
написал : Глеб
Oika_63
Текст урока был немного исправлен. Можете попробовать ещё раз.
Благодарим за указанные ошибки.
---------------Текст урока был немного исправлен. Можете попробовать ещё раз.
Благодарим за указанные ошибки.
14 ноября 2011 06:53 | ICQ: -- | [цитировать]
написал : Oika_63
Отлично!!! Вот теперь всё ИДЕАЛЬНО и ПОНЯТНО!!! :) Спасибо.
P.S.: Хотя я уже давно его сделала ... ;) ... но другим пользователям теперь не придётся напрягать свои познания PhotoshopА.
---------------P.S.: Хотя я уже давно его сделала ... ;) ... но другим пользователям теперь не придётся напрягать свои познания PhotoshopА.
14 ноября 2011 18:36 | ICQ: -- | [цитировать]
написал : Глеб
15 ноября 2011 05:09 | ICQ: -- | [цитировать]


+1
