|
Данный форум является архивом сайта www.eestimamki.ee
|
Урок №15 (1. курс)
| |
| PARTYzanochka |
Дата: Воскресенье, 22.01.12, 13:24:38 | Сообщение № 1 |
Группа: Удаленные
|
Юзерба́р (англ. userbar) — графическое изображение, предназначенное для размещения в подписи на веб-форумах, интернет-конференциях и других средствах интернет-общения. Основной целью размещение картинки-юзербара является выражение каких-либо убеждений, пристрастий, увлечений, привязанностей и даже черт характера пользователя. Встречаются также и юзербары, заявляющие об обратных чувствах своего владельца: антипатию, ненависть к какому-либо предмету действительности. Однако это явление, получившее английское название haterbar (от англ. hater — ненавистник), является маргинальным и не получило распространения в большинстве интернет-сообществ, занимающихся созданием и распространением пользовательских картинок.
И так открываем Photoshop и создаем файл размером 350 X 19 pixels (NB! В этом уроке делаем Юзербары ТОЛЬКО такого размера!)
Перед нами появилась абсолютно чистая картинка. Давайте дадим ей градиент. Проваливаемся в Layer-> New Fill Layer -> Gradyent.
Должно появится следующее меню:
Нажимаем на Gradyent и выбираем подходящие нам цвета. Затем жмем ОК.
Наша картинка должна иметь следующий вид:
Также мы можем похимичить с настройками. Например, если поставить Scale = 150, то переход из цвета в цвет будет более плавным.
Если поставить Angle = 0, то наша картинка будет выглядеть вот так:
Давайте поэкспериментируем и создадим вот такой фон:
Для этого ставим style: Linear, Scale: 150 и ставим галочку "Reverse"
Для тех, кто что-то не понял, посмотрите на нижний рисунок
Теперь, создав подходящий нам узор, добавим полоски или узоры.
Для того чтобы создать узор, нам необходимо создать новый файл с следующими настройками:
Затем нарисуем узор в виде полосы. Для этого увеличиваем масштаб (Ctrl + "+" несколько раз) в несколько раз и карандашом (Pencil Tool) рисуем диагональную полоску
Далее нажимаем Edit -> Define Patern -> даем имя фону.
Теперь переключаемся к нашему старому рисунку и создаем в нем новый слой.
Затем заливаем им наш фон из рисунка 1. Для этого выбираем Paint Bucket Bucket Tool, в верхнем меню ставим "Pattern" и выбираем наш узор.
Должно получится, что то вроде этого:
Теперь давайте сделаем его более прозрачным. Для этого, в панели слоев ставим Opacity ~ 30 - 40 % на ваше усмотрение.
Однако юзербары, с таким узором видны почти везде, поэтому советую поэкспериментировать в этом плане. Ниже приведу несколько результатов экспериментов:
Как видите, картинки получаются весьма разнообразными.
Также вы можете поменять сам цвет вашего узора, в случае, если он не подходит к фону.
Например, у нас такой фон:
На таком фоне будет трудно что-либо увидеть. Зато к нему идеально подходит белый узор.
Для этого заливаем также, как было расписано ранее, и проделываем некоторые операции:
В окне Layers щелкаем правой кнопкой по слою с узором и выбираем пункт "Blending Options"
Далее по знакомому нам способу выбираем Opacity и получаем что-то вроде этого:
Также, если хочется, то можно поэкспериментировать с вкладкой Gradient Overlay (ниже Color Overlay), иногда можно добиться интересных эффектов, придать нашему узору блеск. Принцип, такой же, что в начале.
Вот что получилось из вышеуказанного юзербара:
Выбрав подходящий фон и узор, ставим картинку.
1. Я выбрала новогоднюю картинку, перенесла на мой юзербар и продублировала рисунок.
2. Написала надпись.
3. Потом создала новый слой. Для этого нажимаем Ctrl + Shift + N.
4. Затем берем инструмент "Овальная область" (По умолчанию "М"), и выделяем примерно так как на скрине.
5. Заливаем выделенныю область белым цветом.
6. Ставим Opacity на 30 % или как вам будет виднее.
Потом я решила сделать анимацию. Для этого продублировала слой с надписью. В одном слое "обводка" (STROKE) у меня 1 пиксель, во втором - 2.
Переходим в ImageReady и делаем анимацию из 2 кадров - (с разной обводкой в тексте).
Секунды поставила на кадрах как 0.1 сек
Всё мой юзербар готов. А ваш?
Можно поиграть с Opacity белой овальной заливки. Например, здесь у меня один слой Opacity 30%, другой - 40.
В уроке использовались материалы с сайта Луганский молодежный портал и урок 2008 года СеРгЕеВны.
Ваша задача сделать 5 юзербаров, один из которых (минимум один) должен быть о нашем сайте.То есть юзербар с надписями eestimamki, Мамочки Эстонии итп.. Срок - 29.01.2012 (включительно).
|
|
|
|
|
| PARTYzanochka |
Дата: Воскресенье, 22.01.12, 13:25:12 | Сообщение № 2 |
Группа: Удаленные
|
Вот некоторые работы с прошлого года:
- oravka
- Yuli
- Katia
- reolina
- belena
Юзербары наших учениц можно посмотреть здесь:
http://eestimamki.ee/forum/91-4238-1
Еще юзербары наших форумчанок здесь:
http://eestimamki.ee/load/
перевод типов градиента:
Линейный градиент (Linear Gradient) – переход осуществляется по прямой линии вдоль определённого направления.
Радиальный градиент (Radial Gradient) – изменение цвета равномерно во все стороны от центральной точки.
Конусовидный градиент (Angle Gradient) – переход цвета по кругу с центром в заданной точке по часовой стрелке.
Зеркальный градиент (Reflected Gradient) – два линейных градиента, которые распространяются от начальной точки в противоположных направлениях.
Ромбовидный градиент (Diamond Gradient) – образующие линии выстраиваются в виде ромба.
от sentsja
Если вы хотите чтобы буквы у вас мигали быстрее , а картинка двигалась чуть медленнее , то вам нужно сделать так
(в уголке на написано 0,2 сек, значит каждая буква у вас будет мигать через 0,2 сек , а жираф будет перемещаться через 0,4 сек) )
       
|
|
|
|
|
| PARTYzanochka |
Дата: Воскресенье, 22.01.12, 13:25:49 | Сообщение № 3 |
Группа: Удаленные
|
делаем градиент "нужного" цвета
Выбираем здесь:
Затем выскакивает такая табличка, в ней в окошке цвета написано NONE
Дальше выскакивает эта табличка:
Цвета здесь тоже серые, как у вас. Нажимаем мышкой на палитру цветов (можно нажать и на стрелочку, но тогда выйдет просто табличка имеющихся градиентов, а если нажимаем на цвет, то выходит Gradient Editor).
Здесь либо выбираем уже готовый градиент, либо создаем свой (это будете учить подробно на 2-м курсе, сейчас это рассматривать не будем).. Если выбрали готовый градиент, нажимаем ОК.. по идее, все должно сохраниться. 
Еще легкий способ, чтоб градиент изначально был не серо-белый. Скорее всего, у вас сейчас в красках такой цвет:
И в градиенте выходит так:
Теперь поменяем цвет в красках:
И в градиентах будет так:
Как видим, зеленый у нас переходит не в желтый, а в прозрачный.. это от того, что в настройках второй квадратик стоит с 0-ой прозрачностью (помните, в скринах этого урока было указано, какой квадратик что значит). Вот наш "прозрачный" квадрат:
Надо поменять его на непрозрачный. Для этого жмем в середину квадратика (цифра 1). Внизу активируются окошки, в окне Opacity ставим 100% (цифра 2). Если заметили, квадратик из белого стал черным.. Нажимаем ОК (цифра 3).
Все, теперь градиент зелено-желтый.
|
|
|
|
|
| kuzjoma |
Дата: Воскресенье, 22.01.12, 15:17:12 | Сообщение № 4 |
Группа: Удаленные
|
первая попытка 
|
|
|
|
|
| PARTYzanochka |
Дата: Воскресенье, 22.01.12, 15:32:21 | Сообщение № 5 |
Группа: Удаленные
|
Quote (kuzjoma) первая попытка
Неплохая попытка =)))
|
|
|
|
|
| kuzjoma |
Дата: Воскресенье, 22.01.12, 15:37:42 | Сообщение № 6 |
Группа: Удаленные
|
Quote (PARTYzanochka) Неплохая попытка =)))
можно оставить?
|
|
|
|
|
| PARTYzanochka |
Дата: Воскресенье, 22.01.12, 15:38:46 | Сообщение № 7 |
Группа: Удаленные
|
kuzjoma, да, конечно же.
|
|
|
|
|
| Натусик |
Дата: Воскресенье, 22.01.12, 15:52:34 | Сообщение № 8 |
Группа: Удаленные
|
зх....фантазия нужна, а она плохая..ну буду чтото выдумывать...
а какого размера должны быть картинки, я их уменьшаю и они очень плохого качества получаются 
Сообщение отредактировано Натусик - Воскресенье, 22.01.12, 16:07:48 |
|
|
|
|
| PARTYzanochka |
Дата: Воскресенье, 22.01.12, 16:24:24 | Сообщение № 9 |
Группа: Удаленные
|
Quote (Натусик) а какого размера должны быть картинки, я их уменьшаю и они очень плохого качества получаются
Брать, конечно, лучше меньше среднего размера, совсем маленькие и их всё равно придется еще уменьшать до нужного тебе размера.
|
|
|
|
|
| Натусик |
Дата: Воскресенье, 22.01.12, 16:41:50 | Сообщение № 10 |
Группа: Удаленные
|
ну вот чтото такое
п.с. а меньше среднего это 100х200 или еще меньше?
и как дублировать картинку, чтоб она была внутри слоя...
Сообщение отредактировано Натусик - Воскресенье, 22.01.12, 16:43:56 |
|
|
|
|
| -=alexia=- |
Дата: Воскресенье, 22.01.12, 16:55:40 | Сообщение № 11 |
Группа: Удаленные
|
|
|
|
|
|
| PARTYzanochka |
Дата: Воскресенье, 22.01.12, 17:58:54 | Сообщение № 12 |
Группа: Удаленные
|
Натусик, а чего у тебя с размером юзербара?  Что-то он слишком большой у тебя  Но может быть мигание сделать помедленнее?
Quote (Натусик) п.с. а меньше среднего это 100х200 или еще меньше?
Можешь такие брать, можно и меньше.
Quote (Натусик) и как дублировать картинку, чтоб она была внутри слоя...
Можно продублировать слой ctrl+j и соединить с тем слоем, в котором ты хочешь 2 одинаковые картинки.
-=alexia=-, всё хорошо.
|
|
|
|
|
| roksana2000 |
Дата: Воскресенье, 22.01.12, 18:09:56 | Сообщение № 13 |
Группа: Удаленные
|
Сообщение отредактировано roksana2000 - Вторник, 24.01.12, 06:24:30 |
|
|
|
|
| Натусик |
Дата: Воскресенье, 22.01.12, 18:29:39 | Сообщение № 14 |
Группа: Удаленные
|
Quote (PARTYzanochka) с размером юзербара
ну у тебя про пиксели сказано только в скрине, ну я и забила мм..потом уже когда выставила увидела, что чтото не то
|
|
|
|
|
| PARTYzanochka |
Дата: Воскресенье, 22.01.12, 18:31:29 | Сообщение № 15 |
Группа: Удаленные
|
roksana2000, 1 и 3 хорошо. У 2ой шрифт другой или цвет другой, не разобрать особо + время добавь немного. У четвертой тоже время добавь когда "желто-синий...". У 5ой работы ты видимо со слоями в анимации перепутала что-то, у тебя когда идет рука спанч боба, то она там "дергается"
|
|
|
|
|
| PARTYzanochka |
Дата: Воскресенье, 22.01.12, 18:34:10 | Сообщение № 16 |
Группа: Удаленные
|
Quote (Натусик) ну у тебя про пиксели сказано только в скрине, ну я и забила мм..потом уже когда выставила увидела, что чтото не то
Пойду добавлю и в текст еще про пиксели
|
|
|
|
|
| Натусик |
Дата: Воскресенье, 22.01.12, 18:53:25 | Сообщение № 17 |
Группа: Удаленные
|
чтото у меня с картинками не получается.....уже десяток перебрала, после уменьшения кошмар становится
|
|
|
|
|
| PARTYzanochka |
Дата: Воскресенье, 22.01.12, 19:36:06 | Сообщение № 18 |
Группа: Удаленные
|
Натусик, покажи какой "кошмар"? Может не всё так и плохо.
|
|
|
|
| |
| roksana2000 |
Дата: Понедельник, 23.01.12, 00:12:00 | Сообщение № 20 |
Группа: Удаленные
|
Добавлено (22.01.12, 23:29:31)
---------------------------------------------
Добавлено (23.01.12, 00:12:00)
---------------------------------------------
Сообщение отредактировано roksana2000 - Вторник, 24.01.12, 06:19:07 |
|
|
|
|
|
|
