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

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

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

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

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

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

Tags: Графика для сайта | дизайн сайта | уроки web дизайна | уроки веб дизайна

38-1

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


Создадим документ необходимых нам размеров  - это может быть любой размер необходимый вам в данном случае это размер 960*900. Вы можете масштабировать данное изображение,  подобрав необходимый вам размер.


Добавим изображение чистой воды.

38-2


Далее добавим горизонтальные направляющие  80, 110, и 170 пикселей.


Теперь создадим логотип для нашего макета. Набираем необходимый текст  нужного размера в моем случае это шрифт Forte 72px. Далее идем в меню стилей слоя и добавляем слою следующие стили:

38-3
Вот что у вас должно получиться:

38-4
Когда логотип сделан, следует перейти к созданию меню навигации, для этого воспользуйтесь инструментом Прямоугольник со скругленными углами и создайте форму как показано на рисунке ниже. Радиус углов возьмите равный 15 пикселям. Измените непрозрачность слоя до 70%.

38-5
Далее добавим текст в меню в макете использован шрифт  Myriad Pro размером 24 пикселя и цветом # 0263a4.
Для того чтобы изобразить как будут выглядеть кнопки при наведении измените текст одного пункта меню на белый , далее создайте форму , используя при этом Прямоугольник со скругленными углами, радиусом 15 пикселей и добавьте к ней некоторые стили слоя:

38-6
Вот ваш промежуточный результат:

38-7
Далее создадим поле для поиска, для этого создайте форму при помощи инструмента Прямоугольник со скругленными углами  с радиусом округления 15 пикселей и добавьте данной форме стили слоя:

38-8
Изменение заливки до 0%.

38-9
Далее воспользуемся инструментом Свободная фигура, чтобы закончить наше меню поиска. Создадим в правой части значок цветом  # 0263a4. После этого ваше меню должно выглядеть примерно так:

38-10
Раздел заголовка уже готов.


Далее для того чтобы создать фон для основного блока  показа слайдов опять воспользуемся инструментом Прямоугольник со скругленными углами с параметрами заданными ранее и создадим фигуру белого цвета , как показано на картинке и изменим непрозрачность до 70%.

38-11
Далее нарисуем фигуру в верхнем левом углу нашего окна , оставив снизу немного свободного места. Установите для данного слоя стили, указанные на рисунке ниже:

38-12
Теперь у нас получилось что-то вроде этого:

38-13
Далее добавляем изображение , и добавляем к нему следующие стили:

38-14
Вот как должно выглядеть ваше окно.

38-15
Добавим текст в правой части нашего окна .

38-16


Теперь добавим кнопку Читать далее. Для этого создайте фигуру при помощи прямоугольника  с радиусом 20 пикселей. Скопируйте стили слоя из верхней кнопки меню  в режиме наведения.

38-17
Добавив текст вы должны получить что-то вроде этого:

38-18


Далее добавим форму для разбиения показа слайдов по страницам  для этого создайте прямоугольную форму, скопировав стили слоя из слоя кнопки Читать далее.

38-19

Далее добавьте на кнопку круг – вы можете создать ровный круг инструментом Свободная фигура – Круг , зажав при этом клавишу Shift. Задайте цвет вашему кругу # e8e8e8 Скопируйте его несколько раз и добавьте к нему стили слоя:

38-20
Для изменения кнопки после наведения курсора измените круг на цвет # 006ca4.

38-21

Теперь ваш шаблон должен выглядеть следующим образом:

38-22
Следующим шагом создадим основную область для текста. Для этого воспользуемся инструментом Прямоугольник со скругленными углами, радиусом округления 15 пикселей. Нижнюю часть блока можно опустить за границу макета , чтобы получить прямые углы.

38-23


Далее нанесем текст или заголовок в верхнюю часть блока:

38-24
Создадим еще один блок показа иллюстраций,  для этого создадим прямоугольную область и добавим к ней стили слоя:

38-25
Добавим в блок несколько иллюстраций размером 180*135 пикселей и добавим к ним следующие стили слоя:

38-26

38-27


Далее идем в инструмент Свободная фигура и добавляем фигуру в виде стрелки  и добавляем ей следующие стили:

38-28


Измените цвет наложения стрелки на # 87cdf5. Теперь у нас есть кнопка переключения изображений.

38-29
Далее заполните основную область текстом, можете добавить изображения:

38-30
Теперь создадим еще один блок меню, для этого создайте прямоугольную область и добавьте к ней стили слоя:

38-31
Далее добавляем несколько иконок и текст на наше меню:

38-33
Для разделения пунктов создайте две линии толщиной в 1 пиксель и цветом # 0270bc и # 148bcf. Добавьте маску слоя.

38-34


Воспользуйтесь инструментом Градиент и создайте градиент подобный этому:

38-35
Далее залейте градиентом слои с линиями в направлении сверху вниз.

38-36
Продублируйте слой с линиями и расположите их на блоке.

38-37
И последним шагом добавьте в нижнюю часть макета информацию об авторских левый угол и продублируйте меню в правом углу.
Вот окончательный результат :

38-38


Надеюсь, вам этот урок будет полезен. Если вам понравился урок или материал оказался не слишком понятным  можно воспользоваться комментариями внизу страницы для обратной связи. Если Вы хотите получать информацию о новых материалах на сайте , можете подписаться на RSS.

Источник.

AddThis Social Bookmark Button
 

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


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

поиск
RSS
Основные правила набора текста.

Ниже приведены самые важные правила набора текста применимые к веб-дизайну.             1. Не ленитесь! Всегда после набора потратьте 10 минут на...

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

Преимущества работы с модульными сетками в дизайне.

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

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

Составление технического задания.

      Работа над любым проектом, даже самым маленьким должна начинаться с постановки технического задания. Техническое задание - это руководство с...

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

Как сделать сайт особенным.

       В сети интернет находится более 98855000 сайтов, и их количество растет ежедневно. В России почти 22% жителей пользуются интернетом....

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

5 правил веб-дизайна

Для достижения наибольшего удобства работы с веб-сайтом необходимо придерживаться Пяти базовых правил веб-дизайна. Как и в других различных видах деятельности...

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