Данный урок из категории уроки Web дизайна. Сегодня мы будем создавать простой, но элегантный дизайн сайта "Фриланс - моя жизнь". Предлагаем использовать его, как личное резюме.
Сложность: средняя
Навыки для "прокачки"
- создание структуры сайта
- работа с направляющими
- создание элементов и кнопок
Для повторения урока Вы можете использовать любую цветовую гамму, а также иконки и элементы. Ресурсы используемые в данном уроке :
Шрифт 1
Шрифт 2ЛоготипИконкиИтак, давайте начнем. Для начала создадим новый документ размером 1200 * 1295.
Цвет фона для вашего документа # 2f1901, используйте инструмент Paint bucket tool = Заливка, чтобы заполнить документ цветом . Далее мы будем добавлять немного текстуры на задний план. Перейдите в Filter > Add Noise = Фильтр > Добавить шум и используйте значения как показано на картинке ниже:
Создание заголовка.Устоновите шрифты, которые Вы скачали в начале урока. Выберите инструмент Text tool = Текст, цвет текста белый, размер 94pt. Место / 27px с левой стороны нашего документа (в центре) и 41px сверху. Далее примените следующий стиль слоя Gradient Overlay = Наложение градиента.
Теперь чуть ниже нашего заголовка, мы разместим подзаголовок. Размер шрифта 52pt цвет белый , так как, мы будем добавлять эффекты к тексту. Текст расположите как показано на картинке.
Теперь примените следующие стили для вашего подзаголовка:
Вот что у Вас должно получиться:
Создание меню.Выберите инструмент Rounded rectangle tool = Прямоугольник со скругленными углами, цвет белый ( т.к далее будем применять стили ) и радиус 45px. Сделаем наш прямоугольник размерами 1150 * 60. Теперь мы создадим внешнюю поддержку к нашему округленному прямоугольнику. Выберите только схему нашего прямоугольника. Чтобы сделать это, Вы удерживаете CTRL и щелкаете по уменьшенному изображению округленного слоя прямоугольника. Теперь создайте новый слой. Ваше выделение еще активно, Перейдите в Select > Modify > Expand = Выделение > Модификация > Расширить и поставьте настройки 10px. Теперь, заполните свой прямоугольник черным цветом и понизьте Opacity > Непрозрачность на 30 %.
Теперь мы создадим 4 квадрата, вы должны сделать это очень точно. Квадраты должны иметь следующие цвета.
4 квадрата Размер: 312px широкий (каждый другого цвета)
Квадрат 1: # 14d500
Квадрат 2: # ff0000
Квадрат 3: # 009abb
Квадрат 4: # ff8400
Сделайте их поверх вашего прямоугольника.
Далее будем использовать тот же метод. Убедитесь, что вы находитесь на слое с разноцветными квадратиками, зажмите Ctrl и щелчок правой кнопкой мышки по миниатюре слоя, с нашим белым прямоугольником. У Вас появиться выделение, теперь выберите Select Inverse = Инверсия, затем нажмите Delete, должно получиться следующее :
Пришло время добавить стиль слоя нашим квадратикам. Наложение градиента.
Зеленый:
Красный:
Синий:
Оранжевый:
Создание кружков.Теперь мы начнем создавать наши круги. Этот процесс является простым и легким.
Используя инструмент Circle shape tool = Произвольная фигура, нарисуйте небольшой круг.
Теперь создайте еще один круг, и поместите его внутри Вашего предыдущего слоя. Убедитесь, что круги в самом центре вашего зеленого квадрата.
У Вас должно быть что-то вроде этого:
Теперь, настало время для создания нашей линии. Выберите инструмент Create our line = Линия и нарисуйте линию 75 пикселей высотой и прикрепите ее к центру круга.
Создайте новую группу, нажав на значок папки в палитре слоев. Назовите группу Зеленые квадратики. Перетащите два слоя кругов и слой линии в группу. Создайте дубликат группы и переименуйте ее в Красные квадратики. Выберите группу слоев и зайдите в Edit > Transform > Flip Vertical = Редактирование > Трансформирование > Отразить по вертикали. Теперь перетащите целую группу и поместите ее в центр нашего Красного квадратика.
Дублируйте обе группы (переименуйте их в соответствующие цвета) и перетащите их на квадратики.
Вот что должно получиться.
Теперь добавьте в меню то, что Вам хочется, используя шрифты Qlassik.
Давайте создадим наши детали между главными заголовками и информацией. Чтобы создать нашу промежуточную деталь активируйте инструмент Create our line = Линия и вытяните линию, длинной 1135px , цвет белый с 30 % Opacity = Непрозрачность. Rasterize = Растрируйте слой, дублируйте его и перетащите линию клавишами стрелок.
Содержание.Теперь мы приступим к созданию контента. Первое, что мы будем делать, это используем набор иконок которое скачали ранее. Нам нужен значок Мастер, в папке 128 128. Перенесите мастера на документ и разместите его, размером 27px с левой стороны документа, и 58 пикселей с вашей второй линией.
Добавьте картинке следующие стили:
Теперь добавим содержимое заголовка в документ. Мы будем использовать шрифт Терции, цвет белый, и размер 26pt. Отступите 20px от вашего мастера и напишите, что захотите. Автор написал "Создание мира дизайна Волшебным", потому, что он подходит к нашему мастеру. Теперь, снизу, с использованием любых шрифтов вы можете написать, содержимое о том, как сделать мир дизайна волшебным. Держите его расположение в 20px от вашего мастера и 30px от содержания текста заголовка.
Теперь используйте значок, найденный здесь (http://www.custompowerdesigns.com/downloads/gallery.png) , и поместите его 27px с правой стороны документа и 85px из нижней части вашего последнего содержания. Используйте тот же процесс, чтобы написать содержание, как мы делали выше, только по правому краю текста.
Используйте тот же процесс, как и выше, только расстояние этого (http://www.custompowerdesigns.com/downloads/icontwo.png) значка 27px с левой стороны, и выравниванием по левому краю.
Вот что должно получиться:
Медиа.Для начала нужно создать еще одну промежуточную деталь как ту, которую мы создали ранее. Вы можете либо в таком же порядке создать ее еще раз, или, чтобы сэкономить время, просто дублировать те слои и перетащите их вниз. Место / 70px из нижней части содержимого.
Теперь, будем использовать иконку Twitter, которая находится в наших ресурсах выше. Вам необходимо открыть ее и удалить белый фон. Для этого вы можете использовать Magic Wand Tool = Волшебная палочка.
Измените размер значка до 110 * 110. Теперь перетащите его на наш документ в пространстве 152 px слева от нашего документа и 20px из нашей второй распорной детали. Установите режим смешивания на Overlay = Перекрытие. Дублируйте иконку Twitter, чтобы она лучше смотрелась.
Теперь используя шрифт Терции , напишите текст белым цветом размер 21pt, на своей иконке Twitter, затем дублируйте этот слой.
Сделайте то же самое с DeviantART логотипом . Используте тот же процесс (только расположите его справа, а не слева).
И наконец ваш конечный Результат!
Вот, чем так хороши уроки Web дизайна! До встречи!
