Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:


Дизайн интернет-магазина


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) создайте выделение поверх закруглённого прямоугольника и залейте его тем же цветом на том же слое.


Дизайн интернет-магазина


9. Сделайте видимой копию и залейте её любым цветом. Поместите её рядом с оригиналом:


Дизайн интернет-магазина


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


Дизайн интернет-магазина


11. Проделайте то же самое для другой стороны. Примените следующие стили для этой фигуры:

Отбрасывание тени (Режим – Умножение):


Дизайн интернет-магазина


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


Дизайн интернет-магазина


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Дизайн интернет-магазина


12. Поместите эту фигуру на панель, которую создали:


Дизайн интернет-магазина


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


Дизайн интернет-магазина


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


Дизайн интернет-магазина


15. В нижней части прямоугольника добавьте две 1-пиксельные линии.


Дизайн интернет-магазина


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


Дизайн интернет-магазина


17. Чёрная полоска должна быть шириной на весь холст. Установите Непрозрачность слоя – 2%.


Дизайн интернет-магазина


18. Подпишите вкладки при помощи инструмента Горизонтальный текст (Horizontal Type Tool):


Дизайн интернет-магазина


19. Справа создайте строку поиска:


Дизайн интернет-магазина


20. Теперь добавьте заголовок и слоган сайта. Можете вставить какой-нибудь логотип:


Дизайн интернет-магазина


21. Заголовок у меня состоит из слов “shop” и “smart”. К первому слою я применил такие стили:

Отбрасывание тени (Режим – Умножение):


Дизайн интернет-магазина


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


Дизайн интернет-магазина


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


Дизайн интернет-магазина


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Дизайн интернет-магазина

Дизайн интернет-магазина


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


Дизайн интернет-магазина


И стиля Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Дизайн интернет-магазина

Дизайн интернет-магазина


23. На правой стороне добавьте прямоугольник с иконками и информацией о выбранных товарах:


Дизайн интернет-магазина


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


Дизайн интернет-магазина


25. В верхней части создайте тёмную область, используя слабый градиент:


Дизайн интернет-магазина


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


Дизайн интернет-магазина


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


Дизайн интернет-магазина


28. Таким же образом создайте больше областей и заполните их разным контентом.


Дизайн интернет-магазина


29. В верхней средней части можете вставить какое-нибудь специальное объявление:


Дизайн интернет-магазина


30. Для футера я скопировал шапку сайта и добавил информацию о правах:


Дизайн интернет-магазина


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


Дизайн интернет-магазина


Перевод: Глеб Хегай

Ссылка на источник урока

написал : Oika_63

Текст описания не соответствует картинкам. Ну и ... в начале всё так хорошо описано, а в конце ОЧЕНЬ кратко. :)

---------------


написал : Глеб

Oika_63
В каких шагах текст не соответствует картинкам?
Предполагается, что в конце Вы сами сориентируетесь и поймёте, что нужно сделать, основываясь на хорошо описанном в начале урока. процесс повторяется ведь.

---------------


написал : Oika_63

Я сейчас уже не вспомню какие именно "неточности" и где, но начиная с 5-го точно пошли не соответствия текста, картинок и подписей к ним.

---------------


написал : Глеб

Oika_63
Текст урока был немного исправлен. Можете попробовать ещё раз.
Благодарим за указанные ошибки.

---------------


написал : Oika_63

Отлично!!! Вот теперь всё ИДЕАЛЬНО и ПОНЯТНО!!! :) Спасибо.
P.S.: Хотя я уже давно его сделала ... ;) ... но другим пользователям теперь не придётся напрягать свои познания PhotoshopА.

---------------


написал : Глеб

Oika_63
Рады стараться. Можете выкладывать свои работы у нас на форуме.

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: