Главная » 2016»Октябрь»22 » Уроки Photoshop Создаём дизайн-макет сайта в стиле WEB2
01:22
Уроки Photoshop Создаём дизайн-макет сайта в стиле WEB2
Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD
Сегодня мы будем делать дизайн-макет сайта в стиле web 2.0 для мобильных приложений и ПО.
Готовы? Давайте начнем с рисования макета в Photoshop.
Создайте новый документ шириной 1680 пикселей, и выделите в нем рабочую область шириной 960 пикселей, используя 12-ти колоночную сетку ' 960 grid system ' – именно это и будет наш веб-сайт. С обеих сторон оставьте поля в 360 пикселей.
Давайте сделаем центральную полосу, в которой разместим изображения продуктов, которыми торгует веб-сайт (подобно шапке сайта), а также небольшие описания к товарам. Эта область будет служить для привлечения внимание посетителей.
Используя инструмент создания прямоугольника, создайте центральную область длиной по всему документу, и высотой 400 пикселей. В опциях стилей вы можете применить градацию от темно-синего цвета (#043573) к лазурному (#0a97f1), используя следующие параметры:
Теперь поместите логотип в верхнюю левую часть страницы:
Используя инструмент создания прямоугольника с закругленными углами, нарисуйте прямоугольник небесного цвета (#b7d7f1) – это будет основой для нашего меню навигации. Используя инструмент создания собственных фигур, выберите треугольник, который будет располагаться под этой основой, создавая эффект карикатуры.
Теперь нужно установить эффект затенения до 0 (фоновый уровень), чтобы страница была не такой белой (примечание: если уровень заблокирован, то просто кликните дважды). Давайте использовать затенение от лазурного (#c8e4fc) к белому. В результате у нас выйдет нечто вроде этого:
Теперь давайте возьмем изображение с голубым небом и облаками, нечто похожее на это:
Давайте импортируем его в документ, расположив в самом верху, под логотипом и под прямоугольником. Понизьте уровень плотности до 60% и попробуйте отыскать максимально оптимальные параметры уровней. В примере был использовать уровень яркости.
Теперь небо не так сильно выделяется, но фон выглядит привлекательнее.
Все что нам осталось, это закончить верхнюю область разметки, добавив туда ссылки. Давайте будем использовать шрифт Century Gothic.
Давайте нарисуем еще один светло-синий прямоугольник (#badefc) шириной в 220 пикселей (3 колонки сетки '960 grid') и 430 пикселей высотой. Расположите его так, чтобы он находился за пределами центральной области (с низу и с верху).
Теперь с помощью инструмента создания текста, мы соединим концы прямоугольника с центральной областью, создавая нечто вроде треугольника:
Давайте закрасим этот треугольник цветом, более темным, нежели лазурный в прямоугольнике (#92b8d7). Таким образом, мы получим нечто вроде трехмерного эффекта. Давайте применим ту же процедуру к нижнему правому углу, достигнув того же эффекта:
В квадрате мы собираемся разместить отзывы покупателей и два баннера с контактными данными (телефон и email). Давайте создадим округлый прямоугольник, соединенный с маленьким треугольником, который мы делали ранее для создания эффекта в меню навигации. Затем мы добавляем отзывы, написанные нашими клиентами.
Ниже мы добавим небольшую кнопку, которая позволит нам прочесть отзывы.
Теперь, используя шрифт Century Gothic, инструмента создания округлого прямоугольника и двух иконок, мы создадим раздел, в котором будут указаны контакты. Простой и привлекательный раздел.
Давайте импортируем изображение продукта (в данном случае, изображение телефона, которое очень просто найти в интернете), и разместим его в середине голубой области.
Теперь скопируйте слой с телефоном: правая кнопка по слою, а затем пункт дублирования.
Теперь, как только вы разместили его внутри скопированного слоя, нажмите Edit > Transform > Rotate 90, как показано на изображении ниже:
И вот наш результат:
Перетащите дублированный слой под основной слой с телефоном.
Теперь, нам нужно соединить эти два слоя в один (выделите слои и нажмите CTRL+E). Затем мы дублируем наш новый слой. Далее, нажмите Edit > Transform > Rotate 180:
У нас получится нечто вроде этого:
Теперь Edit > Transform и выберите пункт «reflect horizontally» и немного понизьте расположение изображения.
Давайте уменьшим уровень плотности до 25%, и с помощью ластика и мягкой кисти, нам нужно удалить большую часть отражения.
Нам нужно получить такой результат:
Таким образом, у нас получилось простое и эффективное отражение. Теперь давайте возьмемся за нашу текстовую разметку.
Сайт немного преображается. Рядом с двумя телефонами нам нужно добавить описание свойств ПО, которое мы продаем. К тому же, можно добавить некоторые иконки.
И наконец, нам нужно добавить кнопку, побуждающую к действию, которая будет перемещать пользователей на страницу покупки и скачивания файла.
Теперь наша верхняя часть закончена. Давайте разберемся с остальными частями дизайн-макета. Нам нужно разделить «подвал» на 3 блока небесного цвета (округлые прямоугольники цвета #b7d7f1). Не забывайте пользоваться сеткой.
В первом блоке мы разместим новости:
Во втором давайте разместим список активных на форуме пользователей:
И в последнем мы разместим последние комментарии.
Теперь нам нужно скопировать небо с облаками, перевернуть его на 180 градусов, и поместить в нижней части документа.
В заключение мы сделаем «подвал» макета: с помощью инструмента создания округлых прямоугольников давайте сделаем еще один раздел, разместим его по центру и впишем данные об авторских правах.
Интересно увидеть результат? Итак, вот и готов наш дизайн-макет сайта в стиле web 2.0:
Отражения, иконки, кнопки, плавные формы: все это свойства веб-дизайна в стиле web 2.0. Не так уж и сложно сделать то, что выглядит очень привлекательно, не так ли? Скачайте PSD и используйте его в личных целях для будущих проектов. Ждите новых статей!
Скачать архив с PSD-исходником
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:
2016—2016 CoolWebmasters.Com - онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта - лаборатория D.L.E. Templates.Com
Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!
Мы сами вдохновляемся материалами, которые предлагаем вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, сниппетов и т.д.), и мы всегда сохраняем ссылки на источники, и сообщаем авторов изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но мы ведь не волшебники, чтобы угадывать, кто является автором.
Если кто-то захочет использовать какие-либо изображения, графические элементы, исходники, которые мы здесь предоставляем, то единственное требование, выставленное к перепосту, заключается в сохранении ссылки на источник, а также соблюдение условий лицензионного соглашения (если таковое имеется). Если кто-то желает модифицировать тот или иной продукт, изменить его, подкорректировать, то этому энтузиасту придется самостоятельно искать настоящего автора материала.
