Мы запустили Форум! (*beta)






Видеокурс «Photoshop Professional. От чайника до профи за один день» поможет Вам стать профессионалом в фотошопе всего за 24 часа! Курс специально построен так, чтобы Вы научились создавать работы профессионального качества уже на следующий день. МИНИМУМ ТЕОРИИ, МАКСИМУМ ПРАКТИКИ

Подробнее...




сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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


Простой светлый дизайн сайта


1. Создайте новый документ размером 800х1000 пикселей и залейте фон цветом #e1e1e1. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру в верхней части холста. Перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

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


Простой светлый дизайн сайта


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


Простой светлый дизайн сайта


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


Простой светлый дизайн сайта

Простой светлый дизайн сайта


2. Инструментом Перо (Pen Tool) создайте выделение, как показано ниже, и залейте его белым цветом в новом слое. Установите Непрозрачность этого слоя – 30%.


Простой светлый дизайн сайта


3. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте тонкий прямоугольник цветом #929497.


Простой светлый дизайн сайта


4. Примените к нему стиль Внутреннее свечение (Layer Style - Inner Glow):

Режим – Осветление, Метод – Мягкий


Простой светлый дизайн сайта


5. Напишите название сайта и пару элементов навигации справа:


Простой светлый дизайн сайта


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


Простой светлый дизайн сайта


7. Примените к кнопке такие стили слоя:

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


Простой светлый дизайн сайта


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


Простой светлый дизайн сайта


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


Простой светлый дизайн сайта


8. Инструментом Перо (Pen Tool) создайте выделение, как показано ниже:


Простой светлый дизайн сайта


9. Залейте выделение белым цветом в новом слое и установите его Непрозрачность – 25%.

10. Сделайте несколько копий слоя с кнопкой и расположите по всей верхней части, как показано ниже. Затем напишите на них названия разделов меню.


Простой светлый дизайн сайта


11. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте прямоугольник, как показано ниже. Примените к нему такие же стили слоя, как и для верхней панели.


Простой светлый дизайн сайта


12. Вставьте контент в эту область, разделив его на три части:


Простой светлый дизайн сайта


13. Создайте ещё одну область с такими же стилями слоя:


Простой светлый дизайн сайта


14. Добавьте маску слоя (Layer Mask) к этому прямоугольнику и сделайте заливку линейным градиентом в нижней половине, чтобы фигура переходила в фон:


Простой светлый дизайн сайта


15. Таким образом создайте ещё два прямоугольника:


Простой светлый дизайн сайта


16. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте 4 квадрата, оставив расстояние между ними 2-3 пикселя.


Простой светлый дизайн сайта


17. К этим квадратам примените такие стили слоя:

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


Простой светлый дизайн сайта


Внутреннее свечение (Режим – Осветление, Метод – Мягкий):


Простой светлый дизайн сайта


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


Простой светлый дизайн сайта


18. Добавьте текст в области контента, скопируйте верхнюю панель вниз и сделайте из неё футер.


Простой светлый дизайн сайта




Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: