Необычный дизайн для Сайта Шопинг Центра

/ 👁 2430

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

демо версия урока

1. Итак, создаем в Фотошопе новый документ размером 1280 X 1024 пикселей. Расставим направляющие: по вертикали 300 пикселей и по горизонтали 984 и 200 пикселей:

2. Теперь будем создавать фон. Возьмем инструмент Gradient Tool, зададим цвета примерно как на скриншоте ниже:

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

4. Теперь применим к слою Filter – Filter Gallery. В открывшемся окне применим Spayed Strokes с настройками как на скриншоте ниже:

5. Начнем создание главной композиции. Для начала мы будем создавать некий фундамент – то, на чем будет стоять наш торговый центр (не может же он висеть в воздухе ). Перед тем как приступить заблокируйте слой с фоном. А теперь берем инструмент для рисования эллипса и рисуем его. Зажимаем Alt чтобы скопировать эллипс и с зажатыми клавишами Alt и Shift тащим мышкой немного вниз. Должно получиться 2 эллипса – один под другим. Для наглядности окрасьте их разными цветами:

6. Растрируем слои с эллипсами. Перейдем на слой нижнего эллипса. Возьмем инструмент перо и с обеих сторон нарисуем треугольник с левой стороны как показано на скриншоте. После нажмем Ctrl + Enter, получим выделение, которое нужно залить цветом нижнего эллипса. Проделаем то же самое и для правой стороны:

7. Откроем из дополнительных материалов файлы trava.jpg и asfalt.jpg. Сначала поработаем с травой. Разблокируем слой и с помощью пера вырежем ту часть картинки где изображена трава, после скопируем, перейдем обратно на наш документ и вставим. Слой с травой должен быть выше слоя с верхним эллипсом:

8. Уменьшите слой с травой при помощи Свободной трансформации. Встаньте на слой с травой и с зажатой клавишей Alt прикрепите этот слой к слою с верхним эллипсом. Подкорректируйте положение слоя:

9. Теперь займемся асфальтом. В файле asfalt.jpg с помощью Прямоугольного выделения выделим только тот кусочек картинки, где изображен асфальт. Дальше все как и с травой, только прикреплять будем к нижнему эллипсу:

10. Создадим новую папку, назовем ее «Фундамент» и положим туда все наши слои с фундаментом. Теперь из дополнительных материалов откроем файл shop.jpg. Разблокируем слой и аккуратно с помощью инструмента Перо выделим наше здание не захватывая тени. Копируем выделение и вставляем в наш документ. Подкорректируйте немного размеры:

11. Сделаем тень от здания. Для этого сначала скопируем слой со зданием и расположим слой-копию под слоем здания. Применим Свободную трансформацию, с помощью которой сожмем и немного расширим здание-копию. Спустим немного вниз. Теперь сочетанием клавиш Ctrl + L вызываем окно уровней и выставляем настройки как на скриншоте:

Снова вызываем свободную трансформацию и работая с параметрами Perspective и Distort попытайтесь добиться примерно такого же результата как и на скриншоте ниже:

Добавляем к слою Слой Маски и ластиком с непрозрачностью 70 % стираем часть правого края тени, меняем непрозрачность на 13% и проходимся по краю всей тени:

Применяем к слою Filter – Blur – Gaussian Blur с радиусом 4,8:

Убавляем непрозрачность слоя до 30%:

12. Открываем файл tree.jpg, копируем дерево и переносим в наш документ. Корректируем размеры, а режим наложения выставляем на Darker Color. Копируем получившееся дерево с помощью зажатой клавиши Alt и перетаскиваем в другой конец здания. Этот слой опустим под слой со зданием, чтобы дерево находилось как бы за зданием. С помощью Свободной трансформации отразим по горизонтали. Должно получиться примерно так:

13. Сделаем небольшие цветочные лужайки. Откройте файл flower.jpg из дополнительных материалов. Теперь откройте меню Edit – Define Pattern. Дайте любое имя и нажмите Ок:

