Нижегородский Форум Друзей - Как сделать простой юзербар по простому :)

Вот и мой туториал. Все описанно очень подробно, как раз для новичков (надеюсь мастерам тоже понравится) Вобщем не буду гадать и просто начну.
Шаг первый:
[Для просмотра данной ссылки нужно зарегистрироваться]
Начинаем с самого простого. На рисунке обозначенны пункты (в звездочках)
1. Создаем новый документ. Идем в Файл -> Новый или же просто жмем Ctrl + N
В появившемся окне ставим параметры:
2. Имя: User Bar (на ваше усмотрение, прим. автора)
3. Ширина юзер бара 350 пикселей (заметьте что не сантиметров и не дюймов)
4. Высота юзербара 19 пикселей и нажимаем на кнопочку "Да" или "Ок"
Шаг второй:
[Для просмотра данной ссылки нужно зарегистрироваться]
1. У нас получается вот такая вот полосочка ^_^ (Если она вдруг очень большая, то проверьте, поставили ли вы пикселы а не сантиметры)
2. Создаем новый документ (мы уже умеем это делать, не так ли?)
Шаг третий:
[Для просмотра данной ссылки нужно зарегистрироваться]
1. Теперь ширину мы ставим 3 пикслеа...
2. ... и высоту тоже 3 пиксела
Жмем "Да" или "Ок".
3. Получаем оооочень маленький квадратик. (Большой звездочкой отмечен инструмент "Лупа" или "Увеличительное стекло", воспользуйтесь им чтобы увеличить этот квадратик до максимального размера увеличения, а именно 1600% как показанно красным прямоугольником)
Шаг четвертый:
[Для просмотра данной ссылки нужно зарегистрироваться]
Средней звездочкой отмечена кнопка "Рисования" и для того чтобы выбрать на ней "Карандаш" надо щелкнуть по этой кнопке ПРАВОЙ кнопкой мыши и выбрать нужный инструмент.
1. Итак как сказанно в небольшом предисловии сверху, выбираем карандаш
Большой звездочкой отмечен размер выбранного инструмента (в данном случае карандаша) его нужно поменять на 1 пиксель как у меня на рисунке
2. С помощью карандаша в 1 пиксель рисуем вот такую полоску
Шаг пятый:
[Для просмотра данной ссылки нужно зарегистрироваться]
1. Как показанно у меня на рисунке, мы выбираем Редактирование -> Определить узор
2. В новом окне у нас появится имя нашего файла ("Полосочки" в моем случае) его можно поменять по вашему усмотрению.
Жмем "Да" или "Ок" соглашаясь со всеми всплываемыми окнами (если таковые появятся)
Шаг шестой:
[Для просмотра данной ссылки нужно зарегистрироваться]
1. Файл -> Открыть и этим все сказанно. Или же просто Ctrl+O
2. Вводим адрес картинки которую вы хотите видеть на своём будующем юбаре, или же двойной щелчок по ней (отмеченно красным) (В моем случае это Хью Лори) (Желательно брать картинку побольше для начала, потипа обоев или такого рода)
Жмем "Открыть" (отмеченно красным "Open")
Шаг седьмой:
[Для просмотра данной ссылки нужно зарегистрироваться]
1. На панели инструментов (где мы ранее выбирали "Увеличительное стекло") мы выбираем инструмент "Прямоугольное вырезание" и выделяем понравившуюся часть картинки (вообще в юзербарах с людьми в основном берутся глаза. Ну кто будет делать юзербар с носом, рукой, ртом итд?)
2. С помощью инструмента "Перемещение" мы тащим выделеную часть картинки на юзербар как показанно пунктиром.
Шаг восьмой:
[Для просмотра данной ссылки нужно зарегистрироваться]
1. Как я показал на рисунке, картинку можно двигать (не только вверх и влево, а как угодно) (Хочу обратить ваше внимание на то, что обои с которых вы резали ту или инную часть остались целыми и невридимыми ^_^)
Жмем Shift+Ctrl+N и нажимаем "Да" или "Ок"
2. Давим CTRL+A. Выполняем: Редактирование -> Выполнить заливку
Шаг девятый:

[Для просмотра данной ссылки нужно зарегистрироваться]
1. В появившемся окне выбираем "Узор"
2. Дальше нажав на небольшую стрелочку (на рисунке она входит в "красную зону" и находится справа от полосок) мы ищем тот узор что делали вначале. А именно всеми любимые "Полосочки"
3. Непрозрачность мы ставим ~ от 10 до 20, но это зависит от рисунка. Желательно не пренебрегать. В своем случае я поставил 15%
Жмем "Да" или "Ок" и замечаем что нашу картинку покрыли слегка заметные полоски (на картинке я увеличил чтобы было более заметно)
Шаг десятый:
[Для просмотра данной ссылки нужно зарегистрироваться]
Нажмите сначала клавишу "D" а потом "X" (чтобы отрегулировать цвет)
Большой звездочкой отмечен инструмент "Фигура". На него как и ранее на инструмент "Рисование" нужно нажать правой кнопкой мыши...
1. ...и выбрать "Овал" или, как его ещё называют, "Эллипс"
2. Делаем следующие. Наводим курсор (перекрестие) ровненько на левый верхний угол и дальше, не отпуская левой кнопки мыши, тянем овал в правый нижний угол.
3. Должно получится что то наподобии этого (Новичков просьба не пугатся, все в порядке, так и должно быть)
Шаг одиннадцатый:
[Для просмотра данной ссылки нужно зарегистрироваться]
С помощью стрелок на клавиатуре или инструмента "Перемещение" тащим овал наполовину вверх.
1. Теперь, на панели слоев (если таковая у вас отсутствует (по умолчанию она вроде должна быть снизу справа) то нажмите F7), щелкаем правой кнопкой мыши по слою с фигурой (Название по умолчанию у него "Фигура 1")
2. Выбираем "Параметры наложения"
Шаг двенадцатый:
[Для просмотра данной ссылки нужно зарегистрироваться]
1. В новом окне, выделяем "Параметры наложения: Заказные" (вобщем то что выделенно у меня)(по умолчанию оно и должно быть выделенно)
2. Непрозрачность ставим ~ на 20-30% (В моем случае 25)
Жмем "Да" или "Ок". Чувствуете разницу, не так ли?
Шаг тринадцатый:
[Для просмотра данной ссылки нужно зарегистрироваться]
1. Вот что то наподобии должно получится у вас.
Большой звездочкой отмечена кнопка "Текст" на панели инструментов. Выбираем её.
Шаг четырнадцатый:
[Для просмотра данной ссылки нужно зарегистрироваться]
1. Параметры шрифта у класического юзербара должны быть именно такими. Visitor
2. Выбираем место для текста (дело в том, что у юзербара размером 350*19 при шрифте визитор в 10 пикс можно легко найти середину (по вертикали) и разместить текст ровно, чтобы он не был не снизу не сверху), а задействовав кнопочки со стрелками на вашей клавиатуре или опять инструмент "Перемещение" можно изменить положение написанного вами текста (В моем случае "D. House Fan")
Шаг пятнадцатый:
[Для просмотра данной ссылки нужно зарегистрироваться]
1. На панели слоев выделяем слой с текстом (он приобретает имя написанного текста)
Большой звездочкой отмечена кнопка "Добавить стиль текста" (ранее когда мы заходили в "Параметры наложения" у нашего овала вам наверняка заметились в новом окне и другие строки такие как "Тень", "Обводка" итд. Для того чтобы зайти в это окно ещё раз можно нажать эту кнопку. Просто я хочу расказать вам о всевозможных вариантах) жмем на эту кнопку и выбираем "Обводка"
2. Ставим размер 1 пикс.
3. Цвет ставим черный.
(Прим. автора: если хотите, то можете поставить галочку напртив строки "Тень")
Жмем "Да" или "Ок"
Шаг шестнадцатый:
[Для просмотра данной ссылки нужно зарегистрироваться]
Большой звездочкой отмеченна кнопка "Новый слой" Жмем на неё (Прим. автора: Новый слой можно так же создать с помощью клавиш Ctrl+N или зайдя в "Слой -> Новый -> Слой")
1. У вас должен появится вот такой вот новый слой. Теперь когда он выделен жмем Ctrl+A и вы заметите выделение вокруг вашего юзербара.
2. Заходим в Редактирование -> Выполнить обводку
Шаг семнадцатый:
[Для просмотра данной ссылки нужно зарегистрироваться]
1. Выставляем Ширину (рамки кстати) 1 пикс.
2. Цвет рамки должен быть черным (хотя бы для начала, а потом будете эксперементировать)
3. Непрозрачность - 100%
Жмем "Да" или "Ок"
Итак, мы получили уже готовый юзербар. Поздравляю!
Шаг восемнадцатый:
Благодаря фотошопу файлы можно сохранять в разных форматах. Многие спорят в каком правильно хранить юзербар: *.png или *.gif, но одно ясно точно. Оригинал можно (и даже нужно) хранить в формате *.psd ибо если вы вдруг забудете про какую то деталь, к примеру блик или текст, захотите поменять, отформатировать итд), то сможете сделать это только в этом формате. В других все слои просто слепятся друг с другом. Однако об авторском праве я вам пожалуй говорит не стану... Но лично я храню файлы в формате *.gif однако дело ваше. Чтобы сохранить юзербар зайдите в Файл -> Сохранить как или Shift+Ctrl+S, выберите директорию (папку) в которой хотите чтобы хранился ваш юзербар и формат.
Заключение:
Спасибо большое за то, что прочитали этот учебник. Многим он не понравится, но это их мнение. Я жду вашей критики и благодарности (если таковая будет, если нет, то ни капельки не растроюсь) и хочу пожелать вам красивых работ, творческого вдоновения и снисходительности фортуны.
Жду ваших отзывов...

Шаг 1.
Создаем новый документ (Ctrl+N) 350х20px.
Создаем новый слой (Sift+Ctrl+N).
Берем инструмент Gradient Tool (G), тип “Linear Gradient”, выставляем цвета #4e4e4e, #161616 и заливаем наш фон:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 2.
Создаем группу (Layer > New > Group).
Создаем в ней новый слой (Shift + Ctrl + N).
Берем инструмент Brush Tool (B.) размером 3px, выставляем основной цвет белый и нажимаем клавишу “F5”, настраиваем “Shape Dynamics” как на картинке:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 3.
Рисуем горизонтальную линию (зажмите “Shift” при рисовании), заходим в стили этого слоя (Layer > Layer Style > Blending Options) и настраиваем как на картинке:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 4.
Закрываем окно “ Blending Options ”, в списке слоев щелкаем правой кнопкой по этому слою и выбираем “Copy Layer Style”. В этой же группе создаем еще один слой. В списке слоев щелкаем по нему правой кнопкой мыши и выбираем “Paste Layer Style”, для применения к нему такого же стиля как и у предыдущего слоя.
Далее берем инструмент Brush Tool (B.) размером 1-2px, и рисуем искры:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 5.
Повторите шаг №4 для создания четырех – пяти слоев с искрами. Варьируйте расположение искр:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 6.
Временно скройте эту группу (в списке слоев щелчок по иконке глаза, около этой группы)
Создайте еще одну группу и в ней создайте слой, к нему примените тот же стиль, что и для предыдущих слоев. Берем инструмент Brush Tool (B.), выбираем из списка стандартную кисть размером 45px с размытыми краями и ставим точку в середине документа. После этого создаем еще 8 слоев все с тем же стилем и ставим на каждом из них по одной точке, кистями с размерами 80, 120, 160, 200, 300, 400, 500 и 800px:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 7.
Создаем новую группу.
Берем инструмент Horizontal Type Tool (T) и слева пишем “SUPER USERBAR”, я использовал шрифт “Arial”, размер 12pt. Создайте копию этого слоя (Ctrl+J) и примените к ней стиль как на картинке:
[Для просмотра данной ссылки нужно зарегистрироваться]
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 8.
Создайте 11 копий слоя с текстом (с эффектом), далее выбираем верхний из этих слоев и удаляем все буквы, кроме первой. Переключаемся на второй слой и удаляем все буквы, кроме первой и второй. Выполните это действие для всех этих копий, удаляя на каждом слое на одну букву меньше, чем на предыдущем. Вот все наши текстовые слои:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 9.
Создаем новую группу.
Берем инструмент Horizontal Type Tool (T) и справа пишем “CLICK HERE”.
Сразу же создадим 4 копии этого слоя. К оригиналу этого слоя применяем стиль как у текста “Super userbar”. Далее выбираем любую копию, нажимаем “Ctrl+T” и сверху на панели выставляем значения “W: 50%” и “H: 50%”, жмем “Enter”. Далее выбираем вторую копию, нажимаем “Ctrl+T” и выставляем “W: 75%” и “H: 75%”. Для третьей копии выставляем “W: 90%” и “H: 90%”. Четвертую оставляем без изменений:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 10.
Далее, над всеми группами создаем новый слой, берем инструмент Rectangular Marquee Tool (M), создаем выделение в половину верхней части юзербара и заливаем белым цветом:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 11.
Меняем режим наложения для этого слоя на “Overlay” и выставляем “Opacity: 40%”:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 12.
Теперь, в списке слоев, поместите нашу первую группу над группой со словами “Super userbar”, а группу №2 со вспышками, поместите над всеми группами.
Теперь, перед создание анимации, сверим, что у нас в списке слоев, снизу вверх:
1) Фоновый слой.
2) Группа 3, в которой 13 слоев с текстом “Super userbar”.
3) Группа 1, в которой 4 слоя с искрами и 1 слой с линией.
4) Группа 4, в которой 5 слоев с надписью “CLICK HERE”.
5) Группа 2, в которой находятся 9 слоев со вспышкой из центра.
6) Слой – блик.
Теперь скрываем все слои, кроме слоев в группе 1, слоя с фоном и слоя с бликом.
Разместите слои группы 1 слева, за областью холста и потом скройте их тоже:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 13.
Запускаем “Image Ready” (Shift+Ctrl+M).
Если у вас Photoshop CS3, то вам не нужно запускать “IR”, вместо этого, просто откройте окно анимации “Window > Animation”.
Для избегания вопросов рассмотрим окно анимации, а вернее кнопки которые нам понадобятся. Их название нам не важно, просто запомните:
[Для просмотра данной ссылки нужно зарегистрироваться]
Кнопка №1 – создать новый кадр.
Кнопка №2 – создать промежуточные кадры.
Кнопки №3 – выставить время для кадра.
Шаг 14.
Приступим к созданию анимации.
Напомню, что на первом кадре, у нас скрыты все слои, кроме фона и блика.
Создаем новый кадр и делаем видимым слой с белой надписью “Super userbar”.
В окне анимации зажимаем “Ctrl”, выбираем оба кадра и жмем на кнопку добавления промежуточных кадров, появится окно “Tween”, выставите в нем в поле “Frames to Add” значение “4” и нажмите ок. Теперь у нас 6 кадров, выставите для последнего время “0,5 sec”:
[Для просмотра данной ссылки нужно зарегистрироваться]
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 15.
Создаем новый кадр. Выставляем для него время “0” (No delay) и делаем видимым слой с линией (Группа 1), при этом искры по-прежнему должны быть скрыты. Создаем еще один кадр, берем инструмент Move Tool (V), зажимаем “Shift” и перетаскиваем линию вправо, так, что бы ее основание было чуть правее последней буквы “R”, в надписи “Super userbar”. Выделяем эти два кадра и создаем 11 промежуточных кадров:
[Для просмотра данной ссылки нужно зарегистрироваться]
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 16.
Возвращаемся к кадру №8.
Проверьте, что в группе №3, слой с надписью без эффектов, расположен под слоями с эффектами, если это не так, то перенесите его.
Делаем видимым слой с буквой “S”. Переключаемся на кадр №9, скрываем слой с буквой “S” (по идее, он должен скрыться сам) и делаем видимыми слой с буквами “SU”. Повторите это действие для всех слоев с буквами. На 19-ом кадре, у вас должна быть полная надпись “Super userbar” с эффектами:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 17.
Возвращаемся к кадру №8.
Делаем видимым один из слоев с искрами. С помощью Move Tool (V), располагаем его на основании линии. Переключаемся на кадр №9, и делаем видимым другой слой с искрами, тоже располагаем его на основании. Повторите это действие до 18 кадра, чередуя слои с искрами, а на 19 кадре, оставьте видимым тот же слой с искрами, что и на 18, но установите для него “Opacity: 50%”:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 18.
Создаем новый кадр, скрываем слой с искрами. Передвигаем нашу линию примерно до середины юзербара и скрываем ее. Выбираем кадры №19, 20, и создаем 5 промежуточных кадров, для кадра №25 выставляем время “0,5sec”:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 19.
Создаем новый кадр (26), устанавливаем для него время “0”. Делаем видимым слой с маленькой надписью “Click here” (Группа 4).
Снова создаем новый кадр (27), делаем видимым следующий слой с надписью “Click here”, не скрывая предыдущий (обратите внимание на то, что слои должны располагаться от меньшего к большему, снизу вверх, т.е. нижний слой – это самый маленький, верхний - большой).
Создаем кадр (28), скрываем маленькую надпись и делаем видимым третий по размеру слой видимым.
Создаем кадр (29), скрываем второй по размеру слой и делаем видимым четвертый.
Создаем кадр (30), скрываем третий слой, делаем видимым слой с эффектом и устанавливаем для него “Opacity: 50%”.
Создаем кадр (31) и выставляем для слоя с эффектом “Opacity: 100%”:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 20.
Создаем новый кадр (32), скрываем надпись с эффектом. Выбираем кадры №31, 32 и создаем 2 промежуточных кадра.
Создаем новый кадр (35), снова делаем видимой надпись с эффектом. Выбираем кадры №34, 35 и создаем 2 промежуточных кадра.
Создаем новый кадр (38), скрываем надпись с эффектом. Выбираем кадры №37, 38 и создаем 2 промежуточных кадра. Выставляем для последнего кадра (40) время “0,5 sec”:
[Для просмотра данной ссылки нужно зарегистрироваться]
Шаг 21.
Создаем новый кадр (41), выставляем для него время “0”.
И делаем видимым слой, с маленькой вспышкой из центра (группа 2).
Создаем новый кадр и сделайте видимой большую вспышку, а маленькую скройте.
Создайте таким образом по одному кадру для каждого слоя.
Теперь на последнем кадре (49), полностью скрываем группы №1, 3, 4.
Создаем новый кадр (50), скрываем на нем группу №2. Выбираем кадры № 49, 50 и создаем 5 промежуточных кадров, для последнего (55) выставляем время “1 sec”.
Ну а теперь нам остается только сохранить это в .GIF формате. Для этого нажмите “Shift+Ctrl+S”:
[Для просмотра данной ссылки нужно зарегистрироваться]
конец