Урок Веб дизайна в Фотошопе: нешаблонный макет сайта

Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп

Сегодня мы рассмотрим один из интерфейс - уроков. В нем я покажу вам, как используя простые фигуры можно создать замечательный и оригинальный нешаблонный сайт.

Сложность: низкая Время: до 1 часа

Навыки для «прокачки»: - создание композиции - работа с векторными фигурами в Фотошопе - работа с текстом - работа с режимами наложения Возможно, стилистика сайта напомнит вам автомобильную тему: дорожные знаки, круговые повороты и трассы ) Мы утверждаем, вдохновение следует черпать отсюда! Итак, приступим: Начните с создания нового документа (Ctrl + N) размер 960х900 пикселей, цвет фона #5c7a02. Выберите инструмент Прямоугольник со скругленными углами = Rounded Rectangle Tool и установите радиус угла до 50 пикселей.   С помощью этого инструмента мы создадим фигуру в середине нашего макета, затем переверните ее с помощью CTRL + T, как на картинке ниже. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп   Какие цвета вы выберите, не имеет значения. В уроке использовались различные цвета для каждой фигуры, для того, чтобы показать вам, где сделаны формы.Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп   Теперь будем менять цвет этих фигур на # 3c3427 Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп На верхней части мы добавим еще одну фигуру, но на этот раз будем использовать инструмент Прямоугольник = Rectangle Tool. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Изменим цвет для этой фигуры на # 3c3427, а в правом нижнем углу добавим еще одну фигуру. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Создадим еще 2 фигуры инструментом Прямоугольник со скругленными углами = Rounded Rectangle Tool Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Убедитесь, что вы выбрали оба слоя в палитре слоев, затем нажмите на CTRL + T, поверните фигуры влево. Нужно сделать наши фигуры, как на картинке ниже. На этой зеленой форме у нас будет наш текст. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Создайте новый слой поверх всех слоев, и инструментом Кисть = Brush Tool (большой круглой кистью), добавим несколько пятен. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Изменим режим смешивания этого слоя на Перекрытие = Overlay Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Вот что должно получиться. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Теперь инструментом Горизонтальный текст = Horizontal Type Tool напишем текст. Шрифт Italic. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Теперь добавим несколько изображений. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп В верхней части добавим еще одну округлую форму им в такт. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Далее выберите инструмент Линия = Line Tool , и тонкой линией (1 пиксель) создадим две линии между нашими кнопками текста. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Далее объедините все слои с линиями в один. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Используя инструмент Ластик = Eraser Tool , и мягкую кисть размером от 200 до 300 пикселей, сотрите немного края линии, чтобы сделать их тоньше. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Теперь выполните эти действия в левой части. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Той же техникой, что и выше добавим еще несколько строк, и на другие части макета. Затем измените режим наложения для этого слоя на Перекрытие = Overlay. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Создадим новый слой под нашими круглыми изображениями. Активируйте инструмент Кисть = Brush Tool , и круглой мягкой кистью, сделаем точки в следующих местах. Установите цвет переднего плана черный. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Выберите инструмент Прямоугольная область = Rectangular Marquee Toll и создайте выделение, как на картинке ниже. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Ваше выделение должно быть прямо между горизонтальными линиями, которые вы разместили несколько шагов назад. Теперь убедитесь, что у вас выбран слой (с черным рисунком кисти), и теперь нажмите на CTRL + I, или перейдите Изображение-> Корректировки-> Инвертировать = Image-> Adjustments-> Invert. Ваш макет должен выглядеть, как на картинке ниже. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Нажмите CTRL + D, если ваше выделение по-прежнему активно, и теперь измените, режим наложения для этого слоя на Перекрытие = Overlay, и также можете снизить значение Непрозрачности = Opacity до 40%. Вот что должно получиться. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп Теперь добавим несколько круглых кнопок.Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошопВ середине нашего макета добавим также круглую форму. Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошопВот наш конечный результат! Урок Веб дизайна в Фотошопе: нешаблонный макет сайта - уроки фотошоп   Экспериментируйте с изображениями, и читайте наши уроки по интерфейсу, чтобы научиться делать отличные и неповторимые макеты собственными руками. Удачи! Автор: Razvan Ссылка на источник: http://www.grafpedia.com/ Перевод: Артеменко Любовь

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика