5 Easy Photoshop Tips to Improve Your Design Works (and Avoid Beginner Mistakes)

Photoshop has been used by many web designers to create their work and no exception with new designers that wanna start to get into the web design.

Some new designers always slow and make some mistakes when using photoshop. here I have tips to improve your design work.

#1. Save your final image with “Save for Web & Devices…”

When you finish your job doing an awesome design for preview on your web or web element for your template, some of you using “Save As…” to save your work, it’s not wrong but you will make your image size big.

With “Save for Web & Devices…” you can optimise your image to smaller sizes. it’s matter because size affects how fast your web gonna be, the smaller is better.

You can save your image at: “File” -> “Save for Web & Devices…”

In number “1” you can choose your format file and quality your image. Number “2” you can see your image sizes. And in number “3” you can see and change your image dimension.

Now what format file to use to save your image. there are GIF, JPEG, PNG-8, PNG-24, and WBMP.

You can save in GIF or PNG-8 for web element like icon and button or text image with no gradient or shadow.

Save in JPEG file for your photo or preview image and the image can’t transparent.

And save in PNG-24 for more complex images with half transparent or full transparent, like HD Icons, logo with shadow or images slide.

WBMP is monochrome images that usually use by old mobile devices. It’s rarely use now.

#2. Using Guide, Snap, and lock it

Guides are shadow lines in photoshop that will help you to place your design element. With “Guide” you can position each element from your design more neat and easy. You can create one by open menu “view” and choose “New Guide”, and then don’t forget to lock the “guides” by click on “Lock Guides” and snap it. “Snap” mean when you move your object it will snap perfectly on guides.

After you click “New Guide…” there is a form came out, in here you can choose a horizontal line or vertical line and then in what position you want to put it.

There is Great Extensions that really help me to create “Guide” and it’s easy to use. You can download it for free at: http://www.guideguide.me/

#3. Transform into Smart Object

Usually when you resize image into small object and then resize again into bigger object, your image will broken. But if your image using smart object thats not gonna be happen.

You can read more about Photoshop Smart Object on our previous article.

#4. Using Style

“Styles” is side window that usually has been show up when you start up Photoshop. You can use it when you have many element in your design that you want to transform into the same layer style in “Blending Options”. With “Style” you don’t have to open “Blending Options” every time you create another element.

If your window “Styles” not show up yet, you can open “Window” from top menu and click “Style”

To use your style, first you must have one layer that already has layer style and then click “Create new style”

After that you can apply your style into new layer

#5. Using more then one Layer & Group your layers

Same like “Styles”, “Layers” is side window that usually has been show up when your photoshop active. Don’t use one layer to edit your photo or image preview, because when that image become bad, you don’t have to start over again from the start. Group is important too because it make your design more neat and look professional.

If your window “Layers” not show up yet, you can open “Window” from top menu and click “Layers”

If you want adjust your picture, you can use “adjustment layer” by click the “adjustment layer” button.

When your design become more complex and has many layer, you must group it by click the “New Group” button.

That’s it!

I hope these tips can help you become a better designer. If you have any question or suggestion fell free to say on comment form bellow.

Don’t forget to Like our Facebook page or Follow us on Twitter to keep update with us. Enjoy!

– Written by R. Yahya –