Как я могу создать рисованную графику для своего веб-сайта?

Я разрабатываю веб-страницу для веб-приложения, я новичок в веб-дизайне, поэтому простите, если я задал очень простой вопрос.

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

введите описание изображения здесь

поэтому я хочу знать, как вставлять значки в изображение, есть ли какой-либо специальный инструмент для создания этих значков?

Вы должны указать авторство (т. е. URL) для этого изображения. Я предполагаю, что это требование как для этого сайта, так и для того, с которого вы получили изображение (если этот сайт вообще разрешит это, хотя с указанием авторства это, вероятно, подпадает под добросовестное использование).
Использование SVG может быть полезно для чего-то подобного, чтобы их можно было масштабировать и изменять по мере необходимости в самом браузере.
Лучший способ создать рисованную графику — нарисовать ее вручную. Те, что в примере, выглядят так, как будто они нарисованы мышью или планшетом, обводка ровная.

Ответы (3)

Если у вас уже есть баннер и вас интересуют маленькие рисунки сверху, я могу придумать два способа их получить:

1) Купить их онлайн, уже сделанные. Такие сайты, как iStock или GraphicRiver, предлагают векторные иллюстрации с прозрачным фоном, поэтому достаточно просто открыть файлы и вставить их на свой баннер. Есть также бесплатные иконки, которые вы можете использовать. Взгляните на Vecteezy , The Noun Project или FlatIcon , и это лишь некоторые из них.

2) Нарисуйте их сами. Вы можете использовать свою мышь (Illustrator или Inkscape будут лучше для этого) или, если вы заинтересованы в рисовании, вы можете получить графический планшет. Маленькие не так уж и дороги, и в любом случае, если это ваша вещь, это будет не что иное, как инвестиция.

Удачи!

спасибо .. я решил нарисовать свой собственный, используя иллюстратор, который кажется более креативным и оригинальным.

Программ много, есть платные и бесплатные.

Просто чтобы перечислить несколько:

СВОБОДНО

GIMP

Окончательная краска

InkScape

Paint.Net

Оплаченный

Адобе фейерверк

Adobe Photoshop

Adobe Illustrator

CorelDRAW

Все они имеют разные кривые обучения, вы можете найти больше графического программного обеспечения, выполнив быстрый поиск в Google.

Если я правильно понял ваш вопрос, то у вас есть два варианта:

  1. Вы можете нарисовать значки вручную на бумаге и отсканировать их в программу редактирования изображений. Вы можете превратить «значок» в PNG фиксированного размера с прозрачным фоном или в масштабируемый файл SVG. Затем просто загрузите это изображение на свой веб-сайт, превратите его в ссылку и правильно расположите... используя абсолютные, фиксированные, плавающие и т. д. стили CSS.

  2. Вы можете встроить нарисованные от руки значки как часть самого фонового изображения. Затем вы будете работать только с одним большим изображением. Вы можете превратить различные части этого изображения в ссылки, создав URL-адрес карты изображения в чем-то вроде Dreamweaver. Это означает, что вы идентифицируете часть своего изображения (через координаты) как ссылку — область, которую вы можете «придать» той же форме и местоположению, что и на вашем фоновом изображении.