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





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

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


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

Подсказка

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

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

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


Бизнес сайт


Шаг 1
Создайте новый документ размером 900х900 пикселей и в новом слое инструментом Прямоугольная область (Rectangular Marquee Tool) создайте небольшой прямоугольник в верхней части. Залейте его, используя инструмент Градиент (Gradient Tool). Цвета – от #7EB3DD к #4C8DBF.


Дизайн бизнес сайта


Потом примените стиль Внутренняя тень (Layer Style - Inner Shadow):

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


Дизайн бизнес сайта


Отбрасывание тени:

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


Дизайн бизнес сайта

Дизайн бизнес сайта


Шаг 2
Теперь напишите текст меню. Его нужно расположить по центру, поэтому используйте функции выравнивания. Я использовал шрифт “Arial”, размер – 12, кернинг (kerning): -50. Также под текстовым слоем нужно создать прямоугольник инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 5 пикселей. Потом понизьте Непрозрачность (Opacity) слоя с прямоугольником по своему усмотрению.


Дизайн бизнес сайта


Шаг 3
Создайте новый слой (Create New Layer) под слоями меню и назовите его “main area”. Потом инструментом Прямоугольная область (Rectangular Marquee Tool) создайте прямоугольное выделение и залейте его линейный градиентом. Цвет – от #18639B к #407CAC. Применённый ранее стиль Отбрасывание тени, обеспечивает хороший переход от верхнего меню к созданной зоне.


Дизайн бизнес сайта


Шаг 4
Создайте новый документ размером 14х14 пикселей. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте квадрат белого цвета со стороной в 1 пиксель в левом верхнем углу, далее продолжайте создавать такие квадраты, расстояние между которыми будет 1 пиксель. Вы можете использовать и другие инструменты и способы, но вам нужно создать узор, показанный ниже. На моём рисунке, я залил фон чёрным цветом, что вам было лучше видно квадраты, вам же этого делать не нужно. Когда закончите с созданием узора, перейдите в меню Редактирование»Определить узор (Edit>Define Pattern) и сохраните ваш узор.


Дизайн бизнес сайта


Шаг 5
Вернитесь в основной документ, выберите слой “main area” и примените стиль Наложение узора (Layer Style - Pattern Overlay) с настройками, показанными ниже. Выберите созданный узор.


Дизайн бизнес сайта

Дизайн бизнес сайта


Шаг 6
Создайте новый документ размером 454х454 пикселей и перейдите в меню Просмотр»Показать»Сетку (View>Show>Grid). Используя сетку и инструменты Горизонтальная строка (Single Row Marquee Tool) и Вертикальная строка (Column Marquee Tool), создайте чёрные линии.


Дизайн бизнес сайта


Инструментом Произвольная фигура (Custom Shape Tool) создайте красную стрелку и наклоните её.


Дизайн бизнес сайта


Потом инструментом Лассо (Lasso Tool) создайте остальную часть линии стрелки. Удерживайте Alt при создании, чтобы сохранять угол в 45 градусов. Залейте выделение красным цветом.


Дизайн бизнес сайта


Шаг 7
Выполните сведение слоёв и вставьте график в наш основной документ. Затем перейдите в режим Искажения (Transform – Distort) и измените слой, как показано ниже. Используйте инструмент Прямоугольная область (Rectangular Marquee Tool) чтобы обрезать части графика, которые вылезают на белую область. В конце установите Непрозрачность (Opacity) слоя – 80% .


Дизайн бизнес сайта


Шаг 8
Сделайте копию слоя с графиком и поместите её под оригинал. Используя стрелки на клавиатуре, переместите копию на 10 пикселей вниз и влево, затем понизьте Непрозрачность (Opacity) слоя на 20% (с 80% до 60%). Повторяйте это шаг, понижая непрозрачность каждой копии на 20%. Когда закончите, объедините все слои с графиком и обрежьте нижнюю часть, которая вылезает на белую область.


Дизайн бизнес сайта


Шаг 9
Создайте новый слой (Create New Layer) под слоем с графиком и назовите его “path line”. Инструментом Перо (Pen Tool) нарисуйте линию, потом выберите инструмент Кисть (Brush Tool) и установите его размер – 1 пиксель, цвет белый. Затем снова выберите инструмент Перо (Pen Tool), кликните правой кнопкой на контуре и выберите Обводка контура (Stroke Path), в появившемся окне выберите Кисть (Brush). Таким образом, вы создадите однопиксельную линию. Кликните правой кнопкой на контуре ещё раз и выберите Удалить контур (Delete path). Сделайте копию слоя с линией и переместите её на 3 пикселя вверх. Продолжайте делать копии и помешать их выше предыдущей. После того, как сделаете несколько копий с расстоянием в 3 пикселя, начинайте увеличивать его. Я продолжил до 4, потом до 5, 7 пикселей и закончил расстоянием в 10 пикселей. Это создаст иллюзию перспективы. Когда закончите, объедините все слои с линиями в один и установите Непрозрачность (Opacity) полученного слоя – 20%.


Дизайн бизнес сайта


Шаг 10
В завершении добавьте текст. Я использовал шрифт “Helvetica”, который хорошо подходит для создания чистого вида.


Дизайн бизнес сайта


Шаг 11
Теперь создайте новый слой (Create New Layer) поверх остальных и назовите его “left column’”. Создайте прямоугольник инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) на синей области. Вам нужно создать прямоугольник так, чтобы его нижняя часть переходила в белую область. Потом создайте красный круг и примените слабый эффект стиля Внутренняя тень (Layer Style - Inner Shadow). Создайте стрелку под углом 45 градусов, как показано ниже. Она должна начинаться с самой границы круга, выходя из белого прямоугольника. Потом добавьте текст:


Дизайн бизнес сайта


Шаг 12
Добавьте текст в вашу колонку.


Дизайн бизнес сайта


Шаг 13
Теперь создайте закруглённый прямоугольник с радиусом 5 пикселей в правой части. Перейдите в меню Стилей слоя (Layer Style - Blending Options) и примените эти стили:

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


Дизайн бизнес сайта


Внутренняя тень (Режим – Умножение):


Дизайн бизнес сайта


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


Дизайн бизнес сайта

Дизайн бизнес сайта


Шаг 14
Напишите текст на этом прямоугольнике и в колонке под ним.


Дизайн бизнес сайта


Шаг 15
Создайте новую группу слоёв (Create New Group), потом создайте новый слой “footer”. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение в оставшейся нижней части и залейте его линейным градиетом. Цвета –от #5389B4 к #1A639B. Также напишите текст там.


Дизайн бизнес сайта


Шаг 16
Создайте ещё одну группу слоёв “header”, скопируйте в неё ваш слой с графиком, уменьшите его и поместите в нужное место как логотип. Сделайте копию этого маленького графика, поместите его под оригинальный слой и примените стиль Наложение цвета (Layer Style - Color Overlay): цвет - #9AB7CE. Сдвиньте копию на 5 пикселей вниз и влево. Это создаст тень. Потом добавьте текст.


Дизайн бизнес сайта


Заключение:
В конце добавьте поля подписи RSS и 1-пиксельную синюю линию под синей областью, чтобы чётко отделить её.


Бизнес сайт




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

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

Ваше Имя

Ваш E-mail

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

Введите код: