Ещё больше уроков в нашей группе Вконтакте!





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

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


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

Подсказка

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

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

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


Светлый дизайн бизнес сайта


1. Создайте новый документ размером 900х850 пикселей. Кликните дважды на фоновом слое, чтобы разблокировать его. Потом примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Светлый дизайн бизнес сайта


2. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте маленький квадрат. Инструментом Многоугольное лассо (Polygonal Lasso Tool) сделайте выделение левого нижнего угла и нажмите Delete.


Светлый дизайн бизнес сайта


3. Инструментом Овальная область (Elliptical Marquee Tool) создайте круг белого цвета в нижней части фигуры. Потом сделайте выделение этого слоя с кругом (Ctrl+Click) и примените Расширение (Modify – Expand) со значением 4 пикселя и нажмите Delete в слое с квадратом.


Светлый дизайн бизнес сайта


4. Добавьте стрелку, направленную вниз:


Светлый дизайн бизнес сайта


5. Объедините все слои кроме фонового, поместите в левую верхнюю часть холста. Потом сделайте несколько копий этой фигуры. К каждой примените стиль Отбрасывание тени (Layer Style - Drop Shadow ):

Режим – Умножение


Светлый дизайн бизнес сайта

Светлый дизайн бизнес сайта


6. Теперь вставьте несколько изображений. Я выбрал ручку, телефон и пятна от чашки кофе.


Светлый дизайн бизнес сайта


7. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру под слоем с телефоном и ручкой.


Светлый дизайн бизнес сайта


8. Перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

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


Светлый дизайн бизнес сайта


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


Светлый дизайн бизнес сайта


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


Светлый дизайн бизнес сайта


9. Сделайте копию слоя с прямоугольником и поместите её под оригинал, немного поверните. Добавьте туда контактную информацию:


Светлый дизайн бизнес сайта


10. Слева напишите название сайта и добавьте логотип:


Светлый дизайн бизнес сайта


11. Найдите изображение чашки кофе, вставьте её в наш документ. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение, как показано ниже:


Светлый дизайн бизнес сайта


12. Залейте выделение белым цветом в новом слое и установите Непрозрачность – 40%. Потом добавьте маску слоя (Layer Mask) и сделайте заливку линейным градиентом из середины к правой стороне.


Светлый дизайн бизнес сайта


13. Напишите небольшое описание о вашем бизнесе. Оставьте внизу место для картинок.


Светлый дизайн бизнес сайта


14. Создайте два прямоугольника цветом #d5979a, используя инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool). Потом вставьте пару изображение и поэкспериментируйте с расположением:


Светлый дизайн бизнес сайта


15. Объедините слои с изображениями и прямоугольниками, добавьте маску слоя к объединённому слою и сделайте заливку линейным градиентом.
Под этой области создайте ещё два прямоугольника цветом #eae9e4. Потом примените 1-пикслеьную обводку цветом #838274.


Светлый дизайн бизнес сайта


16. Заполните эти области контентом, создайте кнопки, вставьте изображения:


Светлый дизайн бизнес сайта


17. Справа добавьте поисковую строку.


Светлый дизайн бизнес сайта


18. Внизу напишите несколько статей с датой. Инструментом Прямоугольник (Rectangle Tool) подсветите даты, создав фигуры под слоем с текстом.


Светлый дизайн бизнес сайта


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


Светлый дизайн бизнес сайта




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

написал : Andy

пасиба огромное, очень полезная инфа, по крайней мере для начинающего дизайнера.

---------------


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

Ваше Имя

Ваш E-mail

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

Введите код: