Beauty – ретушь для начинающих при помощи Photoshop.

Beauty – ретушь для начинающих при помощи Photoshop.

Эффект голограммы на фотографии.

Эффект голограммы на фотографии.

Создание портрета при помощи шрифтов.

Создание портрета при помощи шрифтов.

Создаем красивую оригинальную шапку для блога.

Создаем красивую оригинальную шапку для блога.

Необычный эффект глаз при помощи Photoshop.

Необычный эффект глаз при помощи Photoshop.

Создаем макет сайта о звездах и знаменитостях.

Создаем макет сайта о звездах и знаменитостях.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию футуристического логотипа в фотошоп.

Урок по созданию футуристического логотипа в фотошоп.

Создаем дизайн телефона на Android в Photoshop.

Создаем дизайн телефона на Android в Photoshop.

Создание макета сайта в стиле минимализма.

Создание макета сайта в стиле минимализма.

Как создать пиксельную кнопку в фотошопе

Как создать пиксельную кнопку в фотошопе

Создаем макет сайта для службы знакомств.

Создаем макет сайта для службы знакомств.

Создание RSS иконки.

Создание RSS иконки.

Урок по созданию простого  и современного  макета для сайта.

Урок по созданию простого и современного макета для сайта.

Графика для сайта.  Рисуем иконку на сайт.

Графика для сайта. Рисуем иконку на сайт.

Урок по созданию зимнего текста.

Урок по созданию зимнего текста.

Урок по созданию красивого новогоднего макета в фотошоп.

Урок по созданию красивого новогоднего макета в фотошоп.

Псевдо HDR.

Псевдо HDR.

Как создать основу для рекламы профессиональной косметики для волос.

Как создать основу для рекламы профессиональной косметики для волос.

Создание эффекта рисунка на фотографии.

Создание эффекта рисунка на фотографии.

Создаем макет сайта, продающий програмное обеспечение.

Создаем макет сайта, продающий програмное обеспечение.

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта для гостиниц и ресторанов.

Урок по созданию макета сайта для гостиниц и ресторанов.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию яркого красочного дизайна сайта.

Урок по созданию яркого красочного дизайна сайта.

Создание простого и стильного макета сайта.

Создание простого и стильного макета сайта.

Создаем макет блога в фотошоп.

Создаем макет блога в фотошоп.

Создаем оригинальный чистый стиль для сайта.

Создаем оригинальный чистый стиль для сайта.

Создаем профессиональную панель навигации для сайта.

Создаем профессиональную панель навигации для сайта.

Рисуем милую девчушку-смайл.

Рисуем милую девчушку-смайл.

Урок по рисованию прохлаждающегося солнца.

Урок по рисованию прохлаждающегося солнца.

Фантастический эффект фотографии.

Фантастический эффект фотографии.

Создание приятного макета сайта портфолио.

Создание приятного макета сайта портфолио.

Создание макета сайта для портфолио в стиле Веб 2.0

Создание макета сайта для портфолио в стиле Веб 2.0

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок рисования реалистичного динамика.

Урок рисования реалистичного динамика.

Создаем стильный коллаж.

Создаем стильный коллаж.

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок создание эффекта металлического текста

Урок создание эффекта металлического текста

Небесный коллаж

Небесный коллаж

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Tags: Графика для сайта | Уроки Photoshop

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

   Откройте новый документ 960*900 пикселей затем инструментом прямоугольное выделение разделите документ на прямоугольные области, как показано на рисунке:

 

 

Для слоев 2 и 4 (см. фото сверху) я буду добавлять следующие стили слоя:

 

 

 

  Для первого поля я использую цвет заливки # d57a1a, а для третьего # e5e1de, вот что у меня получилось на данном этапе: 

 

  На поле 4,где будет основной текст инструментом Прямоугольник со скругленными углами (радиус 6 пикс.) я добавляю область белого цвета.  

 

Белому полю добавляю следующие стили: 

  Вот такой  результат должен у вас получится на данном этапе: 

 

 

   Далее дублируем слой, и затем, растрируем его нажав в палитре слоев правой кнопкой по слою  и выбираем команду Растрировать слой (Rasterize Layer)

 


   Далее инструментом Прямоугольное выделение создаем выделение как показано на рисунке:


   Теперь удаляем выделенную область и снимаем выделение нажав комбинацию клавиш Ctrl + D. Вот что получилось у меня:

 

    Выбираем инструмент Прямоугольник и создаем две фигуры посередине поля. 

 

   Неважно какой цвет вы выберете, но я на следующем этапе придал следующие стили черным фигурам:

    Вот пример того что получилось: 


   Инструментом Прямоугольник со скругленными углами я создам панель навигации в верхней части сайта:

 

   Этому прямоугольнику добавьте следующие стили:

 

 

 

 

 

    Вот как стала выглядеть моя панель навигации: 

 

   Создадим тень под верхней панелью, для этого создаем эллипс, как показано на рисунке:

 


   Затем перейдите на Фильтр> Blur> Gaussian Blur и примените к фильтру мои настройки.

 

 

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

 

 

    Следующим шагом я добавляю в макет 3 формы.

 

 Для этих форм я задаю следующие стили:

 

 

 

 

 

 

  Вот что должно получится:

 В середине большой формы я добавлю картинку с драконом и стрелки для пользовательского перехода.

 Далее мы добавляем текст в макет с помощью инструмента Горизонтальный текст:

 

 Для разделения полей я использую инструмент Линия шириной в 1 пикс.

 

 Можно еще добавить пару кнопок как на следующем изображении.

 Создав новый слой поверх всех остальных, инструментом Кисть поставим точку прямо над логотипом.

 Изменим режим наложения на Мягкий свет и уменьшим прозрачность слоя до 50%.
Вот мой окончательный макет.

Надеюсь вам урок понравился!

 

Источник

 

 

 

 

 

 

 

 

 

 

 

 

 

AddThis Social Bookmark Button
 

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


Защитный код
Обновить

поиск
RSS
Структура сайта. Как создать прочный каркас для сайта.

Структура сайта - то его внутренний каркас, который далеко не всегда видно, но который помогает пользователю найти необходимую информацию.Когда создается...

кол-во просмотров7705
Подробнее...

Несколько интересных и креативных рекламных плакатов.

Как известно, хорошая реклама всегда привлекает внимание потенциальных клиентов по отношению к товарам и услугам, которые мы им предлагаем. Для любого...

кол-во просмотров6577
Подробнее...

Уникальные образцы навигации на сайте.

        Если вы разрабатываете макет и не знаете как оформить навигацию, здесь вы сможете найти несколько яркий, креативных и интересных...

кол-во просмотров9709
Подробнее...

Как правильно зарегистрировать сайт.

     Зачастую бывает так, что после создания сайта, и выпуска его в сеть счетчик изо дня в день не прибавляет...

кол-во просмотров7977
Подробнее...

Несколько полезных ссылок веб-дизайнерам.

Очень часто при работе не хватает чего-то под рукой. Мы идем в интернет, спрашиваем на форумах, листаем книжки. Есть много...

кол-во просмотров6488
Подробнее...