Теперь идем в наш основной документ. Нарисуем при помощи Пера произвольную форму будущей лужайки. Нажмем Ctrl + Enter чтобы создать выделение. Теперь выбираем инструмент заливки и в его настройках выбираем Pattern и из небольшого меню немного правее, выбираем картинку, созданной нами заливки. Заливаем выделение. Далее при помощи инструмента Трансформации, используя Perspective, Distort и Warp придайте фигуре более натуральную форму:

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

14. Создадим асфальтовую площадку вокруг нашего здания. Создаем новый слой, берем инструмент перо и рисуем примерно вот такую область (не забываем преобразовать ее в выделение Ctrl + Enter):

Обязательно проследите, чтобы данный слой был под слоем с тенью, иначе мы ее просто скроем. Теперь возьмите любой цвет и залейте выделенную область. Выделение снимите (Ctrl + D):

Из дополнительных материалов загрузите в наш документ файл plitka.jpg. С помощью свободной трансформации растяните картинку по ширине так, чтобы она закрывала собой залитую область и немного уменьшите по высоте. Только следите, чтобы залитая область не проглядывала из-за картинки:

После того, как применили трансформацию, встаем на слой с загруженной текстурой и с зажатой клавишей Alt щелкаем левой кнопкой мыши, чтобы прикрепить текстуру к слою с залитой областью:

15. Нужно создать вывеску торговому центру. Назовем его к примеру «Царский». А что, неплохое название для центра…
Итак, создадим новый слой на самом верху и создадим выделение с помощью инструмента Перо такое, как на скриншоте:

Зальем его любым цветом и подвинем наверх башни. Подкорректируйте положение с помощью Трансформации:

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

16. Вот теперь пишем название нашего торгового центра на созданном баннере. Выберите шрифт, который Вам больше нравится, примените к нему эффекты. Я использовала эффекты Stroke, Outer Glow, Drop Shadow, Bevel & Emboss. Поэкспериментируйте с настройками и цветами, не забудьте подкорректировать положение текста с помощью Трансформации:

17. Поместим все слои композиции в одну попку, назовем ее «Композиция». Теперь сделаем небо. Загрузите файл nebo.jpg из дополнительных материалов. Уменьшите его размер, но так, чтобы было по всей ширине нашего документа:

Теперь поменяем режим наложения слоя на Soft Light:

Теперь остается только добавить нашему слою Векторную маску и взяв круглую мягкую кисть черного цвета стереть ту часть картинки, которая накладывается на здание, создавая видимую границу:

18. Все! Приступаем к самому интересному, к созданию загадочного стеклянного шара!
Создаем новый слой. Берем выделение формы эллипса и с зажатой клавишей Shift рисуем правильную окружность примерно в том месте как показано на скриншоте. После заливаем выделение цветом #d3d6c0:

Применим к слою эффект Inner Shadow с параметрами как на скриншоте:

Создадим новый слой над слоем с шаром и прикрепим его. Встанем на новый слой и зальем его цветом #65645F. Теперь возьмем инструмент Градиент и проведем линейный градиент из центра к краю как показано на скриншоте:

Теперь на клавиатуре нажимаем клавишу D дабы установить цвета по умолчанию. Добавим Маску слоя к нашему слою. Возьмем инструмент Градиент, но на этот раз градиент должен быть радиальным. Встанем на маску слоя и проведем градиент, который должен начинаться в центре шара, а заканчиваться немного за его пределами. Результат должен быть таким:

Теперь скопируем наш слой с шаром (не с градиентами, а именно с шаром), поместим слой-копию на самый верх и поставим параметр Fill на 0%. После этого применим к слою эффекты с параметрами как на скриншотах ниже:

Сделаем больше объема. Создадим новый слой. Возьмем белую круглую мягкую кисть радиусом 370 пикселей. Поставим на новом слое пятно в центре шара. А потом сделаем размытие Filter – Blur – Gaussian Blur с радиусом около 30:

Уменьшим непрозрачность(Opacity) слоя до 30%. Теперь сделаем блик. Возьмем жесткую кисть белого цвета и диаметром около 80. Создадим новый слой и на нем поставим пятно. Размоем по Гаусу (Gaussian Blur) с радиусом около 3:

