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

35-1

В наше время очень много макетов  и шаблонов сайтов, далеко не пригодных к использованию. Многие фирмы и компании выбирая из множества дизайнов останавливают свой выбор на сайтах с минимальным количеством графики. Такие сайты очень удобны для использования небольшим фирмам, либо компаниям, которые представляют узкий спектр услуг.
Стиль минимализма появился  не так давно как отдельное направление. Минимализм всегда отличает от других направлений простота и монохромность, творческое самоограничение дизайнера.
В данном уроке вы увидите простоту построения макета сайта, который будет отвечать принципам минимализма. Этот урок прост в исполнении и сможет дополнить сведения, полученные  из  статьи - определения  минимализма как  направления в искусстве, позволит наиболее реально увидеть технику построения данных сайтов .


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

 

35-2
Для нашего макета используем текстовый логотип. Для этого инструментом Текст наносим логотип в левом верхнем углу.

35-3


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

35-4


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

35-5


Теперь добавим  верхнее меню , используя инструмент Текст.

35-6


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

35-7


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

35-8

35-9

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

35-11


Далее создаем наложение основного фона на главную область макета.

35-12


Для того чтобы края изображения выглядели нежнее обработаем их при помощи маски слоя и градиента. Итак, создадим маску данному слою с изображением.

35-13


Далее градиентом от черного к белому обработайте край изображения, после чего снимите маску слоя и удалите ненужные области. Результат должен быть такой как на изображении ниже:

35-14


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

35-16


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

35-17


Вот что должно у вас получится.

35-18


Уменьшите непрозрачность  в окне Стиль слоя.

35-19


Далее создадим обводку главной области.

35-20


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

35-22


Далее добавляем изображение, которое будет дополнять текст.

35-23


Следующим шагом создадим обводку  нашему изображению. Для этого  щелкните правой кнопкой мыши на эскизе слоя , держа зажатой клавишу CTRL. Далее пройдите по меню Выделение –Модификация-Расширить и расширьте область выделения на 3 пикселя.

35-24


Создайте новый слой под слоем с изображением , залейте его белым  цветом и создайте обводку слою толщиной в 1 пиксель красного цвета.

35-25


Далее наносим текст в основную область.

35-26


Повторим вышеописанные действия  , и добавим еще одно изображение и текст.

35-28


Создадим линию разделитель для нижней части макета.

35-29


И, наконец добавим  данные вниз макета, и наша работа закончена.

35-30

Вот окончательный вариант макета.

35-1


Вот такой простой урок по созданию макета сайта в стиле минимализма. Думаю урок будет многим полезен.

Источник.

AddThis Social Bookmark Button
 

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


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

поиск
RSS
ТЗ к сайту

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

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

5 способов уменьшить показатель отказов на сайте.

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

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

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

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

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

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

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

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

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

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

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