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 дизайна | уроки веб дизайна

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

 

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

Создайте выделение инструментом Прямоугольное выделение, и на новом слое залейте его цветом # 78b000.

Снимите выделение, нажав комбинацию клавиш  Ctrl+D. Возьмите инструмент Прямоугольник с скругленными углами (радиус 15 пикселей.) и создайте форму  любого  цвета.

Установите непрозрачность слоя до 0% и примените к слою следующие функции:

 

 

 

 

 

 

 

В результате у нас получилась такая кнопка:

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

Теперь мы должны сделать кнопки разного цвета, для этого измените параметры кнопок
Для второй кнопки:

 

Для третьей кнопки:

 

Для четвертой кнопки:

 

Для пятой кнопки:

 

Для шестой кнопки:

 

Вот такая цветная навигация у нас на данном этапе:

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

Затем примените к слою с текстом следующую функцию:

В результате чего мы получим тени от текста:

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

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

Самое время , чтобы добавить логотип, для этого инструментом Произвольная фигура создаем форму из стандартного набора фигур.

А сейчас делаем пазл в нижнем левом углу холста:

Теперь нажимаем Ctrl+T, чтобы повернуть фигуру:

Добавим еще несколько фигур в наш логотип в том же порядке:

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

У вас должно получится что-то вроде этого:

После этого шага мы помещаем серые копии головоломки под слоями с кнопками и увеличиваем их размер, до таких, как указано на рисунке:

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

 

Источник.

AddThis Social Bookmark Button
 

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


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

поиск
RSS
Информационный дизайн.

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

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

Как ускорить индексацию сайта.

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

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

Играем в "Песочнице" Google.

  Само понятие "песочница" появилось совсем недавно (2004г.), но это понятие уже стало хорошо известно многим оптимизаторам, задачей которых является продвижение...

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

В чем сила блогов? Или для чего нужны онлайн-дневники.

    Блоги , или как раньше назывались они онлайн-дневники были изначально местом, где большое количество людей могло выразить свое мнение или...

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

Когда нам флеш необходим?

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

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