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





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

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


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

Подсказка

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

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

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

Дизайн корпоративного сайта


Загрузите эти элементы:

Иконки социальных сетей
Фракталы
Фотография девушки
Иконка календаря
Иконка пользователя

Шаг 1
Создайте новый документ размером 1000х1000 пикселей. Залейте фон цветом #ebe4ce.

Дизайн корпоративного сайта


Шаг 2
Создайте новый слой “top highlight”. Залейте верхние 100 пикселей холста линейным градиентом от белого к прозрачному. Понизьте Непрозрачность слоя до 80%.

Дизайн корпоративного сайта


Шаг 3
Сейчас создадим шапку сайта. Создайте новый слой “highlight behind logo”. Выберите инструмент Градиент (Gradient Tool), стиль – радиальный, от белого к прозрачному, и сделайте заливку в верхнем левом углу. Понизьте Непрозрачность слоя до 40%. Установите Режим наложения – Перекрытие (Blending Mode – Overlay).
Вставьте заголовок сайта. Потом выберите иконку логотипа и вставьте позади заголовка. Обесцветьте его (Desaturation), увеличьте и установите Режим наложения – Перекрытие (Blending Mode – Overlay).

Дизайн корпоративного сайта

Дизайн корпоративного сайта

Дизайн корпоративного сайта


Шаг 4
Добавьте иконки социальных сетей в правый верхний угол.

Дизайн корпоративного сайта


Шаг 5
Подпишите каждую иконку. Настройки текста:

Шрифт: DejaWeb
Размер: 14pt
Стиль: Полужирный (Bold)
Кернинг: -50
Цвет: #323332

Дизайн корпоративного сайта


Шаг 6
Создайте новый слой “pattern area”. Инструментами Прямоугольная область (Rectangular Marquee Tool) и Заливка (Paint Bucket Tool) создайте прямоугольник под шапкой сайта. Цвет прямоугольника не важен. Перейдите в меню Слой»Слой-маска»Показать все (Layer > Layer Mask > Reveal All). Выберите инструмент Кисть (Brush Tool) с мягкими краями чёрного цвета и небольшой непрозрачностью. Обрисуйте края фигуры:

Дизайн корпоративного сайта

Дизайн корпоративного сайта


Шаг 7
К слою “pattern area” примените стиль Наложение узора (Layer Style - Pattern Overlay): Режим – Нормальный, узор отсюда.
Установите Непрозрачность слоя – 15%.

Дизайн корпоративного сайта

Дизайн корпоративного сайта

Дизайн корпоративного сайта


Шаг 8
Выберите фрактальные кисти и обрисуйте область узора. Добавьте маску слоя (Layer Mask) и жёсткой кистью подотрите края кистей.

Дизайн корпоративного сайта

Дизайн корпоративного сайта


Шаг 9
Вставьте фотографию девушки. Добавьте маску и поработайте с краями чёрной кистью.

Дизайн корпоративного сайта


Шаг 10
Теперь нужно написать немного текста справа от фотографии.

Заголовок:

Шрифт: DejaWeb
Размер: 42pt
Стиль: Полужирный (Bold)
Кернинг: -50
Цвет: #383838

Текст:

Шрифт: DejaWeb
Размер: 14pt
Стиль: Полужирный (Bold)
Кернинг: -50
Цвет: #585858

Текст ссылок ‘See Our Work’ Links:

Шрифт: DejaWeb
Размер: 18pt
Стиль: Полужирный (Bold)
Кернинг: -50
Цвет: #ffffff

Дизайн корпоративного сайта


Шаг 11
Создайте закруглённый прямоугольник позади ссылок “See Our Work”. Используйте инструмент Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) со значением радиуса 10 пикселей.
Примените стиль Наложение градиента (Layer Style - Gradient Overlay) к прямоугольникам:
1 - #e95a74 - #d63451
2 - #3dafde - #1b91c1

Дизайн корпоративного сайта


Шаг 12
Используя направляющие, создайте закруглённый прямоугольник над областью с фотографией и текстом. Примените к прямоугольнику следующие стили:

Отбрасывание тени: Режим – Нормальный.
Внутренняя тень: Режим – Умножение.
Наложение градиента: Режим – Нормальный, Стиль – Линейный, Цвет – от #01658e к #014764.

Дизайн корпоративного сайта

Дизайн корпоративного сайта


Шаг 13
Сделайте копию со слоем меню. Удалите левую часть прямоугольника, примерно с отметки 650 пикселей слева. Сделайте цвет градиента темнее. Полученная тёмная часть станет областью поиска.

Дизайн корпоративного сайта


Шаг 14
В этой тёмной области создайте два маленьких прямоугольника. Залейте левый цветом #d0e9f3, а правый градиентом от #1c90c0 к #06729f.

Дизайн корпоративного сайта


Шаг 15
Напишите текст в левой части навигационной панели. Используйте шрифт “DejaWeb”.

Дизайн корпоративного сайта


Шаг 16
Создайте разделители между разделами меню. Разделителем будут две 1-пиксельные линии, расположенные рядом: от белого к прозрачному, от чёрного к прозрачному. Понизьте Непрозрачность слоя до 20%.

Дизайн корпоративного сайта


Шаг 17
Теперь создадим основную область контента. Создайте прямоугольник с закруглёнными краями с радиусом 10 пикселей. Примените стиль Обводка: Размер – 1 пиксель, Непрозрачность – 100%, Цвет - #cec6ae.

Дизайн корпоративного сайта


Шаг 18
Заполните область контентом: здесь нет ничего нового, текст, кнопки, иконки…

Дизайн корпоративного сайта


Шаг 19
Сделайте копию названий разделов меню и вставьте их в область футера. Добавьте текст о правах и дизайн завершён.

Дизайн корпоративного сайта




Обсудить данный урок на форуме





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