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

41-1

 

 

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


Создайте новый документ 1200*1500 пикселей.

41-2


Создайте новую группу слоев , назовите их «Заголовок» или что-то в этом роде. Создайте при помощи инструмента Прямоугольное выделение  область, размером примерно 1000*110 пикселей. Это будет фон Заголовка , используя инструмент Заливка , залейте на новом слое выделенную область. Добавьте новому слою следующие стили, как показано на рисунке ниже:

41-3

41-4


Добавьте в верхнюю часть логотип.

41-5

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

41-6

Применим к кнопке «Поиск» следующие стили:

41-7

41-8

41-9

41-10

Далее создайте новую группу слоев и назовите его «Меню». Инструментом Прямоугольник со скругленными углами и радиусом 4 пикселя создайте прямоугольную форму по всей ширине макета.

41-11

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

41-12

Далее нанесем текст на меню навигации. Добавим в тексте белые тени, шириной в 1 пискель.

41-13

41-14

Следующим шагом создайте прямоугольную форму, при помощи инструмента Прямоугольник. Далее перейдите в меню Редактирование – Трансформация –Перспектива. Трансформируйте прямоугольник, добавьте ему такой же тип градиента как и для кнопки поиска.

41-15

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

41-15

41-17

Используя инструмент Перемещение разместите прямоугольник, как показано на рисунке ниже:

41-18



 

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


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

поиск
RSS
Модульная сетка.

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

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

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

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

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

Интересная подборка креативных вещей.

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

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

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

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

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

Несколько интересных и креативных рекламных плакатов.

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

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