—»     —»   Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD
  Раздел: Образование и Изучение   Комментариев: 3  

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD



Сегодня мы будем делать дизайн-макет сайта в стиле web 2.0 для мобильных приложений и ПО.

Готовы? Давайте начнем с рисования макета в Photoshop.

Создайте новый документ шириной 1680 пикселей, и выделите в нем рабочую область шириной 960 пикселей, используя 12-ти колоночную сетку '960 grid system' – именно это и будет наш веб-сайт. С обеих сторон оставьте поля в 360 пикселей.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Давайте сделаем центральную полосу, в которой разместим изображения продуктов, которыми торгует веб-сайт (подобно шапке сайта), а также небольшие описания к товарам. Эта область будет служить для привлечения внимание посетителей.

Используя инструмент создания прямоугольника, создайте центральную область длиной по всему документу, и высотой 400 пикселей. В опциях стилей вы можете применить градацию от темно-синего цвета (#043573) к лазурному (#0a97f1), используя следующие параметры:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Теперь поместите логотип в верхнюю левую часть страницы:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Используя инструмент создания прямоугольника с закругленными углами, нарисуйте прямоугольник небесного цвета (#b7d7f1) – это будет основой для нашего меню навигации. Используя инструмент создания собственных фигур, выберите треугольник, который будет располагаться под этой основой, создавая эффект карикатуры.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Теперь нужно установить эффект затенения до 0 (фоновый уровень), чтобы страница была не такой белой (примечание: если уровень заблокирован, то просто кликните дважды). Давайте использовать затенение от лазурного (#c8e4fc) к белому. В результате у нас выйдет нечто вроде этого:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Теперь давайте возьмем изображение с голубым небом и облаками, нечто похожее на это:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Давайте импортируем его в документ, расположив в самом верху, под логотипом и под прямоугольником. Понизьте уровень плотности до 60% и попробуйте отыскать максимально оптимальные параметры уровней. В примере был использовать уровень яркости.

Теперь небо не так сильно выделяется, но фон выглядит привлекательнее.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Все что нам осталось, это закончить верхнюю область разметки, добавив туда ссылки. Давайте будем использовать шрифт Century Gothic.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Давайте нарисуем еще один светло-синий прямоугольник (#badefc) шириной в 220 пикселей (3 колонки сетки '960 grid') и 430 пикселей высотой. Расположите его так, чтобы он находился за пределами центральной области (с низу и с верху).

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Теперь с помощью инструмента создания текста, мы соединим концы прямоугольника с центральной областью, создавая нечто вроде треугольника:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Давайте закрасим этот треугольник цветом, более темным, нежели лазурный в прямоугольнике (#92b8d7). Таким образом, мы получим нечто вроде трехмерного эффекта. Давайте применим ту же процедуру к нижнему правому углу, достигнув того же эффекта:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

В квадрате мы собираемся разместить отзывы покупателей и два баннера с контактными данными (телефон и email). Давайте создадим округлый прямоугольник, соединенный с маленьким треугольником, который мы делали ранее для создания эффекта в меню навигации. Затем мы добавляем отзывы, написанные нашими клиентами.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Ниже мы добавим небольшую кнопку, которая позволит нам прочесть отзывы.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Теперь, используя шрифт Century Gothic, инструмента создания округлого прямоугольника и двух иконок, мы создадим раздел, в котором будут указаны контакты. Простой и привлекательный раздел.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Давайте импортируем изображение продукта (в данном случае, изображение телефона, которое очень просто найти в интернете), и разместим его в середине голубой области.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Теперь скопируйте слой с телефоном: правая кнопка по слою, а затем пункт дублирования.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Теперь, как только вы разместили его внутри скопированного слоя, нажмите Edit > Transform > Rotate 90, как показано на изображении ниже:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

И вот наш результат:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Перетащите дублированный слой под основной слой с телефоном.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Теперь, нам нужно соединить эти два слоя в один (выделите слои и нажмите CTRL+E). Затем мы дублируем наш новый слой. Далее, нажмите Edit > Transform > Rotate 180:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

У нас получится нечто вроде этого:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Теперь Edit > Transform и выберите пункт «reflect horizontally» и немного понизьте расположение изображения.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Давайте уменьшим уровень плотности до 25%, и с помощью ластика и мягкой кисти, нам нужно удалить большую часть отражения.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Нам нужно получить такой результат:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Таким образом, у нас получилось простое и эффективное отражение. Теперь давайте возьмемся за нашу текстовую разметку.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Сайт немного преображается. Рядом с двумя телефонами нам нужно добавить описание свойств ПО, которое мы продаем. К тому же, можно добавить некоторые иконки.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

И наконец, нам нужно добавить кнопку, побуждающую к действию, которая будет перемещать пользователей на страницу покупки и скачивания файла.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Теперь наша верхняя часть закончена. Давайте разберемся с остальными частями дизайн-макета. Нам нужно разделить «подвал» на 3 блока небесного цвета (округлые прямоугольники цвета #b7d7f1). Не забывайте пользоваться сеткой.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

В первом блоке мы разместим новости:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Во втором давайте разместим список активных на форуме пользователей:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

И в последнем мы разместим последние комментарии.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Теперь нам нужно скопировать небо с облаками, перевернуть его на 180 градусов, и поместить в нижней части документа.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

В заключение мы сделаем «подвал» макета: с помощью инструмента создания округлых прямоугольников давайте сделаем еще один раздел, разместим его по центру и впишем данные об авторских правах.

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Интересно увидеть результат? Итак, вот и готов наш дизайн-макет сайта в стиле web 2.0:

Уроки Photoshop: Создаём дизайн-макет сайта в стиле WEB2.0 - обучение и PSD

Заключение

Отражения, иконки, кнопки, плавные формы: все это свойства веб-дизайна в стиле web 2.0. Не так уж и сложно сделать то, что выглядит очень привлекательно, не так ли? Скачайте PSD и используйте его в личных целях для будущих проектов. Ждите новых статей!

Скачать архив с PSD-исходником

Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Mysterious Master   Прочитано (раз): 26094   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 20 июня 2010 @ 13:37
Написал: MAX — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
"Создайте новый документ шириной 1680 пикселей, и выделите в нем рабочую область шириной 960 пикселей, используя 12-ти колоночную сетку '960 grid system' – именно это и будет наш веб-сайт. С обеих сторон оставьте поля в 360 пикселей."


я немного не догоняю про 12-ти колоночную сетку , как её делать ... можно по-подробнее для чайников ,как её делать и тд.?

ПС:вчера нашел ваш сайт , просидел около 3х часов , почитал , очень понравились статьи и вообще в общем , сайт супер )))))))
Комментарий #2: 20 июня 2010 @ 19:03
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
Цитата: MAX
я немного не догоняю про 12-ти колоночную сетку , как её делать ... можно по-подробнее для чайников ,как её делать и тд.?