Добавим для слоя эффект Outer Glow со следующими параметрами:

Теперь идем на слой с шаром, который остался под градиентами и устанавливаем Fill на 25%. Наш шар становится стеклянным:

Теперь создадим тень от шара. Для этого сначала создадим новый слой и размещаем его под всеми слоями от нашего шара. Стоя на нем и удерживая клавишу Ctrl щелкаем по слою с шаром и получаем выделение по шару. Выбираем Радиальный Градиент и на новом слое рисуем градиент по выделению от черного к прозрачному:

Теперь с помощью Свободной Трансформации сжимаем получившуюся тень книзу. Немного сдвигаем вниз, уменьшаем непрозрачность до 50% и размываем по Гаусу с радиусом 2:

После помещаем все слои шара в одну папку, которую назовем «Шар».
19. Создадим солнечный свет. Нарисуем окружность такого цвета как на скриншоте и расположим ее в правом верхнем углу нашего документа:

Растрируем слой и размоем его по Гаусу (Радиус 8):

Применим эффект Outer Glow с параметрами как на скриншоте:

20. Теперь будем рисовать лучи. Возьмем инструмент Перо и на новом слое нарисуем луч. Преобразуем выделение и зальем цветом #ecf9a5:

Размоем луч по Гаусу (радиус около 22) и поместим слой под слоем с солнцем:

Применим к лучу эффект Outer Glow с теми же параметрами, какие мы применяли и к солнцу. Теперь будем копировать лучи (зажимаем Alt и перетаскиваем новый луч на новое место). С помощью Свободной Трансформации меняйте наклон лучей:

Объединим все лучи в один слой. Для этого выделим все слои лучей, зажимая при этом Ctrl. Кликнем правой кнопкой мыши по области выделенных слоев и выберем пункт Merge Layers. Получившийся слой размоем еще разок по Гаусу (радиус 25). А также размоем и наше солнышко (радиус около 26):

Подкорректируйте положение лучей по отношению к солнцу. Когда результат Вас устроит, объедините слои, назовите получившийся слой «Солнце» и расположите этот слой под слоем с небом:

21. Откройте из дополнительных материалов файл Birds_02.jpg и разместите птичку в нашу композицию. Скопируйте ее используя клавишу Alt и поместите копию в другое место, изменив размер и повернув, с помощью Свободной Трансформации:

22. Добавим надписи в нашу композицию. Надписи о распродаже и дисконтах. Я использовала шрифт Nueva Std размером 72pt, но Вы можете использовать любой какой нравится. Добавляем эффекты к тексту. Я добавила Bevel & Emboss и Drop Shadow. Поэкспериментируйте с эффектами и быть может Вы получите свои интересные результаты:

23. Теперь давайте повернем текст при помощи Свободной Трансформации. А слой с процентами я еще и исказила при помощи инструмента Create Warped Text (этот инструмент находится на панели вверху при активном инструменте текста):

24. Если к предыдущему тексту я применила красный цвет, то для дисконта применим цвет – синий. Напишем слово на новом слое, также применим эффекты, а после Create Warped Text, только теперь уже с другими настройками искажения:

Уменьшим непрозрачность слоя до 64% и передвинем слой с текстом под папку с шаром:

25. Займемся заголовком нашей странички. Пишем название нашего торгового центра или то, что Вы хотите поместить в заголовке. Используйте для текста те эффекты, которые Вам понравятся. Я использовала Bevel & Embossб, Drop Shadow и Outer Glow:

У меня в итоге получилось так:

26. Сделаем заголовок «Наши Бутики» в левой части и скопируем ему такие же эффекты, как и у нашего главного заголовка. Теперь заполним пространство под заголовком названиями бутиков, примерно как на скриншоте ниже:

27. Теперь осталось только в футере нашего сайта написать контактный адрес и телефон торгового центра. Наш дизайн готов.
Вы можете использовать основу такого дизайна для Ваших работ, создавая совершенно индивидуальные дизайны. Вносите свои элементы, фантазируйте. Удачи Вам!

Leave a Reply