[МИКРОМАНУАЛ]Как делать юзербары?

[Сыр]

Не претендую на супер-пупер мануал...

Программа:

Adobe Photoshop CS 2

1)Первое что нам нужно - создать файл шириной 350 пикселей (стандарт) на N (стандартно N=20 но всё зависит от желания)

Фон выбираем прозрачный.

2)Выбираем фон. Это может быть либо какой-то цвет,либо градиент,либо ПАТЕРН(заполнение одинаковой картинкой).

Примечание: как правило для того чтобы однотонный фон выглядел хорошо его можно заштриховать полосочками.

Для этого нужно создать небольшой по размерам файл и нарисовать в нём такой рисунок,что при заполнении им получится непрерывная картинка, потом вверху нажимает Edit-->Define pattern и присваиваем нашему паттерну какое-нибудь название и сохраняем.

ВНИМАНИЕ! Заливка патерном! Выбираем слой,выделяем область,SHIFT+F5 и выбираем патерн.(если ничего не выделяем то заливается весь слой)

3)Мы создали фон. Теперь вы уже наверняка выбрали тематику юзербара.

Наверняка у вас полно картинок. Открываем одну, File-->Open-->Картинка. Выделяем нужную часть нажимаем CTR+C (копирование), переключаемся на наш юзербар и нажимаем CTR+V(вставка) (картинка поместится на новый слой), что получился бред?

-Обрежте ненужные части, выделяя их инструментом Polygonal lasso и нажимая BACKSPASE(но всё это на отдельном слое с картинкой!)

-Нужно поиграть с размерами картики, для этого преключаемся на слой с картинкой правым мышекликом по картинке выбираем Free Transform, теперь дёргая за уголки изменяем картинку(если зажимаем Shift то картинка изменяется пропорционо, если зажимаем Ctrl то можно выставить перспективу.) Чтобы получить больше точек контроля над изображением щёлкая по картинке правой кнопкой мыши нажимаем Warp(ага Варп=)), чтобы прекратить издеваться над картинкой нажмём на инструмент выделения в инструментарии... (ак же в меню правого мышеклика по картинке вы найдёте возможность переворачивать изображение.)ВНИМАНИЕ! после того как вы воспользуйтесь функцие Free Transform изображение выделится по контуру,это полезно если хотите сделать обводку(RightMouseClick-->stroke)...

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

4)Надпись.

Тут всё просто, выделяем область,шрифт,цвет, печатаем.

Теперь можно поиздеваться над текстом при помощи функции Free transform, но для это сначала кликните правой кнопокой по слою с текстом и нажмите Rasterize Layer (type), тепрь это не текст а изображение, подвластное нашей любимой функции, после издёвок обведите текст если это небходимо.

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

5)Блик. при помощи полигонального лассо выделяем бликуемую область, создаём новый слой, в этом слое заливаем выделение бликуемым цветом(белый или серый) теперь в табличке со слоями,выбираем слой с бликоми вверху изменяем параметр Opacity, и получаем разной прозрачности блик.

6)Дополненение. Что бы сделать изображение нечётким воспользуйтесь инструментом BLUR TOOL для равномерного сглаживания картинки используйте большую(очень) кисть.

Есть инструмент обратный это Sharpen tool но с ним надо быть поосторожней и он не всегда даёт нужный эффект.

Для того чтобы осветлить\затемнить изображение в разных местах (хайлайты и проливки=)) используйте Dodge\Burn Tool.

7) Как делать продвинутые патерны?

Сначала делаем сетку с четырьмя одинаковыми секциями вот так:

Потом в новом слое заливаем фоновым цветом(изображением), делаем слой с заливкой полупрозрачным.

Вставляем\рисуем изображение и произвольно размещаем на сетке.

Теперь хитрая хитрость, части рисунка попавшие в разные клетки копируем и соответственно распологаем в одной клетке. Не забудьте подогнать кусочки чтобы при совмещении они совпали.НЕ ЗАБУДЬТЕ ТАКЖЕ ВЕРНУТЬ НОРМАЛЬНУЮ ПРОЗРАЧНОСТЬ ФОНА!

