Все для Веб-Дизайна

Создаем эффект деревянного текста в Photoshop.

myarts — Mon, 24 Jan 2011 15:11:12 GMT

Вот пример финального изображения этого урока:

Начнем.

Для выполнения данного урока вам понадобятся следующие материалы:

Изображение дерева

Текстура природы

Шрифт

Гранж кисти

Шаг 1

Создайте новый документ с размерами 700px*1000px с белым фоном. Далее добавьте немного текстур с помощью кистей, которые вы скачали: (вы можете использовать любые кисти, не обязательно предоставленные)

Выберите кисть "chalk" (она у всех стандартная), и установите цвет кисти на светло-коричневый и нарисуйте немного "земли", как показано на рисунке ниже:

Шаг 2

Загрузите изображение с лесом в фотошоп, и сделайте выделение, как показано ниже:

Скопируйте и вставьте выделение в наш документ, и откорректируйте перспективу с помощью "free transform tool":

Идем в Filter > Artistic > Cutout и применяем следующие настройки для нашей текстуры земли:

Далее стираем края текстуры мягкой кистью:

Шаг 3

Используйте шрифт, который вы скачали и напишите любую букву:

Примените следующие параметры слоя к слою с текстом:

Bevel and Emboss

Gradient Overlay

Опять возьмите кисть "chalk":

Используйте "eraser tool" - "chalk", и сотрите края текста:

вот что у вас должно получиться:

Шаг 4

Загрузите изображение дерева в фотошоп, используйте "Quick Selection" для выделения указанной области:

Скопируйте и вставьте изображение на нашу букву:

Опять возвращаемся к изображению с деревом и проделываем данную операцию, пока полностью не покроем букву.

Используйте "Warp Tool" чтобы откорректировать форму дерева, по форме буквы:

Используйте мягкую кисть, чтобы стереть края:

Осторожно нарисуйте тень под текстом с помощью мягкой черной кисти, используйте "Free Transform tool", что редактирования размеров, если это
необходимо:

Шаг 5

Я решил использовать свои цвета для этого изображения. Так что я добавил корректирующий слой - "black and white image adjustment layer" поверх всех слоев:

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

Также добавим "Curves adjustment layer" поверх остальных слоев:

Добавим маску слоя на "Curves adjustment layer":

Используйте кисти которые вы скачали, чтобы нарисовать немного брызгов вокруг краев теста:

Создайте новый слой и используйте темно-зеленую (или желтую) кисть 20% для flow и opacity, рисуйте поверх областей указанных ниже:

Шаг 6

Мы почти закончили. Я решил добавить немного жесткости изображению. Для этого соедините все слои (убедитесь что перед этим вы сохранили свой документ со всеми слоями) и дублируйте слой "background", применяем фильтр "Reduce Noise filter" к дублированому слою:

Снизьте непрозрачность слоя к 80%, далее добавьте корректирующий слой "image adjustment layers" поверх остальных слоев.

Levels

Добавим маску слоя к "Levels adjustment layer"

Curves

Colour Balance

Маска слоя для "Colour Balance layer":

Для большей глубины изображения, используем инструменты dodge и burn tool ( around 20% exposure) как показано ниже:

Финальное изображение.

И напоследок: всегда старайтесь использовать разные стили смешивания "blending modes" и увидите, что у вас получится) Иногда получается очень круто)

Создаем абстрактную туманность

myarts — Sat, 15 Jan 2011 15:07:20 GMT

Для выполнения следующего урока, вам понадобятся следующие материалы:

Nebula texture

Шаг 1

Создайте новый документ с размерами 800px * 1080px, с темно-серым фоном и нарисуйте начальный
круг на новом слое.

Используйте Lasso Tool, значение параметра feather - 30px и нарисуйте выделение. Выберите темно-фиолетовый цвет, и добавьте немного облаков (render clouds).

Сожмите облака в тонкую полоску с помощью "warp tool" как показано на рисунке ниже:

Применить фильтр Twirl, чтобы она выглядела как полукруг:

Сотрите ненужные части и прикрепите его у нашему кругу как показано на рисунке ниже:

Дублируйте слой несколько раз, поворачивайте и изменяйте их размеры, чтобы они отличались от оригинального слоя. Потом залейте черным цветом наш ИЗНАЧАЛЬНЫЙ фон документа.

