Уроки по созданию графников

Тема для уроков по рисованию ников.
Просьба не флудить.


Проще всего создать графник через генератор графики. Что многие и делают.
Вот 2 наиболее полезных:

Генератор «блестящего текста» от Gifr.ru

Cool Text: Logo and Graphics Generator

Но, помните, требования для графников едины для всех. Эти сервисы не смогут сделать всю работу за вас.

Уроки по созданию графников: 12 комментариев

  1. Избавляемся от фона

    Ещё раз. Самый простейший способ убрать фон у gif-изображения. На примере Photoshop 7, в других фотошопах алгоритм ничем не отличается. Картинка: пачка Беломорканала, размер 100х100 пикселей. Исходное изображение такое:

    (1) Выделяем требуемое изображение с помощью инструментов «Магнитное лассо», «Прямоугольное лассо» и т. д. Если цвет изображения существенно отличается от цвета фона — то можно воспользоваться инструментом «Волшебная палочка», просто ткнув ей по фону, и инвертировать выделение. Когда изображение будет выделено — можно сделать небольшую растушевку (Feather), например 0,5 пиксела.

    (2) При включенном инструменте «прямоугольное выделение» — правой кнопкой мыши кликаем на любом месте нашей картинки и выбираем «Вырезать на новый слой» («Layer Via Cut»).

    (3) Собственно удаляем фон. Во вкладке «Слои» («Layers») ищем слой с фоном (он нижний), тыкаем правой кнопкой мыши по нему, выбираем «удалить слой» («Delete layer»).

    (4) Теперь правильно сохраняем gif. Выбираем пункт меню «Файл (File)» — «Сохранить для Web и устройств (Save for Web)». Устанавливаем галочку «Transparency», чуть правее — выбираем цвет заливки полупрозрачных пикселей.

    Цвет можно ввести RGB-кодом, как показано на картинке. Если это графический ник, то цвет EECE6C, если товар для магазина — то F3F3F3. Далее просто нажимаем «Сохранить», и получаем gif-картинку без фона.

  2. Ванька, когда делаешь графник — очень удобно нижним слоем устанавливать фон чата EECE6C, чтобы видеть, как граф будет выглядеть на нём. Отключить его можно при окончательном компилляции gif-картинки.

  3. Низнаю. Мне чтоль свой урок показать? 8)

    «От А до Я. Простое создание графического ника в „Adobe Photoshop CS3(русская версия)“ без рисунка и анимации»
    Описание: Простейшее создание графического ника «Радистка» в «Adobe Photoshop CS3(русская версия)» без рисунка и анимации.
    Автор: Ванька.
    Специально для k4at.ru (не для коммерческого использования)

    1. И так заходим в Photoshop. В верхнем левом углу: «Файл->Новый…» В полях «Высота и ширина» сразу задаем стандартные параметры: 130х30 пикселов. В поле «Содержимое фона» подбираем «Прозрачный». На данном этапе делаем все как на этой картинке:

    После нажатия кнопки «ОК» фотошоп выводит вас на «зону работы». В данный момент основной областью этой зоны является клетчатый прямоугольник в середине фотошопа. Он выглядит так:

    Пока он пустой, но сейчас мы начнем работать над ним.

    2. В левой панели интсрументов выбираем «Т» — Горизонтальный текст:

    3. Затем в правой панели выбираем «А|», кликаем на «А|» и в открывшемся меню задаем такие параметры: цвет: #0c00ff (синий), текст: «AG_Cooper»(Лично я выбрал для своего урока такой текст), размер текста 6 пт. Короче все параметры вводим, как на картинке:

    4. Начинается самое главное. Мы пишем ник на нашей основной зоне работы. Лично я выбрал для своего урока ник «Радистка». Чтобы написать текст, мы будем выделять область на нашем клетчатом квадратике. Для этого ставим курсорчик к правому верху клетчатого прямоугольничка и доводим до его левого низа. Затем беремся за клавиатуру и печатаем «Радистка».

    Вот приблизительный результат данного этапа:

    Если у Вас все похоже на то, что на картинке, вы можете со спокойной душой продолжить, ну а если ваш граф-ник не не похож на изображение, попробуйте еще раз — будте внимательнее.

    5. Теперь мы займемся обработкой текста, для этого в верхней панельке мы выберем «Слой->Стиль слоя->Параметры наложения…». В открывшемся окошке слева поставим галочку возле раздела «Тень» и нажмем на «Тень». У Вас должно открыться окошко и в нем вы должны набрать такие же параметры как на картинке:

    Это окошко пока не закрываем («ОК» НЕ НАЖИМАЕМ)! (Если вы уже закрыли это окошко, снова проделайте путь: «Слой->Стиль слоя->Параметры наложения…»).

    Теперь мы в левом меню разделов выбираем раздел «Внутренняя тень», ставим возле него галочку и переходим на него кликом по слову «Внутренняя тень». Снова вводим параметры как на следующей картинке:

    Это окошко не закрываем и «ок» не нажимаем до тех пор, пока я не скажу.

    Дальше снова в левом меню этого окна выбираем «Внешнее свечение» — ставим рядом галочку и переходим во «Внешнее свечение» кликом по фразе «Внешнее свечение». Вводим параметры, как на картинке:

    Окошко пока не закрываем.

    Затем снова в левом меню этого окна выбираем «Тиснение» — ставим рядом галочку и переходим в «Тиснение» кликом по слову «Тиснение». Вводим такие же параметры, как на картинке:

    Теперь ( наконец-то ^-^ ) мы можем нажать «ОК».

    6. Выбираем инструмент «Ластик» в левом меню инструментов.

    Затем выводим курсор ластика на клетчатый прямоугольник, и ПРАВОЙ кнопочкой мыши кликаем по этому прямоугольнику. Открывается маленькое меню, в котором вы должны задать параметры, как на картинке:

    Теперь вы должны навести курсор над буквой «Р»(от слова Радистка) и ЛЕВОЙ кнопочкой мыши от буквы «Р» до буквы «а», сверху вниз поводить «Ластиком». Не злоупотребляйте и часто не проводите. Вот что примерно должно получиться у Вас:

    Если у Вас получилось так же или почти так же, как на картинке, Вы можете переходить к последнему этапу работы «Сохранение».

    7. В верхнем перечне выбираем «Файл->Сохранить как…», выбираем файл для сохранения и вводим в поле «Имя файла»: Радистка, а в поле «Тип файлов»: (*.PHG). Короче все как на картинке:

    8. Затем нажимаем «Сохранить».

    9. Теперь вы должны закрыть фотошоп. Нажимаем на крестик в правом верхнем углу. Всплывает табличка: «Сохранить изменения в документе…?», Вы нажимаете «Нет», так как он запрашивает сохранение psd, pdd файла, но мы уже сохранили графник в типе png.

    10. Наша графическая работа по изготовлению графника ГОТОВА!


    Итог:

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


    Спасибо за внимание. С Вами был граф-дизайнер Ванька.

  4. все делала как обычно но тут захожу чтоб ник сохранить, через веб, предварительно сделав анимацию, сохраняю его… и анимации то нет! он мне сохранил только те слои что выделены были для кадра… че может нажала там случайно???

  5. сделала красивый отпадный графник) но! по размеру все хорошо) новесит он 26 кв)может можно как то уменьшить вес ника, минуя уменьшения слоев в анимации?

    1. Открываем необходимый аватар. Устанавливаем необходимый размер картинки.

    2. В меню «Файл» выбираем «Сохранить для Web и устройств» или жмем Alt+Shift+Ctrl+S

    3. На вкладке «2 варианта» или «4 варианта» смотрим, что у нас получится в случае той или иной оптимизации. Как будет быглядеть картинка и какого размера выйдет файл.
    Чем сильнее сжатие, тем хуже качество картинки и тем меньше ее вес.

    4. На вкладке «Оптимизация» выбираем желаемое сжатие и параметры оптимизации. Под картинкой контролируем изменяющийся размер файла.
    Выбрав желаемое — жмем на кнопку «Сохранить».
    Сохраняем под текущим или другим именем.

    5. Заглядываем в папочку, проверяем, что аватар стал таким, каким нам и нужно.

    _________________

  6. Хочу рассказать, как делать анимацию в Image Ready. Урок пригодится, например, начинающим дизайнерам графических ников в чате.
    В качестве примера рассмотрим картинку 100х100 пикселей, на чёрном фоне которой будет располагаться какой-либо текст:

    Задаём необходимые параметры текстового слоя:

    Анимация будет заключаться в изменении цвета заливки текста, но любую другую анимацию можно сделать по тому же самому принципу. Создаём ещё несколько слоёв, для каждого из которых необходимо установить свои параметры, плавно меняющиеся от слоя к слою:

    Нажимаем кнопку перехода в программу ImageReady:

    В меню Window ставим галку на Animation, в нижней части экрана появится окошко с последовательностью кадров:

    На самом первом кадре отключаем все слои, кроме фона и самого первого текстового слоя. Затем, создаём новый кадр, нажатием соответствующей кнопки в окошке Анимации. Изначально следующий кадр будет идентичен предыдущему. Необходимо отключить первый текстовый слой и включить второй:

    Далее точно также создаём по кадру для каждого текстового слоя, созданных нами в фотошопе, и задаём нужные нам временнЫе задержки для каждого кадра тут:

    Теперь осталось сохранить нашу картинку. Заходим в меню File и выбираем «Save Optimized As…». Анимированный gif-файл готов!

  7. «Урок по созданию надписей на прозрачном фоне в Фотошоп.» — способ II

    Достаточно при активном слое с картинкой выделить(М) пространство с изображением и нажать Ctrl+C, после перейти к интересующему вас обьекту и без всяких лишних зазоров вставить скопированное вами изображение(Ctrl+V)

  8. Еще один урок по созданию GIF картинки с прозрачным фоном

    Удостоверьтесь, что картинка на своём слое, без фона. Ошибка №1 происходит, когда люди раньше с предыдущими версиями сохраняют файл с фоном сайта, где данное изображение и будет помещено.

    Идите в “File>Save for web” .
    Перед вами откроется окно.
    3.

    Сделайте свои настройки наименее цветоменяющими (мне кажется или я только что новое слово изобрел?..), что бы *.GIF совпадало с *.PSD изображением.
    Да, и всегда проверяйте наличие галочки в окне “Transparency” и в окне “Matte” должен стоять наиболее близкий цвет к цвету фона страницы, где вы выложите GIF файл. Если цвет разнообразный или вам неизвестен, ставьте “None”.
    Вот собственно и всё от урока, далее мы просто поговорим о вариациях “Matte”, кому неинтересно, прямой дорогой в Photoshop пробовать и учиться на собственных ошибках (Этим я ненавязчиво намекнул на то что информация полезная и стоит внимания, а там как хотите).
    Представим, что фон на сайте чёрный.
    Случай A:
    Эффект ореола (так делать ненадо).

    В этом случае в “Matte” поставлен белый цвет. Знакомая картинка? Это признак того, что автору ещё учиться и учиться.
    Случай B:

    Тот же самый случай, только “Matte” поставлен на “0”.
    Ореола нет, зато можно заметить пиксилезацию.
    Случай С:
    Высший пилотаж.
    Цвет в окне “Matte” совпадает с фоном.

    Так же этот эффект работает с “PNG”.

    Автор: Colin Smith
    Перевод: Constantinich
    Полностью урок можно найти здесь: demiart.ru/forum/index.php?showtopic=16638

  9. Урок по созданию надписей на прозрачном фоне в Фотошоп.
    Думаю, что то, как сделать саму надпись все уже знают, поэтому пропущу эту часть.
    Идем дальше:

    у нас осталось много свободного места. Нужно удалить все лишнее прозрачное пространство не трогая нашу надпись.

    Идём в главную панель.
    Изображение -> Триминг
    И выбираем вот такие параметры.

    Нажимаем «ДА». Всё лишнее обрезается.

    Теперь нам нужно сохранить наше изображение так, чтобы при наложении на цветной фон у нас было видно только слова, а не белый фон вокруг. Для этого нам нужно сохранить наше изображение либо в формате PNG, либо в формате Gif.

    Для сохранения идём на главную панель. Файл-> Сохранить как
    В открывшемся окне в Типе файлов выбираем формат PNG

    Нажимаем сохранить. Вылезет ещё окно Параметры PNG. Устанавливаем.

    Нажимаем «Да».

    Полностью урок можно найти здесь: photoshopika2.mylivepage.ru/blog/1440/33335

  10. Отрыл свой первый урок..)) Уроку около года, тогда еще только познакомился с фотошопом..))
    Шаг №1 — находим картинку которая наиболее подходит для графического ника который вы решили сделать(я сделаю на примере графа который уже делал для SEGA) и так вот картинка которую я выбрал под граф ник:

    Дальше с помощью ластика вырезаем нужный элемент(по крайней мере я так делаю)

    Шаг №2 — копируем вырезаный фрагмент и вставляем в отдельно созданый документ, я беру к примеру 100х35 пикс.(прим. фон сразу задавайте который у вас в чате, что бы видеть как граф потом будет смотреться, я делаю на сером)

    Дальше нажимаем «Редактирование» -> «Скопировать совмещенные данные» дальше при активном новом документе 100х35 нажимаем опять «Редактирование» -> «Вклеить»
    Шаг №3 — Подгоняем вырезаный фрагмент(в моём случае это знаменитый Соник) под нужный нам размер, я обычно делаю в высоту не больше 35 пикс.(вы же себе как захотите).
    И так делается это следующим образом:1 — При активном окне с изображением нажимаем «Изображение» -> «Размер изображения..» и выставляем нужный вам.
    Шаг №4 — Выбираем нужный шрифт и пишем непосредственно название графа(в моем случае слово SEGA) в том окне где наше уменьшеное и вставленое в нужное расширение изображение Соника. Вот что получилось:

    Дальше оформляем слово SEGA, для этого заходим в «Слой» -> «Стиль слоя» и выбираем «Наложение градиента»(я выбрал синий градиент, где можно скачать градиенты??? Поисковик рулит) после выбираем все в том же окне обводка и делаем как указано на картинке

    Шаг №5 — смотрим Шаг №2 аналогично выделяем то что у нас уже получилось и вставляем в рабочую область с размером 100х35(теперь и картинка и текст у нас один рисунок, тоесть редактировать его мы теперь сможем только как единое целое) и опять нажимаем «Слой» -> «Стиль слоя» -> «Внешнее свечение»(делаем как на картинке):

    Шаг №6 — Граф ник готов:)))

    И вуаля, граф ник можно ставить:))) Только не забываем при сохранении файла про кашету иначе будет на темном фоне со светлыми краями:)))
    —————————-
    Сейчас уже все совсем по другому и качественнее, но для начинающего думаю и этого с головой хватит 😉

Комментарии запрещены.