[ 456 ]

Аватары на тему 456

[StingeR] — Wed, 17 Nov 2010 11:03:33 GMT

Форум: Креатив
Описание темы: :)
Автор темы: [StingeR]
Автор последнего сообщения: [StingeR]
Количество ответов: 8

Как нарисовать анимированный аватар в фотошопе

[StingeR] — Sun, 14 Nov 2010 15:40:06 GMT

Как нарисовать анимированный аватар в фотошопе

1. Создаём новое изображение размером 100x100 пикселей. Создаём новый слой и заливаем его любым цветом (с помощью инструмента Paint Bucket Tool):

2. Заходим в Layer Style этого слоя (на панеле слоёв Layers кликаем по слою правой клавишей и выбираем Blending Options), переходим на вкладку Inner Shadow и добавим внутреннюю тень:

3. Переходим на вкладку Gradient Overlay и выставим там следующие параметры (красным текстом я написал шестнадцатиричные кода цветов):

4. Жмём Ok и получаем такой фон:

5. Создаём новый слой и нарисуем на нём что-нибудь, напирмер с помощью какой-либо кисточки (кисточку, которую я использовал в уроке, можно скачать в конце урока):

6. Параметр Blend Mode данного слоя изменим с Normal на Overlay (данный параметр изменяется на панеле слоёв Layers в верхнем левом углу):

7. Создадим ещё один слой, зальём любым цветом. Непрозрачность Fill выставьте в 0%. Теперь зайдите в Layer Style на вкладку Pattern Overlay, выберите текстуру ввиде косой штриховки (как она создаётся было рассказано в уроке о создании логотипа (пункт №6) или UserBar'а (в пункте №5) ) и выставьте следующие значения:
Подробней ТУТ

Жмём Ok и видим результат:

8. Напишем какой-нибудь текст, например свой ник:

9. Заходим в Layer Styles на вкладку Stroke и выставим следующие значения:

10. На вкладке Gradient Overlay сделаем такой градиент:

11. А на вкладке Outer Glow добавим внешнее свечение:

12. Жмём Ok и получаем такой-вот сияющий текст:

13. Снова создаем новый слой и выполним следующее выделение (для этого можно использовать любой понравившийся вам инструмент для выделения, например Polygonal Lasso Tool):

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

15. Создаём новый слой, заливаем его любым цветом и заходим в Layer Style на вкладку Inner Glow:

16. И на вкладку Stroke:

17. Жмём Ok и получаем такой-вто бордюрчик:

18. Увеличим изображение, быбираем инструмент Polygonal Lasso Tool и не спеша делаем следующее выделение:

19. Зальём его белым цветом:

20. Сейчас нужно зайти в Layer Style и добавить внутреннюю тень (Inner Shadow):

21. Жмём Ok. Должно получиться примерно так, как и у меня:

22. А сейчас создадим новый слой и нарисуем там (по желанию) кирпичики:

23. Напишем над полученным фоном что-нибудь, например название сайта, ваше ICQ или E-Mail:

24. Сейчас добавим несложную анимацию. Для этого нужно перенести изображение в программу Adobe ImageReady (чтобы это сделать в меню File выберите пункт Edit in ImageReady).

На панеле Animation добавьте несколько кадров (мне хватило 14 кадров) — для этого нажмите несколько раз кнопку Duplicates current frame на той же панеле, снизу:

http://c456.ru/img/ypok2/25.jpg

25. Осталось изменить каждый кадр. Делается это так:

Первый кадр мы оставим как есть, сразу кликаем по второму кадру.

Затем на панеле слоёв Layers выбираем слой с ником и заходим в Layer Style, там, на вкладке Outer Glow уменьшите немного непрозрачность свечения (Opacity), жмите Ok:

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

После этого нужно так же постепенно увеличивать непрозрачность. Как это всё сделаете — нужно настроить параметры оптимизации изображения (качество):

Юзербары на тему 456

[StingeR] — Mon, 20 Sep 2010 10:25:47 GMT

Небольшой урок как делать простой юзербар с анимацией и текстом
(Картинки в споилерах)
1. Открываем фотожоп.
2. Файл -> Новый -> Делаем всё как на картинке пониже и жмём "Да".

3. Жмём на инструмент Ввода текста и выделяем весь юзербар

4. Вводим нужный текст, выбираем понравившийся шрифт.
5. Добавляем новый слой. Заливаем его любым понравившимся цветом.
6. Меняем режим слоя на понравившийся ( я выбрал "Темнее" )

7. Жмём "Параметры наложения слоя" Жмём перекрытие узора, вставляем свой узор (как его делать написано тут КЛАЦ ...)

8. Жмём "Обводка" И делаем внутренюю обводку нашего юзербара, чтобы он выделялся от контента сайта.

9. У нас уже получился неплохой юзербар. Но добавим в него анимацию С перва если у вас нету панели анимации её нада включить, Жмём "Окно" , затем жмём на "Анимация"

10. Создаем много копий 1 кадра.

11. Убираем на 2 и далее кадрах "Глазок" со слоя http://c456.ru/

12. На втором кадре анимации вставляем часть небольшого текста и настраиваем его по вкусу. Тут есть небольшое дополнение. Текст будет виден на 1 кадре, поэтому убираем "Глазок" на первом кадре с этого текста, а на последующих вставляем. Также придётся убирать при каждом добавлении текста.

13. Добавляем вторую часть текста на третем кадре.

14. Можно убрать старые текста , и добавить новый.

15. Проставляем время для каждого кадра. Я поставил везде 0.5 ;)
16. Жмём файл - сохранить для веб устройств. Настраиваем параметры сохранения как на картинке, если они у вас не такие. И жмём сохранить ;)

И у нас получается такой юзербарчик

BB код:

Code

[url=http://c456.ru/][img]http://c456.ru/img/ypok/userbartest.gif[/img][/url]

Делаю аватары

[HeHaBu}I{y_DoM_2] — Fri, 25 Jun 2010 10:59:52 GMT

Кто хочет аватар на полобе как у мну=)оставляйте заявки или пишите в лс.

Добавлено (24 Май 10, 18:32:13)
---------------------------------------------
Вот пример

Иконки групп

xetr0 — Tue, 22 Jun 2010 08:48:43 GMT

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

Картинки прозрачные.

Если у кого есть psd заливайте, что нибудь попробую!
----------------------
зы. Не знал раздела куда добавить тему... Модераторы перенесите в нужный раздел.

Юзербары на заказ 8)

[StingeR] — Tue, 18 May 2010 08:12:36 GMT

Кто хочед юзербарчег как у мну, обращайтесь, с картинками из которых он будет состоять, зделаю анимацию , скрипив их все в 1 8)
Обращайтесь 8) Юзербары моно взять с сайта userbars.ru !

Делаем штриховку для картинок

[StingeR] — Tue, 18 May 2010 07:30:36 GMT

Чтобы не рисовать её полностью самому, сделаем текстуру. Чтобы создать текстуру создадим новое изображение размером 4x4 пикселей с прозрачным фоном (Background Contents: Transparent):

Закрасим полученный квадрат белым карандашом таки образом, как показано ниже (для наглядности я использовал розовый цвет, но нужно обязательно закрашивать белым цветом!):

Изображение для текстуры готово. Теперь нужно чтобы оно было доступно в PhotoShop'е. Для этого идём на вкладку Edit —> Define Pattern главного меню, в появившемся окошке вводим название текстуры и жмём OK. Теперь можно изображение, которое мы использовали для текстуры, закрыть не сохраняя – оно нам не понадобится:

(с) www.designarts.ru