Чё получилось собсна.

http://foto.rambler.ru/public/firehummer/1/m5/m5-web.jpg можно было ещё поогнать но я не успел.

8) Как делать карбон. 1) Создаём новый паттерн. ВНИМАНИЕ! Размеры 12х6. Теперь мысленно делим его на 4 равные части ( 6х3 ) верхний левый и правый нижний углы заливаем градиентом от чёрного к белому, так чтобы высветление шло к середине. (набор цветных полосочек должен быть одинаковым) Всё, Edit -> Define pattern. теперь копируем область для карбона на новый слой и обесцвечиваем её (Ctrl+Shift+U), уровни подгоняем так счтобы было похоже на чёрную блестящую поверхность(я обычно не заморачиваюсь и делаю просто чёрным). Теперь нам нужна новая картинка которая будет раза в 2-4 больше исходной (с прозрачным фоном), заливаем её карбоновым паттерном, нажав CTRL+T вверху выставляем W:50% H:50%. Потерпите осталось совсем немного. К тому что получилось применяем фильтр Distort-->Twirl на 65градусов. теперь уменьшаем текстурку ещё раз на 50%, но главное чтобы она по размеру не была меньше нужной области. Перетаскиваем текстуру на область и распологаем как хотим. (сделано при поддержке MAXItuning)

АНИМАЦИЯ.

Для анимации нам потребуется программа Adobe Image ready(можно воспользоваться и другими, например Starforce editor, но о ней позже).

Adobe Image Ready как правило поставляется в комплекте с фотошопом, так что если вы применяли на практике хоть что-то вышесказанное - он у вас наверняка есть.

Начнём, открыв свой рисунок в image ready вы увидите привычное рабочее поле, немного урезанную по сравнению с ФШ панель инструментов, слои и новое окно: frames(раскадровка)(если чего-то не хватает, исправьте это в меню вида). Теперь разберёмся, что есть что.

Слои.

Слои носят немного иную функцию чем в ФШ. Тут изменение картинки(анимация) реализуется путём изменения видимости различных слоев в какой-то момент времени по сравнению с предыдущим (на деле всё проще чем на письме). Поясню на примере, мы хотим анимацию в которой при постоянном фоне у нас будет меняться надпись, например два кадра, первый: "я люблю", второй: "вахафорумз". Нарисуем фон, откроем его в image ready теперь в двух разных документах две надписи на прозрачном фоне. Так же открываем их, перетаскиваем (мышкой, зажав CTRL) на документ с фоном (они автоматически появятся на новом слое каждая). Теперь выбирая моменты времени исправляем их видимость. Фон должен быть виден всегда, первый момент (кадр) ставим флажок видимости на слой с фоном и на слой снадписью "я люблю", остальные делаем невидимыми. Второй кадр, убираем флажок от надписи "я люблю" и ставим на надпись "вахафорумз", проверив что фон по-прежнему виден.

ВНИМАНИЕ! иногда когда мы перемещаем картинку в документ нужно подогнать её местоположение, что легко делается мышкой.

Осталос поколдовать немного в раскадровке чтобы наш гиф принял товарный вид.

Раскадровка.

Когда мы открываем документ у нас есть только один кадр, для того чтобы это исправить, нужно нажать на стрелочку в правом верхнем углу и выбрать "new frame". Теперь, переключаясь между кадрами мы можем исправлять видимость слоёв. Для того чтобы наш гиф стал зацикленым нужно выбрать параметр Every time во вкладочке внизу слева. Ну и последний штрих, выставляем задержку на каждом кадре(то сколько он будет показываться по времени за один цикл) для этого выбираем кадр и изменяем параметр времени (по умолчанию стоит 0.1 секунды, согласитесь, маловато), теперь не забудьте сохранить свои труды в формате gif.

На этом с введнием покончено, в следующий раз вас будет ждать пошаговое руководство.

