Рубрика: Photoshop Уроки | Урок прочитали: 877
 (голосов: 1)

Делаем шапку для сайта в Фотошоп

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


Лично я вижу тенденцию к увеличению внимания к заголовкам для сайта/блога.


Во время урока мы будем практиковать использование Инструмента Перо (Pen Tool), различных вариантов регулирования изображения (adjustment), инструмента свободного трансформирования (free transformation), стилей наложения слоя (blending styles) и фильтры  (filter). Надеюсь, вы будете наслаждаться уроком!


Вот предварительный просмотр моих окончательных результатов:


" width=


" width=


" width=


" width=


Итак, начнем!


Шаг 1. Создайте документ размером 1200 x 600 пикселов (Обратите внимание, что вы можете задать любой размер, который вы считаете подходящим для дизайна вашего сайта, этот размер может быть использован только для практической цели). Заполните фоновым цветом с черным.


Создайте новый слой  Заливка Радиальным Градиентом  и используйте Градиент " width= (Gradient Tool) (G), выберите опцию Радиальная заливка (Radial Fill), и заполните вновь созданный слой, как показано ниже: (Вы можете использовать любой цвет, который хотите).


" width=


Затем создайте новый слой и назовите  Заливка Угловым градиентом выше слоя  Заливка Радиальным Градиентом, установите режим наложения перекрытие (overlay)


Используйте инструмент Прямоугольная область " width= (M) (Rectangular Marquee Tool), чтобы выбрать центральную часть слоя, снова использовать Градиент (" width= Gradient Tool) (Установить цвет переднего плана  белый, с прозрачным фоном), на этот раз мы выбираем опцию Угловой градиент (Angle Gradient), заполните выделение как показано ниже:


" width=


Шаг 2. Копируйте слой Заливка Радиальным Градиентом один раз и выберите режим наложения (blending option) дублированного слоя Перекрытие (Overlay), перейдите к Правка> Трансформация> Повернуть (Edit > Transform > Flip Horizontal) по горизонтали и поверните слой горизонтально. Слейте два слоя вместе. Установите режим наложения (blending option) Перекрытие (overlay) после слияния.


Примените Стиль слоя - Тень (Drop Shadow) к слою слияния, как показано ниже:


" width=


Затем уменьшите непрозрачность для слоя Заливка Радиальным Градиентом до 60% и у вас будет следующий эффект:


" width=


Затем создайте новый слой между предыдущими двумя слоями, назовите его Освещение центра. Выберите большую мягкую круглую кисть " width= (600px в моем случае), выберите цвет переднего плана белый, и нарисуйте одну точку в центре слоя:


" width=


Установите режим наложения  Перекрытие (Overlay) и вы получите следующий эффект:


" width=


Шаг 3. Я решил добавить  этому изображению немного глубины и немного трехмерности. Итак, выберите слой Заливка угловым градиентом, нажмите Ctrl + T и используйте Свободную трансформацию (free transformation), выберите Перспективу (perspective) и преобразуйте слой, как показано ниже: (уменьшите ширину для верхней границы рамки)


" width=


Вот результат после перспективе слоя:


" width=


Шаг 4. Создайте новый слой Сверкающая линия, используйте инструмент Перо " width= (Pen Tool), чтобы создать работу, как показано ниже:


" width=


Затем щелкните правой кнопкой мыши и выберите Обводка контура (Stroke Path) и выберите Кисть " width= (brush) (перед этим выберите мягкую круглую кисть маленького диаметра). Убедитесь, что у вас включена опция Имитировать нажим.


Вот как должно выглядеть сейчас:


" width=


Шаг 5. Дублируйте слой Сверкающая линия  несколько раз, используйте функцию Свободная трансформация (Free Transformation), чтобы вращать, искажать, изменять размеры дублированного слоя и смешивать линии вместе:


" width=


Слейте эти дублированные слои вместе и дублируйте получившийся слой несколько раз, снова используйте Свободную трансформацию (free transformation), чтобы добавить еще несколько линий на изображении:


" width=


Дублируйте слитый слой, примените к нему фильтр Размытие по Гауссу (Gaussian Blur) радиус размытия 4 пикс.


" width=


Сейчас ваш рисунок должен выглядеть так:


" width=


Шаг 6. Создайте новый слой, назовите Сияющая точка, загрузите выделение для слоя Сверкающая линия, затем нажмите правой кнопкой и выберите пункт Образовать рабочий контур (Make Work Path):


" width=


Выберите допуск для рабочего контура (work path)  0.5 пикс. Теперь выберите мягкую круглую кисть радиусом 3 пикселя со следующими динамическими параметрами настройки кисти:


" width=


" width=


" width=


Также убедитесь, что стоит галочка  Сглаживание (Smoothing).
На слое Сияющая точка, сделайте обводку контура этой кистью, и вы увидите следующий эффект:


