8

I am developing a web page for web based application, i am new to web design, so forgive if i have asked very basic question.

i want to create icons and embed into my existing png image file. i have attached sample image below and circle the icon which i want.

enter image description here

so i want to know how to embed the icons into the image, is there any specific tool to create those icons?.

Improve this question
3
  • You should give attribution (i.e., a URL) for that image. I would guess that's a requirement for both this site and the one you got the image from (if that site would allow it at all, though with attribution it's probably covered under fair use).
    – Reinstate Monica -- notmaynard
    Nov 3, 2014 at 22:36
  • Using SVGs may be good for something like this so that they can be scaled and changed as needed in the browser itself
    – Zach Saucier
    Nov 4, 2014 at 3:39
  • 2
    The best way to create hand drawn graphics is to draw them by hand. The ones in the example look like they were drawn with a mouse or tablet, the stroke is consistent.
    – Phil
    Nov 4, 2014 at 3:49

3 Answers 3

Reset to default
11

If you already have your banner and are wondering about the little drawings on top, then I can think of two ways of getting them:

1) Buy them online, already made. Sites like iStock or GraphicRiver offer vector illustrations with transparent backgrounds, so it's quite easy to open the files and just paste them on your banner. There are also free icons you can use. Take a look at Vecteezy, The Noun Project or FlatIcon, to name just a few.

2) Draw them yourself. You can either use your mouse (Illustrator or Inkscape would be better for this), or, if you are interested in drawing you could get a graphic tablet. The small ones are not that expensive, and in any case if it's your thing it would be nothing but an investment.

Good luck!

Improve this answer
1
  • thanks.. i have decided to draw my own using illustrator, which seems to more creative and originality.
    – pappu_kutty
    Nov 4, 2014 at 7:03
4

There is a lot of software out there, some free and some paid.

Just to list a few:

FREE

GIMP

Ultimate Paint

InkScape

Paint.Net

Paid

Adobe Fireworks

Adobe Photoshop

Adobe Illustrator

CorelDRAW

All of which have different learning curves, you can fin more graphics software by doing a quick Google search.

Improve this answer
0
1

If I understand your question correctly, then you have two options:

  1. You can hand-draw the icons on paper, and scan them into an image-editing program. You can turn the "icon" into a fixed-size PNG with a transparent background, or into a scale-able SVG file. Then, just upload that image into your website, turn it into a link, and position it correctly... using absolute, fixed, float, etc CSS styles.

  2. You can embed the hand-drawn icons as part of the background image itself. Then, you'll be working with just a single large image. You can turn different parts of that image into links by creating an image-map url in something like Dreamweaver. What that means is that you identify a part of your image (via coordinates) to be a link -- an area that you can "shape" into being the same form and location as in your background image.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.