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

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

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

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

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

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

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

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


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

 


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


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


Создайте новый документ, 1680*1050 пикселей. Этот размер подходит как обычным мониторам, так и  широкоформатным.


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


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


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


Далее скопируйте этот слой . Перейдите в меню Фильтр – Шум – Добавить шум. Используйте те же настройки для фильтра как показано на картинке.  Далее изменяем режим наложения на Умножение и  снижаем непрозрачность.


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


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


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

30-11


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

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

30-13


Далее под основной блок создаем выделение, заполняем его градиентом от светло-серого к белому.

30-15
Разделите страницу на две колонки одна из которых будет  нести информацию, а вторая дополнять ее.  Используйте инструмент Текст, чтобы добавить содержимое в основную область. Выделяйте ссылки другим цветом, чтобы они были читаемыми.

30-16

30-17
Далее используйте инструмент Прямоугольник с округленными углами, для того чтобы создать форму на нашем макете. Цвет формы значения не имеет, поскольку мы будем накладывать на него стили.

30-18
Добавьте к этому слою серо-белый градиент и мягкую внутреннюю тень.

30-19

Используйте это окно для показа самых популярных новостей сайта. Пусть он включает в себя текст и небольшую картинку.

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

30-21
Нанесите текст на кнопку.

30-22
Добавим нижнее поле для этого создадим выделение в нижней части экрана и заполним его серым цветом, чтобы оттенить его от области основной.

30-23
Создайте круглое выделение и заполните его радиальным градиентом от серого к белому. Далее трансформируйте это выделение для того чтобы получить тень, как показано на картинке.

30-24
Переместите тень в центральную часть макета и удалите ненужные области.

30-25
Нижняя часть страницы идеальное место для вторичных элементов на сайте. Туда к примеру можно поставить область авторизации посетителей. Создайте заголовок этому элементу и создайте область, куда  будут заполняться данные авторизации.

30-26
Далее мы используем центральную часть нижней части макета для того, чтобы оставить данные о компании. Установите необходимые размеры шрифта и нанесите данные.

30-27
Далее наносим на макет номера телефонов и распорядок работы предприятия.

30-28
Вот окончательная версия нашего макета. Дизайн данной страницы на мой взгляд очень аккуратен и удобен в пользовании. В данном макете нет никаких лишних блоков , что давало бы дополнительную нагрузку. Использование серых цветов позволяет добавить глубину и выделить необходимые области и заголовки, чтобы они не остались без внимания.

Источник.

AddThis Social Bookmark Button
 

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


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

поиск
RSS
8 шагов успешной оптимизации графики.

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

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

Преимущества интернет-рекламы.

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

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

Стили сайтов. Стиль минимализма

Стиль минимализма берет свое начало в первой половине 60-х г.г. Суть минимализма - это простота, минимум графических материалов. Минимализм это...

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

Стили сайтов. Американский бизнес стиль.

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

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

Информационный дизайн.

Информационный дизайн на данный момент один из наиболее развивающихся отраслей дизайна. Он идет следом за минимализмом. Поскольку сайты в минималистическом...

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