Tags: макет сайта | минимализм | уроки web дизайна | уроки веб дизайна

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник.