Создаем дизайн сайта кондитерских изделий 0

Создаем дизайн сайта кондитерских изделий - уроки фотошоп



Наши уроки Web дизайна вдохновляют. Здесь нет сложных приемов, но, безусловно, всегда есть главная Идея, которая и отличает профессионала от начинающего.
Навыки для «прокачки»:
- создание композиции
- создание геометрических форм в Фотошоп
- работа со стилями слоя

Шаг 1. Создайте новый документ размером 760x770. Затем откройте фото, которое будете использовать. Уроки Web дизайна требуют не только фантазии, но и хороших исходников, поэтому, для начала скачайте в интернете нужные изображения и хорошенько продумайте расположение ваших объектов. У нас – это нечто аппетитное и сладкое.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 2. Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool)
создадим форму следующим цветом # b90306. И разместим эту форму в верхней левой части макета.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 3. Добавим стиль слоя Тень (Drop Shadow)

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 4. После этого создадим еще одну фигуру следующим цветом # 9e553a

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 5. Добавим стиль слоя Тень (Drop Shadow) с теми же настройками.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 6. Создадим еще один прямоугольник, как на следующем рисунке. Вы можете посмотреть, как изображение клубники будет выглядеть рядом с этими фигурами.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 7. После этого активируем Прямоугольник (Rectangle Tool)

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 8. И создадим небольшую форму.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 9. Добавим следующие стили слоя:

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 10. После этого перейдем в Редактирование-> Трансформирование-> Деформация (Edit-> Transform-> Warp)

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 11. В меню выберем Другой (Arc)

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Вот наш результат.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 12. После этого будем вращать слой, и поместим форму, как на рисунке ниже.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

С помощью инструмента Эллипс (Ellipse Tool)

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 13. Создадим небольшую форму.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 14. Дублируем этот слой, и инструментом Перемещение (Move tool), переместим ее как на рисунке ниже.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 15. Теперь дублируем последние 3 слоя, и разместим их как на картинке ниже.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 16. Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) создадим простую форму, и на эту форму добавим изображение с шоколадом.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Вот видите, уроки Web дизайна бывают еще и вкусными )))

Шаг 17. Для этой формы добавим стиль слоя Тень (Drop Shadow)

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Вот наш результат.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 18. Далее Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) создадим еще одну небольшую форму белым цветом.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 19. Затем инструментом Эллипс (Ellipse Tool) создадим кнопку поиска. Вы можете посмотреть на следующем изображении, как сделан этот эллипс.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 20. Следующим шагом будет создание стрелки, с помощью фигур. Вы можете скачать несколько фигур

Здесь


Активируем инструмент Произвольная фигура (Custom Shape Tool)

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 21. И сделаем следующую фигуру.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Шаг 22. И поставим эту маленькую стрелку справа сверху черного эллипса.

Шаг 23. В следующем шаге мы добавим текст Инструментом Текст (Type Tool), и несколько изображений из вашей коллекции.

Создаем дизайн сайта кондитерских изделий - уроки фотошоп

Вот и все, наш макет готов! Всего наилучшего!

Сайт: designlessons.ru

Виджет на Яндексе: yandex.ru/?add=111794

Мы ВКонтакте: vk.com/designlessons

И в Твиттере: twitter.com/DesignLessons

Информация
Автор / Разработчик
Автор не указан
Перевел
Артеменко Люба
Сложность
Средняя
Источник
Добавил
Lubashka
Дата
21-08-2019, 18:06
Метки:  еще статьи

Поделиться ссылкой

Прямая ссылка:
BB-code ссылка:
HTML ссылка:

Комментарии (0)

Имя
Эл. почта
Комментарий
Вопрос: 6 + 0 =

Для активации данной функции необходимо зарегистрироваться и авторизоваться на сайте.

Ваш IP: 204.236.235.245
Последние уроки
Вконтакте
Архив сайта
.