| Главная » Статьи » Уроки Фотошоп » Графика для сайта |
Дизайн корпоративного сайта
Конечный результат: Загрузите эти элементы: Иконки социальных сетей Фракталы Фотография девушки Иконка календаря Иконка пользователя Шаг 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 Сделайте копию названий разделов меню и вставьте их в область футера. Добавьте текст о правах и дизайн завершён. | |
| Просмотров: 570 | Теги: | Рейтинг: 4.0/1 |
| Всего комментариев: 0 | |