Шаг 2

Загрузите "nebula texture" в фотошоп, используйте Lasso Tool, значение параметра feather - 30px, чтоюы выделить часть:

Скопируйте выделение и вставьте его в наш документ. Используя "warp tool" придайте ему следующую форму:

Используйте фильтр "liquify" (Shift + Ctrl + X), используйте следующие настройки:

Apply it to the position shown below:

вот, что у вас должно получиться:

Дублируйте слой с туманностью несколько раз, изменяйте их размеры и расположите вокруг круга, как показано ниже:

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

вот, что получится:

Используйте мягкую кисть, что бы избавиться от грубых краев, если это необходимо.

Шаг 3

Нарисуйте выделение еще раз, используя Lasso Tool (30px feather), добавьте облаков внутри и нажмите сочетание клавиш Ctrl + L и примените следующие настройки:

Примените фильрт liquify к облакам

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

Приложите этот слой к кругу, также дублируйте несколько раз и рассейте их вокруг:

Шаг 4

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

Вы так же должны соединить слои под группой, и снизить их прозрачность.

Вы можете нарисовать немного звезд вокруг. Кисти со звездами вы без труда найдете в интернете.

Шаг 5

Я решил использовать альтернативные методы придания цвета изображению. Поэтому я добавил три корректирующих слоя.

Black and White:

Curves:

Color Balance:

ожидаемый эффект)

Шаг 6

Мы почти закончили. Для финального эффекта, я соединил изображения и дублировал слой, потом применил "Reduce Noise filter" :

Теперь используем "dodge" и "burn tool" чтобы добавить контрастности и теней вокруг изображения, как показано ниже:

Финальное изображение:

Если вас интересует судьба сайта...)

myarts — Fri, 07 Jan 2011 00:12:00 GMT

Начнем с главного. Причиной такой резкой и радикальной смены дизайна и содержания сайта, являетесь вы, дорогие посетители, о существовании которых, до недавнего времени, я не знал совершенно. Оказывается, у этого сайта около 400 уникальных хостов в месяц...ну хоть так. Меня очень удивило, что сюда кто-то заходил постоянно, ток как на нем не было ничего, кроме скриптов. Я рад, что за короткий период, после обновления, количество хостов увеличилось. Ради вас в общем-то и старался. Но есть маленькая проблема...
Сайт обновился, а посетители молчат. Тихо качают и молчат. ГРАЖДАНЕ! будете молчать, я опять оставлю этот сайт на 3 года. Вон и "Гостевая книга" висит) своего рода, жалоб и предложений, а вы... Частота и качество обновления материала, зависит тоже от вас, так как я хотел бы почувствовать присутствие посетителей не только на счетчике. Было бы неплохо увидеть вас на форуме и в гостевой.

Далее. На данный момент, контент сайта, уже более относится к теме веб-дизайна. Поэтому PHP скриптов и прочего в этом роде вы не найдете. Шаблонов не будет. Не знаю кому они и до этого были нужны.
На пробу было ПЕРЕВЕДЕНО несколько уроков...тишина. Для кого я это...Короче так, на сайте тишина-материалов нет.

Отдельная просьба для постоянных посетителей. В продвижении сайта, должен участвовать не только я, хотя бы потому, что денег я с него зарабатывать не собираюсь. Поэтому от любого рода помощи я не откажусь и речь не о деньгах.
В конце-концов киньте ссылку другу. Или в каком-нибудь контакте на стене повесьте, если это конечно не осквернит ваши уникально-прекрасные страницы)

Для тех, кто хочет помочь. Нужны модераторы на форум, и желающие переводить уроки если в этом будет потребность. Способ связи, далее.

ОБРАТНАЯ СВЯЗЬ : a_priori06@mail.ru (асек, контактов, одноклассников, твитеров, ЖЖ нету)

Жду жалоб и предложений. Очень жду.

Создаем пылающий метеорит.

myarts — Wed, 05 Jan 2011 06:56:33 GMT

Финальное изображение

Для выполнения данного урока, вам понадобятся следующие материалы:

Sky
City
Rock
Dirt Brush

Шаг 1

Создайте новый документ с размерами 1440*900px, залейте фон черным цветом. Загрузите изображение неба в фотошоп и выберите область, как на рисунке ниже.

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

Добавьте следующие параметры слоя (adjustment layers): clipping mask к слою с небом.

Black and White

Channel Mixer

Curves

Levels

Сотрите верхнюю часть неба, и вот, что у вас получится:

Шаг 2

Загрузите фото города в фотошоп, сделайте выделение как показано на рисунке ниже (используйте quick selection tool)

Вставьте город в наше изображение, измените размеры соответственно.

Добавляем параметры слоя: clipping mask

Black and white

Channel Mixer

Levels

Добавляем маску слоя на Levels adjustment layer:

Используем мягкий ластик малого размера, и стираем верхушки зданий, как показано на рисунке ниже:

Высотка 1

Высотка 2 и высотка 3

Вот, что мы получили:

Шаг 3

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

Opacity слоя с небом, ставим на 50%

Black and White

Channel Mixer

Curves

вот, что мы получили:

Шаг 4

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

Вставьте выделение в наше изображение, примените sharpen filter,

Стираем края камня, мягким ластиком:

В данном случае к слою с камнем, была применена маска слоя, где смешали и ластик и кисти Dirt Brush.

Применяем следующие параметры слоя к нашему камню:

Outer Glow

Inner Glow

вот. что у вас должно получиться:

Шаг 5

Мы почти закончили. Теперь мы можем добавить деталей нашему метеориту, добавив немного туч вокруг него. Обязательно используем warp/distort

Вы можете добавить еще несколько камней на изображение, как описано в предыдущих шагах

Теперь можем создать немного облаков с помощью cloud filter, или использовать кисти с облаками, чтобы нарисовать немного дыма с облаками перед высотками.

Используйте гранж-кисти, которые вы скачали:

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

Добавим корректирующий слой поверх остальных colour balance adjustment layer

Добавим маску слоя к colour balance layer и увеличим глубину изображения (мы же не хотим, чтобы все изображение было красным)

После добавления colour balance layer, вы увидите, как дым и облака. которые мы добавляли раньше, приняли требуемый эффект:

Финальный эффект!:

Создание Гранж-кровавого текста в Photoshop.

myarts — Fri, 31 Dec 2010 15:41:59 GMT

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

Начнем.

Для выполнения данного урока, вам понадобится следующие материалы.

Font (optional), вы можете использовать любой шрифт.

Crack Brush

Smoke Brush

Splatter Brush

Шаг 1

Создайте новый документ (размер не имеет значения), с белым фоном, используйте crack brush и закрасьте светло-серым цветом.

Создайте новый слой, установите прозрачность на 30%, опять используем crack brush, что бы закрасить некоторые области темно-красным цветом.

Шаг 2

Используйте шрифт, который вы скачали, или свой, и напишите любой текст.

Примените следующие настройки для слоя с текстом.

Drop Shadow

Inner Shadow

Inner Glow

Bevel and Emboss

Gradient Overlay

Вот, что у вас должно получиться

Шаг 3

Создайте новый слой над текстовым слоем, используйте splatter brush, которые вы скачали, выберите малый размер кисти, цвети- темно-красный и нарисуйте немного крови перед текстом.

Используйте Lasso Tool, значение feather 40-50px, нарисуйте выделение вокруг текста, и примените render clouds.

Сожмите все это, как показано на рисунке ниже, с помощью Free transrorm.

Измените тип наложения слоя с тучами, на color burn.

Дублируйте этот слой несколько раз, вы увидите, как он будет темнеть.

Вы также можете изменить размер слоя с тучами или сделать их вертикальными, поместите его слева от текста (тип наложения слоя по прежнему color burm)

Add some vertical cloud to the right side of the text as well:

Вот, что у вас должно получиться.

Шаг 4

Создайте новый слой поверх остальных, используйте smoke brush, что бы нарисовать текстуру, как показано на рисунке ниже. (так же вы можете добавить немного broken brush вокруг текста)

Идем в adjustment layers и применяем следующие настройки

Levels

Маска на Levels adjustment layer: (используйте Gradient Fill)

Curves

Color Balance

Вот, что у вас должно получиться: