Сайт своей дизайн студии

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

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

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

Навыки для "прокачки": - создание структуры сайта - создание шапки сайта - создание элементов интерфейса Создайте новый документ 850 × 900 пикселей, выберите цвет переднего плана # 3e3640 и # 201f20 в качестве фона. Выберите инструмент Gradient tool = Градиент и проведите линейный градиент на холсте. Применим фильтр шума, перейдя в Filter > Noise Add Noise = Добавить шум, введите настройки, как на картинке ниже. Сайт своей дизайн студии - уроки фотошоп Выберите инструмент Rounded Rectangle tool = Прямоугольник со скругленными углами и создайте прямоугольник, почти во всю ширину документа. Сделайте выделение в нижней части прямоугольника около 50 пикселей в высоту, его нужно вырезать и вставить на новый слой. Скройте пока Ваш слой с этой деталью прямоугольника, она пригодится нам позже. У Вас должно получиться что-что вроде этого. Сайт своей дизайн студии - уроки фотошоп Добавьте эти стили слоя к вашему прямоугольнику Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп Переместите прямоугольник в верхнюю часть документа, скрывая его округлые края. Сайт своей дизайн студии - уроки фотошоп Сделайте скрытый слой видимым, и переместите деталь в нижнюю часть прямоугольника.

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

Добавьте эти стили слоя к вашей нижней части прямоугольника. Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп Вот что должно получиться. Сайт своей дизайн студии - уроки фотошоп Теперь вы можете добавить название и логотип, затем с помощью инструмента Rectangular Marquee Tool=Прямоугольная область сделайте выделение как на картинке иже, заполните выделение белым цветом и измените Opacity=Непрозрачность до 2% Сайт своей дизайн студии - уроки фотошоп Сделайте то же самое с нижней частью. Сайт своей дизайн студии - уроки фотошоп Добавьте вашей навигации текст и одну кнопку на новом слое. Сайт своей дизайн студии - уроки фотошоп Далее добавим стили слоя нашей кнопке.   Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп Так же мы добавим немного блеска, как мы делали в предыдущих шагах. С помощью двух линий 1 пикс, добавьте разделитель, между каждым пунктом навигации. Добавить маску слоя к деталям, и перетащите Gradient=Градиент в верхней и нижней половинках деталей. Сайт своей дизайн студии - уроки фотошоп Создайте новый слой, инструментом Rounded Rectangle tool=Прямоугольник со скругленными углами, создайте прямоугольник как на картинке ниже. Сайт своей дизайн студии - уроки фотошоп Добавьте следующие стили слоя: Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп Сайт своей дизайн студии - уроки фотошоп Вот что у Вас должно получиться Сайт своей дизайн студии - уроки фотошоп Теперь с теми же стилями слоя, создайте еще один, большой прямоугольник под слоем с предыдущим. Сайт своей дизайн студии - уроки фотошоп На первом прямоугольнике у нас будет логин и пароль, иконки Вы можете скачать здесь ( http://dryicons.com/ ) Сайт своей дизайн студии - уроки фотошоп Теперь заполним содержанием ваш макет. Сайт своей дизайн студии - уроки фотошоп Кнопки ( читать далее ) сделайте инструментом Rounded Rectangle tool=Пямоугольник со скругленными углами, и добавьте разделитель, так же как мы делали в навигации. После того как Вы это сделаете, снова создайте небольшой прямоугольник. Сайт своей дизайн студии - уроки фотошоп Заполните прямоугольник цветом # e8e8e8 затем добавьте 1 пиксель обводку с помощью цвета # cbc9ca. Повторите эту процедуру, чтобы добавить больше содержания вашему макету. Сайт своей дизайн студии - уроки фотошоп Результат у Вас должен быть таким! До встречи в следующих уроках интерфейс! Сайт своей дизайн студии - уроки фотошоп Ссылка на источник: http://www.hv-designs.co.uk

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

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