1. Этот сайт использует файлы cookie. Продолжая пользоваться данным сайтом, Вы соглашаетесь на использование нами Ваших файлов cookie. Узнать больше.
  2. Внимание! Все изображения загружаются только на наш сервер! Для этого используйте кнопку «Прикрепить файлы» ниже или просто перетащите необходимые изображения со своего компьютера в окно редактора.

    Скрыть объявление
Скрыть объявление
Привет Гость! Рады вас видеть на нашем форуме. Вы видете это сообщение так как вы не зарегистрированы. Зарегистрируйтесь на нашем форуме и у Вас появятся дополнительные возможности.

Рисование иконок с нуля (растровая графика)

Тема в разделе "Текстовые уроки по Photoshop", создана пользователем Cheza, 16 апр 2019.

  1. Cheza Новичок

    Регистрация:
    22 мар 2019
    Сообщения:
    5
    Симпатии:
    3
    Баллы:
    3
    Пол:
    Женский
    В этой теме я буду делится с вами процессом создания индивидуальных иконок для чата.

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

    В работе используется графический планшет.
     
    Последнее редактирование: 16 апр 2019
  2. Cheza Новичок

    Регистрация:
    22 мар 2019
    Сообщения:
    5
    Симпатии:
    3
    Баллы:
    3
    Пол:
    Женский
    Создание торта на юбилей чата.
    (Иконка используется как награда чатлан)
    Шаг 1.
    Самое важное придумать, какой именно торт создавать, на помощь здесь могут прийти референсы. Для себя я определилась, что торт будет бисквитным, с шоколадной глазурью, клубникой, взбитыми сливками. Проблематично будет нарисовать полностью шоколадный торт, так как в большинстве анкет в чате установлен тёмный фон, саму глазурь нужно сделать с молочным шоколадом и множеством бликов, чтобы она не сливалась с фоном. Свечи было решено делать в виде цифр, чтоб информация с ачивки считалась быстрее. Отрисовав для себя несколько эскизов, можно переходить к следующему шагу.

    Шаг 2.

    Я создаю холст в 2-4 раза больше необходимого размера, и ставлю разрешение 300, в конце я сохраняю иконку в уменьшенном размере и с разрешением 72. Так удобнее рисовать, а уменьшив работа выглядит более качественно.

    Рисуем бисквит. Удобнее всего сделать это выбрав круглое выделение и нарисовав овал. Затем этот овал копируется вниз а всё, что остаётся между заполняется цветом, для удобства можно использовать прямоугольное выделение. В природе нижний овал обычно больше верхнего, так как мы смотрим на объект с верху, но здесь в иконке этим можно пренебречь.
    1.png

    Шаг 3.

    Рисуем шоколадную глазурь с подтёками. В рисовании можно использовать разные способы, я делаю это уже с помощью графического планшета. Жёсткой кистью без дополнительных параметров (деформация формы) намечаю плоско одним цветом глазурь. Можно использовать лассо, либо рисовать область шоколада пером. Либо использовать любой другой удобный для вас способ. Главное сделать всё это на новом слое! и подписав его Шоколад, чтоб в дальнейшем не потерять! Шоколад имеет объём, поэтому рисуя выходим немного за границы бисквита, всё как в жизни)) 2.png

    Шаг 4.

    Рисуем клубнику, я сделала это с помощью лассо и немного отредактировала ластиком и кистью. Её я расположила в 2 слоя, на первом сама клубника, на втором её зелёные хвостики. Так будет удобнее.
    Screenshot-2.png
    Screenshot-3.png
    Сейчас возможно будет нудно, но это важная информация. В нашем торте уже появилось 4 цвета + фон, это без прорисовки теней, света. На этом этапе уже может возникнуть целый ряд проблем. Во первых раз уже говорится о клубнике, то этот объект в некотором роде опасен для начинающих художников. В клубнике 2 контрастных цвета (контрастные цвета это те которые расположены максимально далеко друг от друга на цветовом круге). Неправильное сочетание этих цветов может вызвать отрицательные эмоции. Как сделать всё правильно? Достаточно посмотреть как это происходит в природе. Природа лучший художник. Взгляните на розы, в большом количестве зелёной листвы есть только несколько красных бутонов. В разрезанном арбузе мы видим большую красную мякоть, и тонкую часть зелёной корки. Сочетание этих цветов равном соотношении ведёт к дисгармонии, а если ещё они по тону будут одинаковыми то неприятных чувств, глядя на работу, не избежать. В клубнике первое место отдаётся самому плоду, а зелёный хвостик уже второстепенен, поэтому он должен занимать меньше места, чем красная составляющая.
    Шаг 5.
    Промежуточная проверка. На этом этапе я обычно начинаю проверять тон изображения, я себе не доверяю)
    Создаём новый слой поверх всех, заливаем его чистым чёрным цветом. Переходим в режимы наложения слоя, и ставим "цветность". Произошла магия, торт стал чёрно-белым. Этот слой выключил цвет, оставив только тон изображения. Теперь то можно себя проверить) если у вас всё слилось, то у вас проблемы)) Не переживайте у меня тоже слилось)) Здесь можно обрадоваться, что мы рисуем в фотошопе). Выбираем слой который слился заходим в его коррекцию -> цветовой тон/насыщенность (ctrl+u), двигаем ползунки. При этом включаем и выключаем чёрный фон. Добиваемся результата который понравится нам.
    Screenshot-5.png
    Максимальный контраст здесь создаётся именно на бисквите и шоколаде, так как они занимают большую площадь. Если сделать клубнику ярче, а бисквит например тусклее чем ягоды то будет дробно, а это не хорошо. Такая дробность может вызвать головную боль, в местах общепита, где большая проходимость людей, часто размещают на полу, либо где-то ещё контрастные линии, прямоугольники, шахматные доски и т.п. Это сделано для того, чтоб люди там не задерживались и скорее освобождали места для новых посетителей.
    Ещё для проверки хорошо отдалить подальше работу или отойти от неё, посмотреть всё ли нормально считывается.
    Screenshot-6.png

    Шаг 6.
    Безе или какой-то взбитый крем. Я решила, продолжить украшать торт и добавила немного крема, на этой этапе очень условно в прицепе как и ранее. Те что лежат наверху я приглушила, чтоб выглядело цельней. Не забываем проверять тон.
    Screenshot-7.png

    Шаг 7.
    Ура наконец-то свечи! Рисуем необходимое количество или цифру как в моём случае.
    Screenshot-8.png

    Шаг 8.
    Я уже было решила остановится с деталями, но забыла главное. Как же люди поймут, что этот торт именно для нашего чата? и решила добавить печеньку с лого чата. К таким моментам стоит подходить аккуратно, и отвечать себе на вопрос какую основную информацию сообщает ачивка? По тому, что получилось понятно, что она выдана в день рождения, а если точней в десятилетний юбилей, я считаю это главное и только потом уже может возникнуть вопрос, "Чей юбилей?" Исходя из этого выстраивается иерархия: 1 Большой торт, далее 2 свечи среднего размера и 3 печенье маленькое. Не переживайте все и так всё заметят.
    Screenshot-10.png

    Шаг 9.
    Проверяем всё по тону ещё раз, исправляем максимально всё то что нам не нравится. И только когда рисунок начнёт вас устраивать идём дальше и наконец-то рисуем!) На этом этапе, после всей этой писанины, дизайна, построения начинаешь понимать, насколько сильно ты любишь рисовать))
    Сначала я добавила тени, затем свет.
    Screenshot-11.png
    Необходимо всегда анализировать работу. На данном этапе мой торт стал размытым, ему не хватает более чётких линий. Эта ачивка будет размером 100 на 100 px, поэтому следующее, что я делаю это беру жёсткую кисть без динамики формы и цвета шириной в 1px начинаю уточнять границы разных объектов на торте. В основном все действия происходили с шоколадом его глазурь имеет глянцевую поверхность с контрастом тени и света это необходимо передать.
    Screenshot-12.png

    Шаг 10.
    Белый крем на торте похож на чеснок но никак не на что-то сладкое, это нужно как можно скорее исправлять. Наглядевшись на референсы я исправляю его форму, затем корректирую уже объём по средствам тона и цвета. И перехожу к клубники, намечаю свет, чтоб клубника выглядела более реалистично я беру светло красный (чуть ли не белый) и рисую тонкую сетку на клубнике только в той части где блик, потом беру мягкий ластик и немного стираю. На нескольких плодах я добавляю пару тёмных коротких линий, чтоб немного увеличить детализацию. Здесь главное не переборщить, излишние элементы будут смотреть шумом в маленькой иконке. Как можно чаще отдаляем работу.
    download.png

    Шаг 11.
    Я добавляю линии на бисквитную часть торта, так как большая площадь одного цвета смотрится скучно. Затем берусь за свечи и прорабатываю их.
    Screenshot-13.png

    Далее наступает переломный момент, я ставлю этот нарисованный торт рядом с другими нарисованными наградами для чата, встаю из-за компа, немного отхожу от него смотрю на торт, а он мне не нравится! [​IMG] И я не понимаю, что именно не нравится, обычно в такие моменты я откладываю работу и потом либо придумываю как всё исправить, либо просто забиваю. Но тут дедлайн! Начинаю приходить мысли "может вообще его не делать? и удалить все записи с форума?" Разозлившись на себя я ухожу пить чай, потом немного отдохнув я пытаюсь представить будто работу рисовала не я и начинаю давать себе комментарии.

    Первое, что я исправляю это цвет цифр, я делаю их спокойней, более жёлтого цвета, затем до меня наконец доходит, что бисквит выглядит совсем не аппетитно, и я полностью перерисовываю его на коричнево-рыжий, возможно его пекли со сгущёнкой) и рисую только одну горизонтальную линию на нём, давая понять что торт состоит из двух коржей, затем я начинаю исправлять шоколад избавляясь от слишком тёмных оттенков. Затем я понимаю что печеньку нужно дорисовать, делю ей неровные края с небольшим зигзагом. В завершение крем внизу делаю чуть теплее. Фуух сейчас меня удовлетворяет мой торт.
    Screenshot-14.png
    Так же я проверяю торт на сером фоне, такой используется в одном дизайне чата. Чтоб смотрелось лучше на всех иконках я делаю тонкую чёрную обводку. И снова проверяю в чб.
    Screenshot-16.png
    Бисквитная часть торта стала более обобщённей, но ничего не слиплось. И напоследок я сохраняю картинку с прозрачным фоном в необходимом размере.

    [​IMG]

    Это мой первый подобный урок, если у вас остались вопросы спрашивайте.
     

    Вложения:

    • Screenshot-13.png
      Screenshot-13.png
      Размер файла:
      94,9 КБ
      Просмотров:
      1
    • Screenshot-14.png
      Screenshot-14.png
      Размер файла:
      97,4 КБ
      Просмотров:
      0
    • Screenshot-16.png
      Screenshot-16.png
      Размер файла:
      152,2 КБ
      Просмотров:
      0
    • image.png
      image.png
      Размер файла:
      20,5 КБ
      Просмотров:
      0
    MissNervoza нравится это.
Здравствуйте! Кажется, вы используете AdBlockили другой блокировщик - могут быть недоступны некоторые функции сайта. Добавьте, пожалуйста, наш сайт в исключения. Спасибо за понимание!