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

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

дополнительные материалы к урокам демо версия урока

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

Необычный логотип, построенный из букв

Как подключить любые шрифты для сайта

Понравилась статья? Поделись с друзьями!


Не нашли того, что искали? Воспользуйтесь расширенным поиском!

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail:


Комментарии к этой статье:

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


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail: