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





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

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


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

Подсказка

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

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

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


Web-дизайн сайта фотографа


Прежде чем мы начнём, загрузите несколько иконок:

Фотоаппарат Nikon
Ещё один фотоаппарат
Стопка фотографий


Начинаем
Создайте новый документ размером 1200х1200 пикселей и выберите инструмент Градиент (Gradient Tool), стиль – радиальный градиент.


Web-дизайн сайта фотографа


Установите цвет заливки - #eae9e9 и цвет фона - #d7d7d7.


Web-дизайн сайта фотографа


Сделайте заливку, начиная из середины верхней стороны холста вниз на четверть его высоты. Потом примените фильтр Добавить шум (Add Noise Filter):


Web-дизайн сайта фотографа


Создание шапки
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение высотой 240 пикселей на всю ширину холста. Выделение нужно будет опустить на 50 пикселей от верхней границы.


Web-дизайн сайта фотографа


Залейте выделение любым цветом в новом слое и примените следующие стили в меню Стилей слоя (Layer Style - Blending Options):

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


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа

Web-дизайн сайта фотографа


Создание узора для шапки
Создайте новый документ размером 14х16 пикселей с прозрачным фоном. Приблизьте изображение до 3200% и инструментом Овальная область (Elliptical Marquee Tool) создайте два чёрных круга, как показано ниже.


Web-дизайн сайта фотографа


Теперь перейдите в меню Редактирование»Определить узор (Edit > Define Pattern), сохраните узор под любым именем и закройте документ.
Вернитесь в наш основной документ и сделайте выделение слоя с шапкой сайта (Ctrl+Click). Создайте новый слой и залейте выделение инструментом Заливка (Paint Bucket Tool) (в настройках инструмента сверху выберите сохранённый узор).


Web-дизайн сайта фотографа


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

Отбрасывание тени (Режим – Нормальный):


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа


Установите Непрозрачность слоя – 20%.


Web-дизайн сайта фотографа


Создание заголовка
Инструментом Горизонтальный текст (Horizontal Type Tool) создайте заголовок.


Web-дизайн сайта фотографа


К текстовому слою примените эти стили:

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


Web-дизайн сайта фотографа


Внутренняя тень (Режим – Нормальный):


Web-дизайн сайта фотографа


Наложение цвета (Режим – Нормальный):


Web-дизайн сайта фотографа


Слева от названия заголовка вставьте иконку фотоаппарата, загруженную в начале урока.


Web-дизайн сайта фотографа


Создание навигации
В правом верхнем углу создайте навигацию по сайту текстовым инструментом.


Web-дизайн сайта фотографа


К тексту примените эти стили:

Отбрасывание тени (Режим – Нормальный):


Web-дизайн сайта фотографа


В начале навигации создайте ещё одно слово “Home” или “Homepage”. Слово должно быть белым. Под этим словом создайте прямоугольник с закруглёнными углами. К прямоугольнику примените эти стили:

Отбрасывание тени (Режим – Нормальный):


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа

Web-дизайн сайта фотографа


Поля входа в учётную запись
Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 10 пикселей создайте фигуру на правой стороне шапки. Потом установите Непрозрачность этого слоя – 40%.


Web-дизайн сайта фотографа


Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте 3 чёрных прямоугольника: 2 одинаково больших и 1 маленький.


Web-дизайн сайта фотографа


К этим трём треугольникам примените следующие стили:

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


Web-дизайн сайта фотографа


Наложение цвета (Режим – Умножение):


Web-дизайн сайта фотографа


Добавьте текст на эти поля.


Web-дизайн сайта фотографа


Создание галереи
Вставьте фотографию фотоаппарата Nikon слева под шапку сайта. Справа от иконки напишите “From The Gallery” и короткий слоган.


Web-дизайн сайта фотографа


К тексту примените эти стили:

Отбрасывание тени (Режим – Нормальный):


Web-дизайн сайта фотографа


Наложение цвета (Режим – Нормальный):


Web-дизайн сайта фотографа


Потом создайте несколько кругов, к ним тоже нужно будет применить те же стили, что и для текста.


Web-дизайн сайта фотографа


Справа создайте 4 закруглённых прямоугольника.


Web-дизайн сайта фотографа


Ко всем прямоугольникам примените эти слили:

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


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа


Также примените Наложение градиента с оттенками серого.


Web-дизайн сайта фотографа


Сделайте выделение слоя с одним из 4-х квадратов (Ctrl+Click). Потом примените Сжатие (Modify – Contract) со значением 10 пикселей. Вставьте в это выделение какое-нибудь изображение. Для этого сначала откройте его в Photoshop, сделайте выделение всего холста (Ctrl+A), скопируйте выделение (Ctrl+C), вернитесь в наш документ и перейдите в меню Редактирование»Вклеить в (Edit > Paste Into). Ваша картинка вставится в выделение. Измените его размер и расположите как вам нужно. Потом примените следующие стили:

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


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа


В результате у вас должны быть такие картинки:


Web-дизайн сайта фотографа


Создание разделителя
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте две 1-пиксельные линии в новом слое друг на друге. Верхняя линия – чёрная, нижняя – белая.


Web-дизайн сайта фотографа


Установите Режим наложения слоя с линиями – Перекрытие (Blending Mode – Overlay) и добавьте маску слоя (Layer Mask). Выберите инструмент Градиент (Gradient Tool), стиль – зеркальный, и сделайте заливку из середины линий к одной из сторон.


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа


Залейте выделение любым цветом и примените эти стили:

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


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа


Кликните правой кнопкой на слое с этим прямоугольником и выберите Преобразовать в смарт-объект (Convert To Smart Object). Добавьте слой-маску (Layer Mask) и сделайте линейную заливку градиентом снизу вверх.


Web-дизайн сайта фотографа


Текстовым инструментом заполните сайдбар.


Web-дизайн сайта фотографа


Создание контента
Справа от сайдбара напишите текст и вставьте последнюю иконку.


Web-дизайн сайта фотографа


Создание футера
Сделайте копию шапки и узора и перетащите её в нижнюю часть холста. Измените размер прямоугольника, чтобы он больше был похож на футер.
Измените настройки стиля Наложение цвета (теперь цвет - #8d8d8d) и Наложение градиента:

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


Web-дизайн сайта фотографа


В конце добавьте информацию футера:


Web-дизайн сайта фотографа


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


Web-дизайн сайта фотографа




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

написал : EriccsoN

мне нравиться )

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


написал : RediSkin

Вот бы увидеть как из этого урока сверстать макет...

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


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

Ваше Имя

Ваш E-mail

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

Введите код: