Создание простого сайта - резюме

Создание простого сайта - резюме - уроки фотошоп

Данный урок из категории уроки Web дизайна. Сегодня мы будем создавать простой, но элегантный дизайн сайта "Фриланс - моя жизнь". Предлагаем использовать его, как личное резюме.

Сложность: средняя Время: до 1 часа

Навыки для "прокачки" - создание структуры сайта - работа с направляющими - создание элементов и кнопок

Для повторения урока Вы можете использовать любую цветовую гамму, а также иконки и элементы. Ресурсы используемые в данном уроке : Шрифт 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 дизайна! До встречи! Ссылка на источник: www.hv-designs.co.uk

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика