Весенний форум: Всё обо всём. Аватары, юзербары, баннеры на заказ бесплатно

Как создать Юзер Бар (Туториал для чайников)

Resester

Дата: Четверг, 21.02.2008, 16:47 | Сообщение # 1

Новичок

Группа: Пользователи

Сообщений: 10

Репутация: 5

Подарки: 0

Статус: Оффлайн

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

Начинаем с самого простого. На рисунке обозначенны пункты (в звездочках)
1. Создаем новый документ. Идем в Файл -> Новый или же просто жмем Ctrl + N
В появившемся окне ставим параметры:
2. Имя: User Bar (на ваше усмотрение, прим. автора)
3. Ширина юзер бара 350 пикселей (заметьте что не сантиметров и не дюймов)
4. Высота юзербара 19 пикселей и нажимаем на кнопочку "Да" или "Ок"
Шаг второй:

1. У нас получается вот такая вот полосочка happy

(Если она вдруг очень большая, то проверьте, поставили ли вы пикселы а не сантиметры)
2. Создаем новый документ (мы уже умеем это делать, не так ли?)
Шаг третий:

1. Теперь ширину мы ставим 3 пикслеа...
2. ... и высоту тоже 3 пиксела
Жмем "Да" или "Ок".
3. Получаем оооочень маленький квадратик. (Большой звездочкой отмечен инструмент "Лупа" или "Увеличительное стекло", воспользуйтесь им чтобы увеличить этот квадратик до максимального размера увеличения, а именно 1600% как показанно красным прямоугольником)
Шаг четвертый:

Средней звездочкой отмечена кнопка "Рисования" и для того чтобы выбрать на ней "Карандаш" надо щелкнуть по этой кнопке ПРАВОЙ кнопкой мыши и выбрать нужный инструмент.
1. Итак как сказанно в небольшом предисловии сверху, выбираем карандаш
Большой звездочкой отмечен размер выбранного инструмента (в данном случае карандаша) его нужно поменять на 1 пиксель как у меня на рисунке
2. С помощью карандаша в 1 пиксель рисуем вот такую полоску
Шаг пятый:

1. Как показанно у меня на рисунке, мы выбираем Редактирование -> Определить узор
2. В новом окне у нас появится имя нашего файла ("Полосочки" в моем случае) его можно поменять по вашему усмотрению.
Жмем "Да" или "Ок" соглашаясь со всеми всплываемыми окнами (если таковые появятся)
Шаг шестой:

1. Файл -> Открыть и этим все сказанно. Или же просто Ctrl+O
2. Вводим адрес картинки которую вы хотите видеть на своём будующем юбаре, или же двойной щелчок по ней (отмеченно красным) (В моем случае это Хью Лори) (Желательно брать картинку побольше для начала, потипа обоев или такого рода)
Жмем "Открыть" (отмеченно красным "Open")
Шаг седьмой:

1. На панели инструментов (где мы ранее выбирали "Увеличительное стекло") мы выбираем инструмент "Прямоугольное вырезание" и выделяем понравившуюся часть картинки (вообще в юзербарах с людьми в основном берутся глаза. Ну кто будет делать юзербар с носом, рукой, ртом итд?)
2. С помощью инструмента "Перемещение" мы тащим выделеную часть картинки на юзербар как показанно пунктиром.
Шаг восьмой:

1. Как я показал на рисунке, картинку можно двигать (не только вверх и влево, а как угодно) (Хочу обратить ваше внимание на то, что обои с которых вы резали ту или инную часть остались целыми и невридимыми ^_^)
Жмем Ctrl+A
2. Выполняем: Редактирование -> Выполнить заливку
Шаг девятый:

1. В появившемся окне выбираем "Узор"
2. Дальше нажав на небольшую стрелочку (на рисунке она входит в "красную зону" и находится справа от полосок) мы ищем тот узор что делали вначале. А именно всеми любимые "Полосочки"
3. Непрозрачность мы ставим ~ от 10 до 20, но это зависит от рисунка. Желательно не пренебрегать. В своем случае я поставил 15%
Жмем "Да" или "Ок" и замечаем что нашу картинку покрыли слегка заметные полоски (на картинке я увеличил чтобы было более заметно)
Шаг десятый:

Большой звездочкой отмечен инструмент "Фигура". На него как и ранее на инструмент "Рисование" нужно нажать правой кнопкой мыши...
1. ...и выбрать "Овал" или, как его ещё называют, "Эллипс"
2. Делаем следующие. Наводим курсор (перекрестие) ровненько на левый верхний угол и дальше, не отпуская левой кнопки мыши, тянем овал в правый нижний угол.
3. Должно получится что то наподобии этого (Новичков просьба не пугатся, все в порядке, так и должно быть)
Шаг одиннадцатый:

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

1. В новом окне, выделяем "Параметры наложения: Заказные" (вобщем то что выделенно у меня)(по умолчанию оно и должно быть выделенно)
2. Непрозрачность ставим ~ на 20-30% (В моем случае 25)
Жмем "Да" или "Ок". Чувствуете разницу, не так ли?
Шаг тринадцатый:

1. Вот что то наподобии должно получится у вас.
Большой звездочкой отмечена кнопка "Текст" на панели инструментов. Выбираем её.
Шаг четырнадцатый:

1. Параметры шрифта у класического юзербара должны быть именно такими. (Шрифт Visitor можно скачать сдесь http://www.dafont.com/font.php?file=visitor скаченный файл разархивировать и вставить в C:/Windows/Fonts)
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, выберите директорию (папку) в которой хотите чтобы хранился ваш юзербар и формат.
Заключение:
Спасибо большое за то, что прочитали этот учебник. Многим он не понравится, но это их мнение. Я жду вашей критики и благодарности (если таковая будет, если нет, то ни капельки не растроюсь) и хочу пожелать вам красивых работ, творческого вдоновения и снисходительности фортуны.
Жду ваших отзывов...

eLine

Дата: Четверг, 21.02.2008, 17:11 | Сообщение # 2

V.I.P.

Группа: Проверенные

Сообщений: 964

Репутация: 208

Подарки: 14

Статус: Оффлайн

Тутор таксе...
1 На сайте уже есть тутор по созданию юзербаров.
2 Есть ошибки. Сохранять так не нужно... Правильно: Save For Web.
3 На скринах практически ничего не видно.
4 Зато мы знаем, что вы слушаете музыку через Windows Media и имеете близкие связи с Yoku_0...
__
Я не одобряю этот тутор...

- разработка и создание сайтов!

Resester

Дата: Четверг, 21.02.2008, 17:21 | Сообщение # 3

Новичок

Группа: Пользователи

Сообщений: 10

Репутация: 5

Подарки: 0

Статус: Оффлайн

RedLine,
1. Тут поподробнее описанно
2. Для анимации Сейв фор Веб, для обычных и так можно
3. Главное что видно что обводил
4. Я слушаю Korn и отошения у меня с Yuko_O а не с Yuku_O tongue

eLine

Дата: Четверг, 21.02.2008, 17:53 | Сообщение # 4

V.I.P.

Группа: Проверенные

Сообщений: 964

Репутация: 208

Подарки: 14

Статус: Оффлайн

Quote (Resester)

Скажи, мож узнаю о ляпах своих

Это даже не ляпы... Так... Недочёты...
Многие просят меня рассказать как уменьшать картинку...
Я толкого в твоём обяснении особого ничего не нашёл... Хотя тут описано правильно достаточно...
Проще написать: инструмент Crop; вписываем размеры (350х19); выделяем нужный фрагмент; Enter.
__
Косую полоску лучше делать на 5 px белого цвета для тёмных изображений, а чёрную - для светлых...
Непрозрачность примерно 35-55% (зависит от желаемого результата.
__
Блик в разных туторах описывается по-разному...
Я делаю так: овал сверху; занимает примерно 2\3 юба; непрозрачность: 30-40%.
___
Впринципе, есть просто недочёты... Я не считаю, что этот урок чайников...
__
У каждого свои методы))

- разработка и создание сайтов!

Resester

Дата: Четверг, 21.02.2008, 17:59 | Сообщение # 5

Новичок

Группа: Пользователи

Сообщений: 10

Репутация: 5

Подарки: 0

Статус: Оффлайн

Quote

Проще написать: инструмент Crop; вписываем размеры (350х19); выделяем нужный фрагмент; Enter

Ооохохо это я запомню happy