Дизайн сайта для интерьера

1. Создайте новый документ размером 850×1300 пикселей, залейте фон чёрным цветом. Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) и сделайте 2 прямоугольника сверху. Залейте их цветами #2e2e2e и #202020 соответственно. Между ними оставьте расстояние в 1 пиксель, поместите в верхней части. Объедините оба слоя с прямоугольниками (Ctrl+E).


Дизайн сайта для интерьера



2. Примените фильтр Добавить шум (Add Noise Filter) к слою с прямоугольниками и настройте так:


Дизайн сайта для интерьера



3. Теперь добавьте маску слоя и нажмите D. Выберите инструмент Градиент (Gradient Tool), тип — линейный градиент, сделайте заливку снизу прямоугольника вверх. Кликните правой кнопкой на маске слоя (иконка, которая появилась на слое) и выберите Применить маску слоя (apply Layer Mask). Повторите этот шаг с маской ещё раз, но сделайте заливку сверху вниз:


Дизайн сайта для интерьера



4. Повторите шаг 3 ещё раз, но используйте зеркальный градиент (reflected) и цвет заливки — белый. Сделайте заливку, начиная с середины прямоугольника по направлению к правой или левой стороне.


Дизайн сайта для интерьера



5. Добавьте ваш логотип цветом #ff0072 и напишите текст:


Дизайн сайта для интерьера



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


Дизайн сайта для интерьера



7. Маленькая стрелка была сделана инструментом Перо (Pen Tool). Теперь добавьте фотографию интерьера под навигационным меню. Я добавил 1 пиксельную обводку для фотографии:


Дизайн сайта для интерьера



8. Сделайте 2 прямоугольника чёрного цвета и добавьте к ним 1 пиксельную обводку. Установите Заливку (Fill) каждого слоя с прямоугольником — 60%


Дизайн сайта для интерьера



9. Заполните эти прямоугольники информацией на ваш выбор. Под большой фотографией добавьте 2 фотографии с интерьером и один чёрным прямоугольник. К каждому элементу добавьте 1 пиксельную обводку белого цвета:


Дизайн сайта для интерьера



10. В последнем прямоугольнике должна быть информация. Потом выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) и сделайте выделение ниже:


Дизайн сайта для интерьера



11. Залейте это выделение чёрным цветом и примените стиль Наложение градиента
(Layer Style — Gradient Overlay):


Дизайн сайта для интерьера



И стиль Обводка (Layer Style — Stroke):


Дизайн сайта для интерьера



12. Теперь сделайте все ваши слои невидимыми, кроме слоя с прямоугольником. Выберите слой с прямоугольником и перейдите в меню Слой»Объединить видимые (Layer > Merge visible). Потом сделайте все слои видимыми. Добавьте маску слоя к слою с прямоугольником, сделайте 3 копии слоя и пометите, их, как показано ниже:


Дизайн сайта для интерьера



13. Заполните эти прямоугольниками фотографиями интерьера. Сделайте копию вашего заголовка и поместите копию вниз, сдвиньте логотип вправо, а слева напишите информацию о правах:


Дизайн сайта для интерьера



Финальный результат:


Дизайн сайта для интерьера






Делаем Web-дизайн

Вас может также заинтересовать:

17 декабря 2017

Дата анонса: 2006/07/19 Эффективное разрешение, МП: 7.2 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 179

17 декабря 2017

Самая главная особенность камер JZ – объектив Fujinon с 8-кратным оптическим зумом, который обеспечивает фокусное расстояние от 25 до 250 мм (эквивалент камеры 35 мм). Такой объектив позволяет делать любые снимки – от великолепных широкоугольных фотографий до восхитительных изображений удаленных объектов.

17 декабря 2017