Потрясающе стильный шаблон сайта

Потрясающе стильный шаблон сайта - уроки фотошоп

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

Сложность: высокая Время: более 1 часа

Навыки для «прокачки» - создание разметки сайта - работа со свойствами слоев и режимами смешивания - использование линеек и направляющих - создание объема и теней элементов Для создания этого макета сайта понадобятся особые шрифты и элементы. Впрочем, вы можете использовать любые понравившиеся вам. Скачайте Шрифты : Chunk и Gabrielle Скачайте бесплатно кисти клякс Также скачайте рисованные иконки Для начала надо сделать набросок сайта. Примерно так это выглядит на бумаге: Потрясающе стильный шаблон сайта - уроки фотошоп Наш макет, фон, размером 500 × 500 пикс. Итак, давайте начнем с создания нового документа 500 × 500 пикселей в Photoshop. Убедитесь в том, что у вас установлено разрешение 72 пикс/дюйм, так как это идеальное разрешение для изображений, предназначенных для сеток. Потрясающе стильный шаблон сайта - уроки фотошоп Залейте фон цветом # d9cfc0 Потрясающе стильный шаблон сайта - уроки фотошоп Вставьте текстуру бумаги. Вы можете найти ее интернете. Теперь мы обесцветим ее с помощью  Shift + Ctrl + U, изменим режим смешивания на Умножение=Multiply и Непрозрачность= Opacity до 20%. У вас должно получиться что-то вроде этого Потрясающе стильный шаблон сайта - уроки фотошоп Это изображение будет фоном нашего документа. Перейдите в Редактировать-Определить узор=Edit-Define Pattern и придумайте название. Потрясающе стильный шаблон сайта - уроки фотошоп Теперь мы можем заполнить фон макета, созданного ранее. Выберите фоновый слой и зайдите в Редактирование-Выполнить заливку=Edit-Fill. Потрясающе стильный шаблон сайта - уроки фотошоп Создайте новый слой и, используя большую, мягкую Кисть=Brush, создадим нежный эффект света в верхней части макета. Уменьшим Непрозрачность= Opacity этого слоя до 30%. Потрясающе стильный шаблон сайта - уроки фотошоп Также создадим еще один слой и закрасим его с помощью приложенных к уроку кистей. Это позволит добавить больше деталей к верхней части.  Как только фон готов, сгруппируйте все слои (выберите все слои и нажмите Ctrl + G) назовите эту группу Фон.   Создайте новый документ 20 × 60 пикселей и залейте его белым цветом. Теперь нажмите и перетащите линейку, чтобы создать горизонтальную направляющую и поместите ее на высоте 50 пикселей. Потрясающе стильный шаблон сайта - уроки фотошоп   Захватите прямоугольник, и сделайте выделение, как показано ниже. Потрясающе стильный шаблон сайта - уроки фотошоп Нажмите Alt и на кнопку Маски слоя =Add a mask в нижней части палитры слоев. Это создаст маску, которая будет скрывать выделенную область. Потрясающе стильный шаблон сайта - уроки фотошоп Создайте круг с диаметром 20 пикселей. Чтобы создать форму с фиксированными размерами выберите инструмент Эллипс=Ellipse Tool, с настройками как на картинке ниже. Потрясающе стильный шаблон сайта - уроки фотошоп Теперь создадим новый шаблон, который мы будем использовать для заполнения фона заголовка. Потрясающе стильный шаблон сайта - уроки фотошоп В основном документе, создайте новый слой, и сделайте выделение на 60 пикселей высотой в верхней части. Потрясающе стильный шаблон сайта - уроки фотошоп Заполните это выделение и уменьшите Непрозрачность= Opacity слоя на 50% Потрясающе стильный шаблон сайта - уроки фотошоп Создайте прямоугольник 5 пикс. высоты, цвет # 506271 и поместите его в верхней части макета. Потрясающе стильный шаблон сайта - уроки фотошоп После завершения фона заголовка, мы можем добавить меню в правом верхнем углу. В уроке используется шрифт Arial и размер шрифта 13pt. Цвет текста используется синий для верхней панели. Потрясающе стильный шаблон сайта - уроки фотошоп Для логотипа, создадим Эллипс= Ellipse Tool со следующими настройками: Потрясающе стильный шаблон сайта - уроки фотошоп Потрясающе стильный шаблон сайта - уроки фотошоп Потрясающе стильный шаблон сайта - уроки фотошоп Теперь создайте новый слой Ctrl + клик на слое Эллипс, чтобы создать выделение.  Перейти к Выделение-Модификация-Сжать=Select-Modify-Contract и введите значение 4 пикселей. Возьмите инструмент Градиент=Gradient Tool и создайте градиент перехода от белого к прозрачному. Нажмите Ctrl + D, чтобы снять выделение и уменьшите Непрозрачность= Opacity слоя до 40%. Потрясающе стильный шаблон сайта - уроки фотошоп Мы можем добавить текст и поместить наш логотип в эллипс. Для текста используется Anivers, но вы можете использовать свой. Кроме того, чтобы дать больше глубины тексту, можете дублировать слой, поставить его ниже оригинала и изменить его цвет на белый. Затем нажмите один раз стрелку вправо и один раз вниз, чтобы передвинуть белый текст. Потрясающе стильный шаблон сайта - уроки фотошоп Пришло время добавить название нашему сайту. Это первое, что будет привлекать внимание посетителей, поэтому нужно, написать здесь наиболее важную информацию о сайте. Потрясающе стильный шаблон сайта - уроки фотошоп В уроке используются комбинации из 3 шрифтов: Chunk вы можете скачать его здесь для верхнего текста, Anivers для нижней и Габриэль на 2 детали (амперсанд и запятую). Потрясающе стильный шаблон сайта - уроки фотошоп Для амперсанда и запятой используется тот же цвет, как и меню # 506271, а основному тексту, добавим стиль слоя. Потрясающе стильный шаблон сайта - уроки фотошоп Потрясающе стильный шаблон сайта - уроки фотошоп Потрясающе стильный шаблон сайта - уроки фотошоп Дублируйте слой с текстом и переместите дублированный слой ниже оригинального. Удалим  все стили слоя и добавим только Наложение цвета=Color overlay . Активируйте инструмент Перемещение=Move tool, нажмите один раз стрелку вправо и один раз вниз. Теперь щелкните правой кнопкой мыши на слое и выберите пункт Растировать слой=Rasterize Type. Ctrl + клик на оригинальный слой текста, чтобы создать выделение, и нажмите Удалить. Заголовок завершен. Сгруппируйте  все его слои и назовите эту группу Заголовок. Потрясающе стильный шаблон сайта - уроки фотошоп Первое, что нужно сделать, это создать разделение. Для этой цели мы будем добавлять текст и 2 линии. Шрифт, используемый для текста Arial 18 пт. Для того, чтобы в конце линия становилась тоньше,  применим Маску слоя =Add a mask. Выберите линию, нажмите кнопку, Добавить маску слоя, возьмите инструмент Градиент=Gradient tool, выберите градиент, переход от белого, к черному и перетащите вдоль линии. Потрясающе стильный шаблон сайта - уроки фотошоп Еще раз дублируем слой и ставим ниже. После измените, цвет на белый, чуть сдвинем текст,  вправо и  вниз, изменим Непрозрачность= Opacity на70%. Потрясающе стильный шаблон сайта - уроки фотошоп На данный момент мы должны создать контейнеры для наших изображений. Инструментом Прямоугольное выделение=Rectangle tool создадим прямоугольник 220 × 194 пикс. Потрясающе стильный шаблон сайта - уроки фотошоп Давайте применим некоторые стили слоя для прямоугольника. Потрясающе стильный шаблон сайта - уроки фотошоп Потрясающе стильный шаблон сайта - уроки фотошоп Дублируйте прямоугольник и переместите ниже оригинального слоя. Удалите  все слои стилей и добавьте только Наложения цвета=Color overlay. Нам нужно создать мягкие тени для контейнера. Растрируем= Rasterize Type дублированный слой (правой кнопкой мыши на Слой-Растрировать=Layer-Rasterize) и перейдите к Редактирование-Транформирование-Деформация=Edit-Transform-Distort. Переместим верхнюю, левую опорную точку в нижний угол, как показано на картинке ниже. Потрясающе стильный шаблон сайта - уроки фотошоп Примените Размытие по Гауссу=Gaussian Blur (Фильтр-Размытие-Размытие по Гауссу=Filter-Blur-Gaussian Blur) с радиусом 4 пикселя. Потрясающе стильный шаблон сайта - уроки фотошоп Теперь возьмите инструмент Ластик=Erase, и используя большую, мягкую кисть,  сотрите ненужные части тени и уменьшите немного Непрозрачность=Opacity Потрясающе стильный шаблон сайта - уроки фотошоп Создайте новый слой. Ctrl + клик на контейнере, чтобы создать выделение и залейте его темно-коричневым цветом # 64594d. При еще активном выделении, перейдите в Выделение-Модификация-Растушёвка=Select-Modify-Contract и введите значение 1px. Мы создали внутреннюю полосу. Потрясающе стильный шаблон сайта - уроки фотошоп Теперь вы можете создать несколько контейнеров и поместить в них изображения. Выделить все слои, сгруппировать их и назвать эту группу Галерея. Потрясающе стильный шаблон сайта - уроки фотошоп Мы почти закончили ;-). Для того, чтобы создать разделение между контейнерами и нижней частью макета, просто дублируйте изображение заголовка фона и переверните его вертикально, для этого перейдите Редактирование-Трансформирование-Отразить по вертикали=Edit-Transform-Flip Vertical. Измените цвет на синий  # 506271 и установите Непрозрачность=Opacity на 100%. Также создадим прямоугольник того же цвета, и поместим ниже. Потрясающе стильный шаблон сайта - уроки фотошоп Для того чтобы сделать текстурированный фон, закрасим его немного Кистью=Brush гранж с низкой прозрачностью. Потрясающе стильный шаблон сайта - уроки фотошоп Теперь разделим наш макет на 3 секции: Обратная связь, связаться со мной и Twitter. Шрифт Arial 18 пикс. Потрясающе стильный шаблон сайта - уроки фотошоп В первом разделе мы поместим контактную форму. Так что создайте прямоугольник, который будет полем для ввода имени. Потрясающе стильный шаблон сайта - уроки фотошоп Давайте добавим стили слоя, чтобы создать красивый эффект. Потрясающе стильный шаблон сайта - уроки фотошоп Потрясающе стильный шаблон сайта - уроки фотошоп Потрясающе стильный шаблон сайта - уроки фотошоп Добавьте еще два поля как на картинке ниже. Потрясающе стильный шаблон сайта - уроки фотошоп В центральной нижней части, мы просто добавим ссылки на некоторые социальные закладки. Рядом поставим хорошие Гранж иконки, которые вы скачали в начале укрока. Я надеюсь, вы открыли для себя что-то новое и интересное. Потрясающе стильный шаблон сайта - уроки фотошоп С правой стороны добавим еще одно поле контакта. Также добавим значок Twitter: Потрясающе стильный шаблон сайта - уроки фотошоп   Потрясающе стильный шаблон сайта - уроки фотошоп Почти все. Последнее, что нужно добавить это авторские права. Теперь вы можете выделить все слои, связанные с нижней частью, сгруппировать их и назвать эту группу Низ. Потрясающе стильный шаблон сайта - уроки фотошоп Автор: Sebastiano Ссылка на источник: http://wegraphics.net/

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

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