Сетку не нужно делать. Для этого уже есть сделанная заготовка (шаблон). Скачать ее вы можете с сайта 960 grid system (ссылка в начале статьи). В этом архиве есть папка "templates\photoshop" и в ней находятся 3 заготовки на 12, 16 и 24 колонки.

В файле-исходнике урока (ссылка в конце статьи) 12-ти колоночная сетка уже наложена, но отключена. Включите ее (группа 12 Col Grid) и вы увидите, как она перекрывает дизайн-макет. Присмотритесь внимательно - все элементы дизайна (блоки, формы и т.п.) расположены (по вертикали) в пределах колонок этой сетки.

Ширина каждой колонки в 12-ти колоночной сетке составляет 60 пикселей. Ширина пробелов - 20 пикселей. Если вы немного знаете как работает Фотошоп, то наверно в курсе, что при рисовании фигур и других элементов есть такая фишка, как прилипание курсора к границам объектов, уже находящихся в макете.

Таким образом наличие сетки позволяет вам на глаз прикинуть ширину объекта (известны ширины колонок и пробелов), проще прорисовать его (прилипание курсора), и, в конечном этапе проще сверстать HTML-страницу с готового макета.
Основные плюсы я привёл, может кто-то захочет что-то добавить из личного опыта - милости прошу.

Цитата: MAX
ПС:вчера нашел ваш сайт , просидел около 3х часов , почитал , очень понравились статьи и вообще в общем , сайт супер )))))))

Рады, очень рады, что делаем полезное дело smile
Комментарий #3: 20 июня 2011 @ 13:47
Написал: Concrete — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Подскажите ,как именно в фотошопе сделать затенение?
"Теперь нужно установить эффект затенения до 0 (фоновый уровень), чтобы страница была не такой белой"
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30