Уроки Фотошопа на русском

Темы уроков Фотошопа

  • главная
  • спецэффекты
  • спецэффекты с текстом
  • обработка фото
  • анимация
  • компьютерная графика
  • коллажирование
  • дизайн
  • faq

Уроки по сложности

  • Низкая
  • Средняя
  • Высокая
  • Теория

Дополнительно

  • фотошоп онлайн
  1. Уроки Фотошопа
  2. › Уроки по созданию дизайна
  3. › Рисуем макет сайта для портфолио дизайнера

Рисуем макет сайта для портфолио дизайнера используя Фотошоп

В данном уроке Фотошопа мы рассмотрим как можно нарисовать стильный макет сайта для портфолио дизайнера.

Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Категория: Уроки по созданию дизайна

Сложность: Средняя

Дата: 08.08.2009

Обновлено: 17.03.2012

В данном уроке Фотошопа мы рассмотрим как можно нарисовать стильный макет сайта для портфолио дизайнера.


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

Изображение 1. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Приступаем к уроку Фотошопа


Создайте новый файл (File > New (Файл > Новый / Сочетание клавиш 'Ctrl+N')), размером 766*699 px и 72 dpi.

Инструментом Rectangle Tool Инструмент - Прямоугольник (Инструмент 'Прямоугольник' / Клавиша 'U' ), делаем выделение, как на рисунке: ↓


Изображение 3. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Применяем следующие параметры: (Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента)): ↓


Gradient Overlay (Наложение градиента): ↓

Изображение 4. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Параметры градиента: ↓

Изображение 5. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Результат: ↓

Изображение 6. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Создайте новый документ 4*4 px и 72 dpi (File > New (Файл > Новый / Сочетание клавиш 'Ctrl+N')). Выберите инструмент Карандаш (Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша 'B')), основной цвет - белый. Создаем изображение, как на рисунке ниже, после чего Edit > Define Pattern (Редактирование > Определить узор). ↓


Изображение 8. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 9. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Вверху страницы, рисуем инструментом - Rectangle Tool Инструмент - Прямоугольник (Инструмент 'Прямоугольник' / Клавиша 'U' ), полосу: ↓


Изображение 11. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 12. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Параметры слоя: Fill (Заливка) 0%, Blending Options (Параметры наложения) - Pattern Overlay (Перекрытие узора): ↓


Pattern Overlay (Перекрытие узора): ↓

Изображение 13. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Результат: ↓

Изображение 14. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Выше нарисованной полосы, инструментом - Rectangle Tool Инструмент - Прямоугольник (Инструмент 'Прямоугольник' / Клавиша 'U' ), рисуем полосу и окрашиваем цветом - #BBDD03 (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша 'G')): ↓


Изображение 17. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 18. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Создаем копию полосы (белые точки), используя - Free Transform (Свободное трансформирование / Сочетание клавиш 'Ctrl + T' / Вызов через меню: 'Edit > Free Transform' (Редактирование > Свободная трансформация)) переверните копию полосы в основание фона: ↓


Изображение 19. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Создайте новый документ 4*4 px и 72 dpi (File > New (Файл > Новый / Сочетание клавиш 'Ctrl+N')). Выберите инструмент Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша 'B'), основной цвет - #729C06. Создаем изображение, как на рисунке, после чего Edit > Define Pattern (Редактирование > Определить узор).


Изображение 21. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 22. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Ниже нарисованной полосы, инструментом - Rectangle Tool Инструмент - Прямоугольник (Инструмент 'Прямоугольник' / Клавиша 'U' ), рисуем полосу: ↓


Изображение 24. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 25. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Параметры слоя: Fill (Заливка) 0%, Blending Options (Параметры наложения) - Pattern Overlay (Перекрытие узора): ↓


Pattern Overlay (Перекрытие узора): ↓

Изображение 26. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Результат: ↓

Изображение 27. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Инструментом Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша 'P'), рисуем украшения фона, цвет - #AAD500: ↓


Изображение 29. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Другой рисунок, цвет - #AAD700. ↓


Изображение 30. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Цвет - #AECD01. ↓


Изображение 31. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 32. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Создайте новый документ 4*4 px и 72 dpi. Выберите инструмент Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша 'B'), основной цвет - #E3E3E3. Создаем изображение, как на рисунке, после чего Edit > Define Pattern (Редактирование > Определить узор).


Изображение 34. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Инструментом Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент 'Прямоугольник со скругленными углами' / Клавиша 'U'), рисуем: ↓


Изображение 36. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 37. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Выставляем параметры слоя → Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

Изображение 38. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Blending Options (Параметры наложения) > Pattern Overlay (Перекрытие узора): ↓


Blending Options (Параметры наложения): ↓

Изображение 39. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Результат: ↓

Изображение 40. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Сделайте две копии последнего сделанного слоя (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш 'Ctrl+J')) и разместите их (Move Tool Инструмент - Перемещение (Перемещение / Клавиша 'V')), как показано на рисунке: ↓


Изображение 42. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Вставьте картинки: ↓


Изображение 43. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Используя Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент 'Прямоугольник со скругленными углами' / Клавиша 'U'), цвет - #EBEBEB, со сл. настройками: ↓


Изображение 45. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Создаем подобную форму: ↓


Изображение 46. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Копируем последний слой, свободная трансформация (Free Transform (Свободное трансформирование / Сочетание клавиш 'Ctrl + T' / Вызов через меню: 'Edit > Free Transform' (Редактирование > Свободная трансформация))), уменьшаем размер, цвет - #49BD14.