Пока всё, если будут вопросы - обращайтесь=)

Надеюсь это вам поможет=)

Пример:

Изменено 19 июля, 2008 пользователем Сыр

[Baalzamon]

молодца, будем учиться :)

[OldWorld]

:) Огромное спасибо!

Плюсомёт будет-плюсану однозначно!

[castilllo]

а для тех кто не хочет мучиться, есть прога Ultimate Userbar. конечно в фотошопе можно сделать лучше...

кому надо могу скинуть, стучите в асю.

[Finrod]

Вот сцылко на урок с картинками и пояснениями :

Photoshop : http://demiart.ru/forum/index.php?showtopic=4427

Corel : http://demiart.ru/forum/index.php?showtopic=25661

Анимация userbar B photoshop+image ready : http://demiart.ru/forum/index.php?showtopic=9671

Юзайте ......

[YandexServoSkull]

Это, а шрифты какого размера использовать ?

Ыыы.. Меня поперло.. Сейчас буду часа три фигню всякую лепить..

Вот это вылезло с первого раза :

Вот это со второго =):

Опять придется рабочий стол от всякой мелочи чистить...

Изменено 3 января, 2008 пользователем Darkwing Duck

[Сыр]

Это, а шрифты какого размера использовать ?

думаю меньше десятки не нужно...

кстати ко мне можно обращаться и по поводу доп шрифтов (например рукописный как в примере №2)

Изменено 3 января, 2008 пользователем Сыр

[ANF]

:image044: :image107: :image107:

Спасибо!!!!!

[Сыр]

Вот ещё один сделал на коленке.

[castilllo]

вот прога Ultimatum Userbar.

жми сюды

[はんゆ]

перезалей на что-нить другое, ФФ, например.

[castilllo]

перезалей на что-нить другое, ФФ, например.

а оттуда же нормально качает. что тебе не нравится? и скажи че такое ФФ, тогда перезалью.

[Сыр]

Обновлено, ап!

[Teh Panda Strike]

Спасибо за гайд, щас попробую чего-нить наваять себе.

[Сыр]

И прямо сюда бросай=)

[Teh Panda Strike]

-вот че получилось.

Изменено 6 марта, 2008 пользователем Глазковыколупыватель

[Hypno Toad]

Ааааа 3.14дец!

Молодцом,я плакал. Гениально.

Изменено 6 марта, 2008 пользователем Hypno Toad

[Teh Panda Strike]

Пасиба)

буду стараться

[Сыр]

-вот че получилось.

Айс=) Над яркостью рисунка можно поработать при помощи УРОВНЕЙ (Ctrl+L) подвигай ползунки=)

Вот примерно так(а можно отдельно с картинкой играть если она одна на слое)

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

Изменено 6 марта, 2008 пользователем Сыр

[Teh Panda Strike]

Понял, спасиба.Ток в какой теме юзербары выкладывать , в этой, или в той, что прикреплена?

[Сыр]

Можно в обоих, но лучше в моей чтобы вниз не уползала=)

[Teh Panda Strike]

Ыть, вернулся к ваянию юзербаров) Вот че получилось:

Потом наверное еще ченить выложу ,хотя, в основном жуткое непотребство и сиськи^^

З.Ы.: йа не гробокоп, просто имхо тема полезная ,мб стоит как-нибудь объединить эту тему, и ту, что прибита?

З.З.Ы.: Если у кого-нибудь есть красивый арт с пре-хереси Мортарионом или Фулгримом прошу кинуть в личку.

Изменено 2 мая, 2008 пользователем Гламурный Гомункул

[Cg)M4trix]

Хороший Юзербар получился :image104:

[Askill]

народ, где находится инструмент карандаш? На панели он у меня не выведен и я не знаю где его искать =(

[Сыр]

Фууф рад что тема вернулась)

2Гламурный Гомункул

бери картинки большего разрешения и лучшего качества

2Ardeus

А тебе зачем? Нажми правой кнопкой мыши на инструмент КИСТЬ