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: Графика для сайта | дизайн сайта | макет сайта | уроки web дизайна | уроки создания сайта

В этом уроке вы узнаете как создать простой и красочный макет сайта . Данный макет можно использовать в качестве основы под WordPress

 


Для начала откройте новый документ размером 960*900 пикселов.Выберите фоновый слой и нажмите комбинацию клавиш Ctrl + J. Этим действием вы дублируете фоновый слой. Выберите второй слой и добавьте к нему следующие стили:

 


Инструментом Прямоугольник со скругленными углами создадим 4 формы как показано на рисунке ниже:


Всем этим формам мы добавляем стиль слоя:


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


Для этих слоев используем стили:


Продублировав формы несколько раз мы получим заполненую верхнюю часть макета:


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


Вы увидите выделение вокруг своей формы.


Выберите слой с оранжевыми вертикальными формами и нажмите  Ctrl + J. Photoshop скопирует выделенную область на новый слой и она будет помешена над первым слоем. Нажмите Ctrl + D чтобы снять выделение.

И вы получите такой результат:

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

 

Для этой формы добамив следующие стили:


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


С помощью инструмента прямоугольник со скругленными углами создидим новые формы как показано на рисунке:


Для этих двух слоев добавим следующие стили:

 


Добавим в макет примерный текст как показано на изображении:


На верхней части добавим логотип и текст для кнопок:


Для логотипа применим следующие стили:


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


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


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


Вот как должна выглядеть кнопка:


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


На средней части макета создадим форму как показано на рисунке:


С помощью правой кнопки мыши щелкаем на пилитру слоя и растрируем его. Потом инструментом Ластик удаляем ненужные углы http://viagraspills.....


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

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

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

Источник

AddThis Social Bookmark Button
 

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


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

поиск
RSS
Поднять ТИЦ до небес.

ТИЦ -это тематический индекс цитирования, говоря проще это коэффициент применяемый поисковой системой Яндекс при ранжировании страниц, соответствующих поисковым запросам....

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

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

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

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

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

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

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

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

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

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

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

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

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