Изображение 47. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Переходим в параметры слоя → Blending Options (Параметры наложения) > Stroke (Обводка): ↓


Stroke (Обводка): ↓

Изображение 48. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Результат: ↓

Изображение 49. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Инструментом - Rectangle Tool Инструмент - Прямоугольник (Инструмент 'Прямоугольник' / Клавиша 'U' ) делаем выделение, как на рисунке: ↓


Изображение 51. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Зажав Alt нажимаем мышкой между двумя последними слоями. Fill (Заливка) 50%.


Изображение 52. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 53. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Для заключительного результата, мы объединяем слои с иконками, и копируем их 2 раза. После чего перемещаем иконки на 2 оставшиеся картинке, после чего меняем их цвета. Первая копия - #ED9300; вторая копия - #5EA9D1. Blending Options (Параметры наложения) > Stroke (Обводка), как показано выше.


Изображение 54. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Пишем номера в иконки, после чего Free Transform (Свободное трансформирование / Сочетание клавиш 'Ctrl + T' / Вызов через меню: 'Edit > Free Transform' (Редактирование > Свободная трансформация)), поворачиваем их: ↓


Изображение 55. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 56. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Переходим в параметры слоя → Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

Изображение 57. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Результат: ↓

Изображение 58. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Напишите название сайта → Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент 'Горизонтальный текст' / Клавиша 'T'): ↓


Настройки текста: ↓

Изображение 60. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 61. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Переходим в параметры слоя → Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

Изображение 62. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 63. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Создаем новый слой (New Layer (Новый слой / Сочетание клавиш 'Ctrl+Shift+N')). Точки, цвет - #D7FF00:


Изображение 64. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Создайте таблицы, и подпишите карточки → Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент 'Горизонтальный текст' / Клавиша 'T'): ↓


Настройки текста: ↓

Изображение 66. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

About us, О нас: ↓


Настройки текста: ↓

Изображение 67. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 68. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Создаем меню: ↓


Настройки текста: ↓

Изображение 69. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 70. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Берем инструмент Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша 'B'), рисуем точки: ↓


Изображение 72. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 73. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Копируем слой с разделительной полосой: ↓


Изображение 74. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Полосы должны иметь следующие настройки. Blending Options (Параметры наложения) > Outer Glow (Внешнее свечение): ↓


Outer Glow (Внешнее свечение): ↓

Изображение 75. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 76. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент 'Прямоугольник со скругленными углами' / Клавиша 'U'), настройки: ↓


Изображение 78. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 79. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

Изображение 80. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 81. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Копия слоя. Инструментом свободная трансформация, уменьшаем, цвет - #6DD800.


Изображение 82. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Blending Options (Параметры наложения) > Stroke (Обводка): ↓


Stroke (Обводка): ↓

Изображение 83. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Rectangle Tool Инструмент - Прямоугольник (Инструмент 'Прямоугольник' / Клавиша 'U' ), рисуем как на рисунке, цвет - #A9DB7C.


Изображение 85. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Удерживая ALT, жмем мышкой между последними слоями: ↓


Изображение 86. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 87. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Тоже самое делаем, для двух остальных картинок. Меняем только цвет: вторая кнопка #F6C073; третья - #89B4C7 (Blending Options (Параметры наложения) > Stroke (Обводка) как выше): ↓


Изображение 88. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Пишем название кнопок: ↓


Настройки текста: ↓

Изображение 89. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 90. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

Изображение 91. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 92. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Rectangle Tool Инструмент - Прямоугольник (Инструмент 'Прямоугольник' / Клавиша 'U' ) рисуем белые квадраты: ↓


Изображение 94. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

Изображение 95. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 96. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Вставляем картинки в квадраты: ↓


Изображение 97. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Rectangle Tool Инструмент - Прямоугольник (Инструмент 'Прямоугольник' / Клавиша 'U' ), рисуем двойную линию, левая сторона должна быть зеленая, правая - белая: ↓


Изображение 99. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Параметры для левой полосы: Fill (Заливка) 0%, Blending Options (Параметры наложения) > Pattern Overlay (Перекрытие узора): ↓


Pattern Overlay (Перекрытие узора): ↓

Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Параметры для правой полосы: Opacity (Непрозрачность) 70%, Fill (Заливка) 0%, Blending Options (Параметры наложения) > Pattern Overlay (Перекрытие узора): ↓


Pattern Overlay (Перекрытие узора): ↓

Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 102. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 103. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Копируем слой с полосой и перемещаем ее на другой край: ↓


Изображение 104. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Напишите необходимый текст (ниже настройки для различных текстов): ↓


Настройки текста: ↓

Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Настройки текста: ↓

Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Настройки текста: ↓

Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 108. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Навигационный текст: ↓

Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Цифровой: ↓

Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 111. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша 'U'), рисуем круг, цвет - #FFD40F.


Изображение 113. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Blending Options (Параметры наложения) > Stroke (Обводка): ↓


Stroke (Обводка): ↓

Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Изображение 116. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Вот и все.


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

Изображение 1. Рисуем макет сайта для портфолио дизайнера используя Фотошоп

Урок подготовлен для Вас командой сайта PhotoshopPro.ru

Уроки Фотошопа на русском
Уроки Фотошопа | PhotoshopPro.ru

Copyright © 2017 PhotoshopPro.ru | Все материалы принадлежат их владельцам.