Сегодня мы рассмотрим один из интерфейс - уроков. В нем я покажу вам, как используя простые фигуры можно создать замечательный и оригинальный нешаблонный сайт.
Сложность: низкая
Время: до 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/
Перевод: Артеменко Любовь
(+4 баллов, 4 оценок)
Loading ...
