Футуристический дизайн

Конечный результат:


Футуристический дизайн


1. Создайте новый документ размером 850х850 пикселей. Инструментом Многоугольное лассо (Polygonal Lasso Tool) создайте выделение, как показано ниже:


Футуристический дизайн


2. Залейте это выделение белым цветом в новом слое, не снимайте выделение. Перейдите в палитру каналов и кликните на иконку, показанную ниже, чтобы сохранить выделение в отдельном канале.


Футуристический дизайн


3. Выберите новый канал “alpha 1” и снимите выделение (Ctrl+D). Потом примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 10 пикселей.


Футуристический дизайн


4. Перейдите в меню Уровни (Levels) и переместите все три ползунка к середине. Вы заметите, как фигура будет становиться чётче и более закруглённой.


Футуристический дизайн

Футуристический дизайн


5. Сделайте выделение канала “alpha 1” (Ctrl+Click), вернитесь в палитру слоёв, создайте новый слой (Create New Layer), залейте в нём выделение белым цветом. Удалите предыдущий слой, в котором вы создавали фигуру. В меню Стилей слоя (Layer Style — Blending Options) примените эти стили к новому слою:

Отбрасывание тени (Режим – Умножение):


Футуристический дизайн


Внутреннее свечение (Режим – Нормальный, Метод – Плавный):


Футуристический дизайн


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Футуристический дизайн


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Футуристический дизайн


6. Поместите эту фигуру в самый верх холста:


Футуристический дизайн


7. В верхней половине создайте белый прямоугольник на всю ширину фигуры и установите его Непрозрачность – 10%.


Футуристический дизайн


8. Создайте две 1-пиксельные линии цветом #232323 и #383838. Расположите их рядом друг с другом. Сделайте несколько копий этих линий, чтобы заполнить всю панель. Это разделители навигационной панели.


Футуристический дизайн


9. Добавьте названия разделов навигации, заголовок, слоган и логотип. Цвет текста — #1a88e4.


Футуристический дизайн


10. Инструментом Овальная область (Elliptical Marquee Tool) создайте два круга цветом #1a88e4 под слоем с навигационным меню.


Футуристический дизайн


11. К этим кругам примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 2 пикселя.


Футуристический дизайн


12. Потом создайте такую фигуру синего цвета:


Футуристический дизайн


13. Примените к ней размытие со значением 15 пикселей. Потом добавьте маску слоя (Layer Mask) и сделайте заливку линейным градиентом, чтобы ослабить одну сторону фигуры. Понизьте Непрозрачность слоя, чтобы получить такой результат:


Футуристический дизайн


14. Создайте 1-пиксельные линии цветом #1a88e4.


Футуристический дизайн


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


Футуристический дизайн


16. Примените к ней такие стили слоя:

Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Футуристический дизайн


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль – Зеркальный):


Футуристический дизайн


17. Вставьте логотип и добавьте информацию о компании. Стрелку рядом со словами “ABOUT US” можно найти в стандартном наборе программы, как и белую стрелку рядом со словами “MORE INFO”. Свечение в правом верхнем углу было сделано простым инструментом прямоугольника.


Футуристический дизайн


18. Стиль Внешнее свечение (Layer Style — Outer Glow) для светящихся объектов:


Футуристический дизайн


19. Создайте ещё два прямоугольника с такими же стилями слоя, как у верхнего.


Футуристический дизайн


20. Заполните эти области контентом.


Футуристический дизайн


21. Скопируйте навигационную панель, Отразите её по вертикали (Transform – Flip Vertical) и перетащите вниз. Удалите навигационный текст, названия сайта и прочие элементы. Добавьте информацию о правах:


Футуристический дизайн


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


Футуристический дизайн





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

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

19 августа 2018

16-мегапиксельная фотокамера COOLPIX S4200, которая помещается даже в кармане, позволяет одним касанием снять следующий волшебный момент. Быстрая система меню и сенсорный экран с высоким разрешением обеспечивают простую фокусировку и съемку...

19 августа 2018

Цифровая зеркальная фотокамера D5100 позволяет проявить творческие способности и помогает создавать неповторимые фотографии и видеоролики. Поворотно-откидной монитор с переменным углом наклона в сочетании с функцией D-movie позволяет делать уникальные снимки...

19 августа 2018

Торговая марка Shinco – не самый известный на мировом, да и, пожалуй на российском рынке производитель DVD-плееров. Однако маркетинговая активность, которую проявляет представительство компании у нас, сделала ее название известным, а качество продукции Shinco, обычно, не вызывает нареканий. В сочетании с ценой, которая на нашем рынке не является самой дешевой и, при этом, уверенно держится ниже стоимость продукции именитых брендов, изделия Shinco выглядят очень привлекательно для рядового потребителя. Одним из самых ярких примеров хорошего соотношения цена/функциональность стал портативный DVD-плеер Shinco SDP1830, который и попал к нам на тест в этот раз.