" width=


Шаг 7. Теперь мы можем добавить немного облака/дыма у основания этих линий. Чтобы сделать это, мы просто создаем новый слой и используем Инструмент Лассо " width= (Lasso Tool) с растушёвкой 40 пикселей, чтобы выбрать нижнюю часть этих ярких линий, и используйте  Фильтр > Рендеринг > Облака, создайте облако (выберите цвет переднего плана белый, заднего -  черный)


" width=


Вы можете заметить, что я также использую фильтр Блик  (Filter > Render > Lens Flare ) со следующими параметрами настройки, чтобы выдвинуть на первый план часть центра облака:


" width=


Выберите Режим наложения (blending option) Перекрытие (overlay) и вы получите такой эффект:


" width=


Наконец, мы помещаем имя сайта и навигацию на изображении:


" width=


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


Вот мое заключительное изображение для этой обучающей программы:


" width=


Альтернативные версии:


" width=


" width=


Надеюсь, что вам понравился урок!


Перевод: Акименко Алевтина
Ссылка на источник

           

Похожие файлы и публикации:

Делаем шапку для сайта в Фотошоп
Шаг 1. Создайте новый документ размером 900 на 790 px (пикселей) и залейте фон черным цветом. Создайте новый слой и назовите его "Создание формы". Выберите инструмент  Ellipse Tool (Эллипс) (U) на панели инструментов:
Делаем шапку для сайта в Фотошоп
Шаг 1. Откройте Photoshop и создайте новый документ. Я использовал размер 2560x1440 пикселей. Затем используя Градиент (Gradient Tool (G)) залейте фон радиальным градиентом двух цветов 3d2626 и 060404.
Делаем шапку для сайта в Фотошоп
Финальное изображение
Делаем шапку для сайта в Фотошоп
В этом уроке Вы узнаете, как создать эффект серебра на тексте с нуля с использованием нескольких инструментальных средств Photoshop, различных параметров наложения, и т.д. Давайте начнем! В конце урока у Вас получится
Делаем шапку для сайта в Фотошоп
Шаг 1. Откроем изображение, я буду использовать эту картинку, так как она подходит для моей работы:
Делаем шапку для сайта в Фотошоп
В этом уроке описан очень простой способ для создания красивого светящегося искрами текстового эффекта, используя пару кистей и стилей слоя.
Делаем шапку для сайта в Фотошоп
В этом уроке вы узнаете, как создать чарующий эффект, используя узоры и маски. Давайте начнем!
Делаем шапку для сайта в Фотошоп
Шаг 1. Откройте Photoshop и создайте новый документ. Я использовал размер 2600x2600 пикселей. Залейте фоновый слой черным цветом с помощью инструмента Paint Bucket (Заливка)  (G).
Делаем шапку для сайта в Фотошоп
Создайте новый документ размером 1350 x 1000 пикселей.  Установите основной цвет #4ea6d0, а цвет фона #195081. Создайте радиальный градиент от центра документа к одному из его углов.
Делаем шапку для сайта в Фотошоп
Перед вами превью финального эффекта данного урока:
Делаем шапку для сайта в Фотошоп
Этот урок по Фотошопу покажет вам, как сделать дизайн сайта или портфолио.
Делаем шапку для сайта в Фотошоп
31 октября состоится страшный праздник "Halloween"! Какой же праздник без тыквы?
Делаем шапку для сайта в Фотошоп
В этом уроке вы узнаете, как создать стильные удивительно красивые алмазы и научитесь создавать обои из них.
Делаем шапку для сайта в Фотошоп
В этом уроке вы узнаете, как создать светящийся текстовый эффект с нуля.
Делаем шапку для сайта в Фотошоп
Несколько недель назад  мой друг поинтересовался, как создать 3D сферу в Фотошоп.  Я не знал, как это сделать, но это меня заинтриговало, так что я решил попробовать.  Я знал, что нужно использовать фильтр Сферизация, но не знал, как это сделать. Так что в этом уроке я покажу вам, как создать красивую 3D сферу в фотошопе используя основные инструменты и фильтр Сферизация.  Весь этот урок не займет более 30 минут, но техника действительно полезна, особенно для создания значков и логотипов.
Делаем шапку для сайта в Фотошоп
В этом уроке мы научимся создавать в Фотошопе иллюстрацию с брызгами, используя кисти и некоторые фильтры. Давайте начнём!
Делаем шапку для сайта в Фотошоп
Сегодня мы будем учиться создавать одежду из воды.
Делаем шапку для сайта в Фотошоп
Идите в Filter > Sharpen > Sharpen ( Фильтр – Резкость – Резкость). Назовите слой S1. Создайте новый слой под слоем S1 и воспользуйтесь инструментом Прямоугольная область (Rectangular marquee tool) для того, чтобы произвести выделение: