What is the easiest way to create a symbol in photoshop?

[alecr6165513]

I am currently designing the user interface for the video game I am creating in unreal engine 4.  While designing the inventory I decided I would like to add a symbol of a keyboard and mouse.  However, while creating these, I realized they were really low in quality after i zoomed out.  I went about creating it by making a custom template with the dimensions 5000x5000 since I would like to achieve the best quality possible when importing the pictures over to unreal engine.  So what is the best way of creating a symbol or image in photoshop with the highest quality possible.  Any help would be appreciated.  Thanks.

[Semaphoric]

A custom Shape. Being a vector, it would retain its quality at any size, and be re-colored at will, non-destructively

[alecr6165513]

do you know how I could transform something I already have into a vector like this:

[Trevor.Dennis]

If you are looking for an easy solution, you need to start again using the largest size graphic you can find.

The graphic I used below is >5000 pixels long.  Select the white with the magic wand and delete it.

Ctrl click the rifle to load as a selection like below.

Then click on this icon in the Path panel, which will turn the selection into a workpath

The downside of this approach, is that the path will not be particularly clean.  It will have too many points

Note:  Makes sure Auto Add/delete is checked in the options bar.  this make life easier for you.

But being high res, it will be fairly easy to clean it up with the pen tool.  Remove the excess points, and fine tune the others.

When the path is OK, go Layer > New Fill Layer > Solid color

This will produce a new Shape layer from the path.

From here you can use the Shape layers to complete your graphic

Select all the Shape layers and make a Smart Object.

What is not so east to do as a vector are the textures you've used.  It is doable, but not an easy process with Photoshop.  If you have access to Illustrator, that would be a different story.

[angie_taylor]

In Illustrator you can use the LiveTrace function to trace the inage. Then expand it and go i to isolation mode to slect the elements you need. TheN just adjust it, choose color snd youre done

[alecr6165513]

I don't seem to spot a difference when i compare the two after importing them into ue4:

I have two icons.  One found in the default photoshop custom shape storage and the other i made out of shapes in the geometry tool.  Am I exporting the icons incorrectly or is this something i should take over to the ue4 forums instead?

[lambiloon]

yes you can create custom easily using pen tool then you can save it in custom shape option is photoshop.

thank you

[scindo]

As the previous responses said, Vectors are probably the way to go with this unless you want something very specific. Custom shape tool, pen tool, etc. Illustrator is also good for doing this.

[alecr6165513]

Do you know if there's a way I could convert an image(s) I have created to a vector?  For example I have this image i created? (minus black background which was added for viewing purposes)

[KShinabery212]

Curious, have you thought about using Illustrator to create the symbol?  Creating a vector graphic would allow for scaling without losing quality. 

Theoretically in Photoshop you might want to make it bigger, but keep it in the same proportion (with it being high rez).  Then scaling it when you import it.

Too bad you were not here in Germany this month.... we just had devcom and gamescom.  At devcom, we could have found you the right answer in a matter of two seconds.  So many developers in attendance.  It is always fun!!!!  If you are going to be around Paris Games Week is coming up.... another place to find out anwsers quickly relating to game design.  Then you have EGX in Berlin.

Sorry.... I am nerding out about the gaming industry. 

But not to get off track.... consider using Illustrator to create a vector graphic.  If you have issues using Illustrator send me a message directly and I will do my best to help you if I have time.

Cheers mate!

Gamer 4 Life!

[alecr6165513]

I haven't heard a lot about illustrator however, I did some research on it after you mentioned it.  I'm going to get the trial so I can understand how it works.  And I would love to go to a devcom but unfortunately i live up in Canada so travel is pretty hard. 

Thanks a lot for you help!

[angie_taylor]

You should use Illustrator for this as it allows you to design vectors while looking at a pixel preview. Photoshop’s anti-aliasing will make it difficult to determine where the edges of the vectors are and if they are exactly on the pixel you need. Here are some tutorials to help you;

[Semaphoric]

Well, in Photoshop, you can check "Snap Vector Tools and Transforms to Pixel Grid" in Preferences > Tools.

[angie_taylor]

Ut you cant preview in Pixel preview mode and outline mode which I think are really useful in Illustrator. Plus you have a gazillion more vector tools in illustrator. Its really a much better app for icon design. Omni Outliner is even better.