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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник.