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

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


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


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-дизайн

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

16 декабря 2017

Дата анонса: 2010/01/05 Эффективное разрешение, МП: 10 Диагональ ЖК-дисплея, дюймы: 2.5 Вес с батареей и картой памяти, г: 175

16 декабря 2017

16 декабря 2017

Действительно портативный телефото зум-объектив 1 NIKKOR 30–110 мм – это идеальный объектив, который можно взять с собой для съемки в выходной день. Оптимизированная оптика байонета 1 Nikon: два элемента из...