Как сделать графник для чата в фотошопе пошагово
Ниже представлены уроки по созданию графников
Шаг №1 - находим картинку которая наиболее подходит для графического ника который вы решили сделать(я сделаю на примере графа который уже делал для SEGA) и так вот картинка которую я выбрал под граф ник:
Дальше с помощью ластика вырезаем нужный элемент(по крайней мере я так делаю)
Шаг №2 - копируем вырезаный фрагмент и вставляем в отдельно созданый документ, я беру к примеру 100х35 пикс.(прим. фон сразу задавайте который у вас в чате, что бы видеть как граф потом будет смотреться, я делаю на сером)
Дальше нажимаем "Редактирование" -> "Скопировать совмещенные данные" дальше при активном новом документе 100х35 нажимаем опять "Редактирование" -> "Вклеить"
Шаг №3 - Подгоняем вырезаный фрагмент(в моём случае это знаменитый Соник) под нужный нам размер, я обычно делаю в высоту не больше 35 пикс.(вы же себе как захотите).
И так делается это следующим образом:1 - При активном окне с изображением нажимаем "Изображение" -> "Размер изображения.." и выставляем нужный вам.
Шаг №4 - Выбираем нужный шрифт и пишем непосредственно название графа(в моем случае слово SEGA) в том окне где наше уменьшеное и вставленое в нужное расширение изображение Соника. Вот что получилось:
Дальше оформляем слово SEGA, для этого заходим в "Слой" -> "Стиль слоя" и выбираем "Наложение градиента"(я выбрал синий градиент, где можно скачать градиенты. Поисковик рулит) после выбираем все в том же окне обводка и делаем как указано на картинке
Шаг №5 - смотрим Шаг №2 аналогично выделяем то что у нас уже получилось и вставляем в рабочую область с размером 100х35(теперь и картинка и текст у нас один рисунок, тоесть редактировать его мы теперь сможем только как единое целое) и опять нажимаем "Слой" -> "Стиль слоя" -> "Внешнее свечение"(делаем как на картинке):
Шаг №6 - Граф ник готов:)))
И вуаля, граф ник можно ставить:))) Только не забываем при сохранении файла про кашету иначе будет на темном фоне со светлыми краями:)))
Графник с анимацией
Создаем файл в фотошопе Файл > Новый (Ctrl+N) размером 175х75.
Нажимаем D (стандарт цветов) и заливаем (кнопка G) в черный цвет.
Это пока оставим переходим к фото.
2.Открываем фото Файл > Открыть (Ctrl+O)
Слой с изображением будет закреплён и сним не чего не сделаеш .
Для этого мы выделаяем изображение "Прямоугольной облостью" (кнопка M)
выделив полностью картинку мы клацаем Редактировать > Скопировать (Ctrl+C)
Создаем новы файл, Файл > Новый (Ctrl+N) В открывшемся окне нажимаем Да ( или OK)
Редактировать > Вклеить (Сtrl+V)
Теперь у нас фото не закреплено.Теперь мы уменьшаем фото
Изображения > Размер изображения. (Alt+Ctrl+I) и ставим высоту: 75
Терь также ве проделываем с уменьшиной картинкой и переносим её к первому файлу.
3.Размещаем изображение и пишим ник. (я пишу свой)
Пременяйте различные види шрифтов и если у вас ник в два слова распологате
их по разному.
4.Дальше мы будем делать простейшую анимацию Шум.
Открываем Окно > Анимация.
Так капируем наш слой с тестом (Ctrl+J) 1-2 раза (я один раз)
Нажимаем на первый слой теста. Тперь жмём Фильтр >Шум > Добавить Шум (Ctrl+F) и ставим количество 9.
Также проделываем с копией слоя теста ставив количество : 11 . если три слоя то 14.
(см.рисунок)
Теперь к окну анимации делаем кадры взависимости скока у вас слоёв у меня два я делаю два.
(см.рисунок)
Теперь нажимаем на 1 кадр и убираем глазик у слоя копии шрифта.
Также со вторым тока убираем глазик с основного слоя шрифты ,и оставляем у копии.
Если есть третий делаем также с тритем.Устанавливаем время анимации 0.1сек.
(см.рисунок)
5.Сохраняем Файл > Сохранить для WEB и устройств . настроивая чтоб подходила под размеры.
(см.рисунок)
Попробую объяснить как творить графический ник для тех кто ещё не имеет представления)
кисти эти можно скачать тут
1. Создаем нужного размера документ
2. Заливаем черным цветом
3. Открываем картинку, если слишком большая, уменьшаем её
4. Переносим её на наш графник, и поворачиваем как нам нужно.Уменьшаем.
5. С помощью быстрой маски убираем фон.
6. Начинаем улучшать качество картинки, и подтираем её мягким ластиком
7. Пишем ник.Располагаем как вам больше хочется.Шрифт тоже по желанию
8. Начинаем наносить кисти
9. Начинаем обрабатывать наши кисти. Делаем всё на одной из кистей, затем всё копируется и вклеивается на другие кисти.
10. На ник вклеиваем тот же стиль слоя, только изменяем стиль градиента
11. Объединяем наши кисти в один слой и накладываем на них резкость на края. а на девушку Умную резкость
12. Добавим немного фону нашему графнику, выбираем кисть с мягким краем, уменьшаем её непрозрачность, создаем отдельный слой и на нем будет наш узор
Подтираем где лишнее, и всё наш графник готов
Анимацию мы рассмотрим с Вами в следующем уроке)
Ночка
Начнем с больших графов среднего размера на черном фоне. Надеюсь, ты скачала Ps CC 2019, как договорились с:
Если ты никогда не работала в Photoshop, то сначала нужно создать новый документ.
Кнопка в верхнем меню: Файл --> Создать.
Картинка открылась. Работаем с ней. Далее выбираем инструмент "Лассо" (клавиша L). В верхней панели должна появиться кнопка:
Жмем на нее. Это самый быстрый способ очистить однородный фон на картинке одним кликом в Ps CC 2019.
Выбираем самый верхний инструмент на панели сбоку.
И затем снова жмем кнопку вверху Выделить предмет.
Ждем и получаем готовую картинку без фона с: Проверяй, что бы внизу был установлен вывод: Новый слой со слоем - маской
Если хочешь, можешь остановиться и просмотреть как работаю все бегунки справа а так же инструменты слева. Там можно размыть края, выделить волоски, очистить в ручную остатки фона и тп. Жмем Ок.
Если всё устраивает, можно убрать маску. Для этого жми правой кнопкой мыши по маске и выбирай Применить слой-маску.
Далее жмем комбинацию клавиш CTRL +С. Переходим в соседнюю вкладку с фоном графника и жмем CTRL +V.
Скорее всего ничего не изменится, только добавится новый слой поверх, потому что наша картинка без фона и пока большого размера.
Обязательно преобразовывай все картинки перед уменьшением или поворотом в Смарт-объект. Так ты меньше потеряешь в качестве, особенно если будешь поворачивать картинку несколько раз. Бывают такие исходники, которые приходится многократно крутить, пока найдешь наилучшее его положение на графе с:
Для этого кликни правой кнопкой по имени картинки без фона и выбери:
Повернула картинку несколько раз в разные стороны с:
Смарт - объект:
Без:
Вообще, картинку лучше не крутить, что бы качество не уходило с: Но если надо, значит надо. Всё зависит от того, какое оформление ты хочешь сделать. Кому - то нравится, когда картинка занимает большую площадь графника, кому-то - что бы картинка была меньше текста и тп. Ты художник, делай как считаешь лучше с:
Для первой части пока достаточно. Жду твою заготовку. Проект обязательно сохраняй с: (Фaйл --> Сохранить как . по умолчанию в формате psd)
ОО а я не знала про смарт объект. Буду к вам заходить, подглядывать)
А тут будет обучение по графам на белом фоне?
Меренга
Заходи. конечно с: можешь даже от себя написать советы с:
А тут будет обучение по графам на белом фоне?
Планировалось с: Но я так же не бум бум, как и ты D: Хочешь, создавай новую тему по ним и будем все учиться
Понаблюдаю) Чуть позже, возможно, добавлю от себя)
Kalinka
Ждемс с:
Тоже надо на белом фоне
Crayola
Спасибо за подробный урок)
Волосы плохо получается вырезать(
Ночка
ой. Что-то с качеством совсем плохо. Будем разбираться.
Как сохраняла? Блин. я тебе не написала, как сохранять, извини
Файл --> Экспортировать --> Сохранить для Web(старая версия). Там выбери JPEG пока и максимальное качество.
И кинь еще раз заготовку и исходник тоже.
Волосы плохо получается вырезать(
Не переживай на счет волос, с ними позже разберемся с:
Crayola
Сохраняла через сохранить как.
Вот как ты написала
Ночка
Вот сейчас лучше. Через "сохранить как" тоже можно сохранять, но там нет никаких настроек.
Мне нравится как ты расположила картинку с: Поехали дальше.
Теперь нам нужно подтереть нижний край и остатки фона справа. Для начала нужно растрировать слой, потому что стерку использовать мы не сможем. Так же по слою правой кнопкой мыши (ПКМ) и выбирай
Далее берем инструмент Ластик (Клавиша E(англ)) с такой стандартной кистью с размытыми краями
Размер
20px. Нам нужно стереть нижнюю границу картинки, что бы она плавно переходила в черный.
Зажимаешь левую кнопку мыши (ЛКМ) на левой границе графника, зажимаешь Shift, что бы линия была ровной и проводишь ластиком по нижнему краю заготовки.
Далее работаю с картинкой. я использую для этого фильтр Camera Raw. В нем можно сделать всю коррекцию сразу.
Находится в меню Фильтр вверху списка. Настройки делай такие, какие тебе нравятся.
Снег и на волосах можно убрать инструментом Точечная восстанавливающая кисть. Просто закрась курсором.
Жду обработку с:
Ночка
Хорошо с:
Теперь у меня к тебе вопрос: с волосами будем замарачиваться или в другой раз?
Напиши мне какие графники тебе нравятся по оформлению или кинь примеры, что бы я знала к чему мы движемся с:
Кому-то нравится минимализм, кому -то когда много кистей на фоне.
Crayola
Что можно сделать с волосами? Давай в этот раз, потом забудется)
Мне вот такие нравятся. С плавными линиями.
Много кистей на графе скорее не нравится.
Подскажи где такие кисти скачать. на том сайте не нашла.
Напиши, если не сложно, пожалуйста)
Кисти выложила тебе три набора, скачивай с:
Как ставить кисти:
Редактирование -->Наборы --> Управление наборами.
По умолчанию откроются Кисти. Таким же образом можно загрузить градиенты, стили, узоры и тп. Просто выбирай вверху нужный тип набора, который будешь загружать.
Как ставить шрифты:
Скачиваешь шрифт в формате ttf. Шрифты. - вот тут сайты.
Открываешь на компьютере Панель управления ( в меню Пуск), находишь там папку Шрифты и закидываешь туда свой файл ttf.
Теперь с волосами с:
Волосы будем дорисовывать, поэтому сразу может получиться не очень хорошо с:
скачать
Создавай новый слой. Каждая кисть сейчас и дальше будут на новом слое.
Бери любую кисть из набора (цвет любой, но не черный с: ), уменьши размер примерно до 100 и кликай на новом слое.
Преобразуй слой с кистью в Смарт-объект - будем крутить.
CTRT + T и поворачивай, уменьшай кисть, пока она не встанет на нужное место.
Таким образом дорисовываем волосы.
Затем сливай слои с волосами, если у тебя несколько как у меня. Для этого зажимаем SHIFT и выбираем слои в списке, которые надо слить. ---> ПКМ Объединить слои.
Волосы надо покрасить. Для этого двойной клик по слою ЛКМ. Откроются стили слоя. Там выбирай Наложение цвета.
Цвет возьми пипеткой с волос (инструмент будет активен сразу, как только нажмешь на прямоугольник с цветом), но не сильно темный, иначе зачем мы дорисовывали с:
Границы кисти, которые на волосах стирай мягким ластиком. Грязные края волос на картинке нам больше не нужны, их тоже можно стереть. Слой с волосами перенеси ниже картинки (зажимаешь ЛКМ слой и тянешь вниз по списку).
Пока не очень похоже на правду с: Надо растушевать границу. Для этого берем инструмент Палец и рисуем волоски.
Размер 2 пикс, Интенсивность 100%
Что бы рисовать, должен быть активен слой с картинкой.
Рисуешь волоски от головы к кончикам волос, лишнее убираешь стеркой.
Я вообще не планировала с тобой это разучивать, потому что это не очень важно для графов, но ты сама попросила
Надеюсь, хотя бы попробуешь с:
Дальше работаем с текстом. Клавиша T(англ)
Сразу открывай панельку, если она у тебя по умолчанию не открыта. В ней настраиваются все основные параметры текста и строк.
Пиши ник и размещай перемещением как в предыдущих шагах.
Для переноса строки жми Enter. Для искривления текста этот значок
Для стиля текста двойной клик ЛКМ по названию. Там можно настроить градиент, обводку, тень, тиснение и тп. Экспериментируй с:
Вот несколько моих вариантов размещения текста:
Может ты найдешь лучший с:
Жду от тебя твой вариант с текстом и стилем текста.
Crayola
наверное вот так
попробовала кисти , которые ты мне дала)
Ночка
Хороший вариант текста, но вместо обводки иногда лучше использовать Тень или Внешнее свечение черного цвета. Так текст лучше читается, потому что отбит от фона.
Не бойся использовать разные шрифты на частях ника. Можно сочетать рукописные и прописные шрифты.
С кистями неплохо поработала, к ним иногда можно применять внешнее свечение черного цвета, что бы выделить отдельные.
Создай новый слой над фоновым черным и сделай фон мягкой круглой кистью неяркого цвета, что бы не было сильно заметных черных дырок (слева у лица). Что бы проверить, что границы фона везде плавные, нажми ПКМ по фону вокруг графа и выбери Черный, границы убери мягкой стеркой.
Мой вариант:
Когда закончишь с кистями и фоном, сливай все слои в один - ПКМ по любому слою --> Объединить видимые.
Создай дубликат этого слоя так же через ПКМ.
Дальше чуть подразмоем шум на волосах. Фильтр --> Шум --> Уменьшить шум
Детали резкости сейчас на 0, ее будем делать в следующем шаге.
Далее Фильтр --> Другое --> Краевой контраст..
Значение примерно такое, экспериментируй с результатом, может тебе понравится по-другому.
Этот слой ставим на любой из: Перекрытие, Мягкий свет, Жесткий свет, Яркий свет, Линейный свет - смотря какой результат тебе понравится.
Тут меняется режим наложения
Можно снизить непрозрачность этого слоя, если сильно полезут пиксели.
----------------------------------------------------
!!Все изображения урока размещены в превью - при клике увеличатся.
В этом уроке я расскажу как делать разметку и вырезать дизайн для чата Августа.
Для начала нам нужны размеры чата. Мне были даны вот такие:
Открываем фотошоп. Создаём новый файл.
*фоновый цвет у меня был чёрный.
**высота зависит от желаемого изображения во фрейме.
*** ширину 2000pxя считаю наиболее оптимальной (будет смотреться не обрезанным на большинстве мониторах).
После создания основы фона делаем разметку направляющими.
"Просмотр-Новая направляющая".
Выбираем горизонтальную и высоту указываем такую, как высота баннера в чате.
Для удобства я делаю ещё одну направляющую - вертикальную 1000пикс.
Относительно её удобно рисовать. Мы можем представлять как будет выглядеть дизайн на разных мониторах.
У меня получилось вот так:
Теперь можем добавить картинку во фрейм.
Для примера я добавила вот такую:
*тут тоже всё зависит от вашей фантазии и умений.
** при помощи ранее заданной вертикальной направляющей мы можем представить, как будет выглядеть часть во фрейме и часть в списке посетителей.
***картинку во фрейме можно разместить в любом месте..В ДАННОМ случае она никак не влияет на остальные части дизайна.
****если вы хотите картинку во фрейме, которая продолжается от баннера и меню..конечно, вам её и нужно будет разместить в том месте где она должна быть при установке.
Переходим к рисованию навигации.
Создаём файл.
*ширину взяла 240, потому что в чате информация 250. (если взять 250 для навигации. она не влезет полностью).
**высота зависит от чата, для которого рисуете. (у некоторых в навигации огромный список всего, а у некоторых всё компактно). 400px я считаю наиболее распространённой высотой.
У меня получилость вот так:
Заполняем как вам хочется (направляющие тут не нужны):
Навигация готова.
Теперь нам нужны кнопки меню.
Размеров для кнопок нет. Я делаю практически всегда разные размеры.
Зависит от того, какой результат мне нужен.
Для урока захотелось выбрать такой размер:
Заполняем кнопку как вам хочется.
Отключаем слой "задний план". Для того что бы кнопка была полупрозрачной.
*это действие не обязательно. Мне просто захтелось такую кнопку.
Теперь переходим к сохранению кнопки. Если кнопка полупрозрачная..тип файла должен быть обязательно PNG.
Переходим в "файл-сохранить как".
Выбираем папку куда сохраним кнопку, даём имя файлу и выбираем тип PNG.
Теперь нам нужна активная кнопка (которая будет при наведении мыши).
Чаще всего редактируется статичная кнопка, добавляются какие то эффекты.
Я добавила обводку и чуть изменила цвета.
Теперь отключаем задний план (если нужно) и сохраняем.
Вернёмся к нашему дизайну и начнём его разрезать.
Способ вырезания, который я опишу в уроке - не единственный, но я захотела написать именно об этом)
Удалим направляющие. "Просмотр-удалить направляющие".
все направляющие должны исчезнуть.
Теперь нам нужно объединить все наши слои в один.
Жмём на любом не текстовом слое правой кнопкой мыши и выбираем "объединить видимые".
Появился один слой. Нам нужно убрать его из заднего плана.
Щёлкаем на нём правой копкой мыши, "Из заднего плана".
Появиться вот такое окошко.
Нажимаем "Да".
Выбираем инструмент "Прямоугольная область". Стиль выбираем "Заданные пропорции" и вводим размеры нашего баннера (у меня это 2000пикс и 90пикс).
Щёлкаем мышкой на дизайне..появляется вот такая пунктирная рамка. У меня на скрине она установлена правильно, если она у вас не обводит чётко угол..передвигаем выделенную область стрелками клавиатуры.
Далее "Редактирование - вырезать".
У вас вырезанная часть дизайна должна исчезнуть.
Теперь создаём новый файл.
Если автоматически новый файл предлагается создать тех же размеров, что и размеры которые мы задавали в прямоугольной области..значит скорее всего вы сделали всё правильно)
*фон выберем прозрачный.
После создания файла переходим в "Редактирование - вклеить".
Скопированный баннер должен появиться.
Теперь переходим к сохранению.
"Файл - Сохранить для web устройств".
Обычно я выбираю формат Png-8 или Jpeg. (где качество будет лучше).
Главное тут уложиться в вес 50к (это максимальный вес баннера на августе).
Пробуем разные настройки, двигаем ползунки..Задача - сохранить наилучшее качество и уложиться в вес.
Нажимаем на Save.
Возвращаемся к нашему проекту с дизайном. По такому же принципу вырезаем меню.
Теперь вырезаем часть, которая будет во фрейме.
Стиль прямоугольной области ставим "Нормальный".
И выделаем нужную часть.
Так же вырезаем, вставляем и сохраняем.
Возвращаемся в проект ели у нас есть часть для списка посетителей.
Аналогично выделяем, вырезаем, вставляем, сохраняем.
Дизайн разрезан.
Переходим к разрезанию навигации.
Объединим видимые слои.
Убираем из заднего плана.
Берём инструмент "Прямоугольная область", стиль "Нормальный".
Выделяем ту часть, которая будет отображаться в чате в свёрнутом виде.
Вырезаем, создаём файл, вставляем.
Сохраняем для web устройств.
Вес не должен превышать 10к.
С нижней частью навигации делаем аналогичные действия.
При сохранении обращаем внимание на вес (не больше 10к).
Всё. Дизайн нарисован и разрезан.
Можно устанавливать в чат.
Об этом будет следующий урок.
Мои уроки расчитаны на чатлан, которые все таки хотят научится рисовать, а не только уныло вздыхают об этом.
для рисования графников более всего подходят Photoshop CS или CS2, т.к имеют программку спутник ImageReady, которая работает с готовой анимацией, а не только создает ее как последующие версии фотошопа.
Самое сложное это даже не нарисовать графник, а правильно его сохранить. Мои уроки будут пошаговыми . а главное иллюстрированными. Поэтому и начнем с самого первого шага.
1. кликаем файл
2. создаем новый
после чего появится окошко, в котором мы задаем размеры нашего графника, они могут быть любые. Все зависит от требований того чата, в котором вы находитесь.
По образцу выставляем такие параметры и жмем ОК.
т.е. поле для нашей деятельности))
Для этого на панели инструментов кликните букву Т, как изображено ниже
выделив этим инструментом область, в которой будет находится слово, мы его можем как прописать в ручную, так и вставить ранее скопированное. Я обычно копирую, во избежание орфографических ошибок.
в принципе, основную работу мы сделали,самый элементарный графник готов.
При этом возникает проблема правильного сохранения, да еще и на прозрачном фоне, да еще и без белой кромки.
Для того, чтобы сохранить наше произведение искусства, мы воспользуемся той самой полезной программкой ImageReady. Переход в нее не составит труда. Внизу панели инструментов есть специальная кнопка для перехода.
Нажав ее, нужно немного подождать, т.к. програма должна загрузится и наш графник автоматически в нее перейдет. Кстати, бывает глюк в русифицированной версии, эта кнопка просто не кликабельна. Тогда придется сохранять файл в .psd формате и открывать вручную ImageReady. Ну не будем о грустном, тем более что переход в ImageReady занял всего пару минут. и что мы там видим.
это даст нам возможность видеть именно то состояние графника, каким мы его увидим после сохранения. Для того чтобы его можно было без стыда выставить на обозрение друзей в чате, нужно проделать некоторые шаги по настройке параметров оптимизации.
Если панель оптимизации отсутствует, то мы можем вытащить ее на свет Божий, следующим образом.
Вот как только эта панель появится мы начинаем выставлять параметры
Теперь сохраняем.
Вот и все у нас получился графический ник без фона. Получилось.
для того чтобы закрепить навык нарисуйте несколько графников просто так. И вы уже не забудете с чего начинать. В противном случае, вам каждый раз придется изучать этот урок сначала
Коменнтарии приветствуются, а на все вопросы я отвечу обязательно!
Читайте также: