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 | уроки фотошопа бесплатно

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

Создайте новый документ 960*900 пикселей. Я заливаю фон белым цветом.

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

Сейчас мы изменим цвета первым трем формам сверху:

Четвертому слою мы добавим стиль слоя. Перейдите на слой-Стиль слоя-Наложение градиента.

Добавьте в гардиент следующие цвета:

 

Вот что должно у вас получится после этих действий:

На нижний слой добавляем тени:

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

Далее берем инструмент Линия, толшиной в 1 пиксель.

Удерживая клавишу Shift создадим несколько строк. Удерживая клавишу  Shift вы сможете без труда сделать горизонтальные ровные линии.

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

Далее обьединим все слои, для этого в палитре слоев выберите все слои и нажмите Ctrl+E (данное действие обьединит все слои в один.)

Следующим шагом мы добавим другие формы в наш макет. Для этого я использую инструмент Прямоугольник со скругленными углами. Добавим две круглые формы в верхнюю часть макета. Какие использовать цвета - можете посмотреть на рисунке:

Для обеих форм добавим стиль слоя Обводка:

Вот мой результат:

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

Прямоугольнику со скругденными углами я использовала цвет: # f0f0f0 , также добавлю стиль слоя использованный несколько шагов назад

Для черной формы я задаю следующие стили:

 

Вот что у меня получилось: acheter lidocaine

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

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

 

 

 

Вот мой результат:

Далее нажав правой кнопкой мыши на слое с кнопкой в палитре слоев я растрирую слой.

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

Далее удаляем выделенную область и снимаем выделение, нажав клавишу Ctrl+D

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

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

 

 

 

Вот что получилось на этом этапе:

Осталось теперь добавить текст на изображение и вот мой окончательный макет:

Источник.

 

AddThis Social Bookmark Button
 

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


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

поиск
RSS
Анализ аудитории сайта.

  На сайт ежедневно идет определенной количество новых  посетителей. Одни  находят вас через поисковики, другие переходят через соц. сети, твиттер, форумы....

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

Что такое карта сайта?

  Карта сайта представляет собой некое подобие содержания книги. Иными словами карта сайта это страница, на которой размещены все ссылки, разделы...

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

Основные правила набора текста.

Ниже приведены самые важные правила набора текста применимые к веб-дизайну.             1. Не ленитесь! Всегда после набора потратьте 10 минут на...

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

Что такое хороший дизайн.

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

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

Преимущества работы с модульными сетками в дизайне.

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

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