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

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

 

Создадим новый документ размером 1000*1100 пикселей.Изменим цвет переднего плана на # 202020 и инструментом заливка заполним наш документ. Далее инструментом прямоугольник создадим две формы на нашем макете  цвет будет # 191919.

Для обеих форм я добавлю одинаковые стили:

Вот результат.

Далее инструментом Прямоугольник со скругленными углами создадим 3 формы в центре нашего макета.

Всем трем формам зададим одинаковые стили:

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

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

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

Создадим инструментом Прямоугольник со скругленными углами уще одну форму следующего цвета  # 191919.

Применим к этой форме следующие стили:

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

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

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

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

Инструментом Горизонтальный текст нанесем текст на наш макет.

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

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

Добавим кнопке стили слоя.

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

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

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

Источник:

AddThis Social Bookmark Button
 

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


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

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

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

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

Обзор бесплатных редакторов. Или чем обработать фото.

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

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

5 правил веб-дизайна

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

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

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

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

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

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

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

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