7 time saving Photoshop tips for web designers
29.08.07Filed Under: Art & Design, Tutorial

As a Photoshop user for more than several years, although cannot consider myself as Photoshop experts, but I did had some tips and guides for Photoshop beginners and fresh web designers to do stuff faster and more efficient in Photoshop. With this tips, you can know more about Photoshop and learn some essential time saving skills. Here I have 7 in total.
1. Save frequent used layer style
Sometimes we do some layer style that is quite repetitive, for example I will frame a transparent grey border for each picture posted in my blog. Because they are the same, so I save it as my Layer Style. To save, just double click the layer containing the styles u want to save, then click the Styles tab and click “New Styles”. A window prompt out, name the style and save it. So next time, instead of going to the Stroke properties to make the border, I just click the styles I just made, convenient!
2. Record your repetitive job as Actions
I still remember when I was still studying, in a group project we did frame-to-frame animation. We have a total of 1800+ pictures to be make as movie. The picture taken is 640×480 and I need to resize to 320×240. And I resize the pic one by one… yes, is one by one. It took me two days to finish it. Now I rethink back, that was just dumb!
I learnt the record Action when I did internship two years ago. For example, I have 100 photos that need to be resize and publish for web. Load the photos in Photoshop, open the Action palette, create a new action and click the record button. Then, I resize it, save for web, and close it. Every step I do is recorded. Just stop recording it if your steps is done. Then i just need to click the Play button for the remaining 99 photos which will do the job for me! That’s a brilliant time saver.
3. Use keyboard shortcut
Using keyboard shortcuts is the first step to master Photoshop! I still remember the first time I force myself to learn select tools by memorizing the shortcut keys instead of clicking it by mouse. I put a paper in front of me, and write down all the keys of the tools at Tools panel. Start from here, I use keyboard shortcuts to do many jobs already.
To learn more shortcuts, you can go to Edit > Keyboard Shortcuts to learn the essential shortcut keys. You can even export it as HTML for complete review after you click the Summarize button.
4. Use Shape layers and Smart Objects more
Sometimes it is good to do design that is scalable, because one day, your client might need you to give him a higher resolution of logo design for print instead of web. So all the designs u did is already in bitmap format that will reduce the quality after resized and you have to recreate again which costing time. So by using the Shape Layers and Smart Objects, you can preserve the quality for various resolution which is good for maintenance.
5. Organize and name your layers
When designing web pages or UI etc, sometimes will have to create a lot of layers to complete the design. Because there is so much layers overlapping each other, if the layers is not well organized, you might ended up searching the layer one by one. So to prevent this, name the layers with unique names and group them into a folder if the layers are related. This is a very good practice to keep your layers well organized.
6. Optimize your Photoshop
Ever encounter it takes some time to open a huge file or while applying filter effect? Then it is time to optimize your Photoshop. You can do it by going to Edit > Preferences. Go to the “Plugins & Scratch Disks”, select the hard disc drive that has biggest space for your first or second Scratch Disk. Then in “Memory & Image Cache”, you can increase the value so that Photoshop can perform better next time. By the way, you can always reduce the background running program to free more memory resources for Photoshop ;).
7. Draw on paper before going to Photoshop
It is a very good practice to sketch or draw it out your ideas before illustrate it in Photoshop. I had several experience of staring in front of the white canvas for hours and can’t come out something or ended up bad designs. But if I start doodling around my sketch book, quickly I can get some interesting ideas or designs and then do it in Photoshop. This is more efficient and a more proper way of designing things right? So, always keep and bring along a sketch book by your side.
End notes
So here is it, the 7 time saving Photoshop tips for your convenient. As you know Photoshop is a very complex and extremely powerful tool and I still learning to benefit the most from it. For further reading please go to this site (opps, we have almost the same title) and this. Happy Photoshopping! ![]()






thanks for the mention, jayhan!
i haven’t seen your site before. but now i’ve added you to my feedreader!
thanks again
August 30th, 2007 at 2:36 amthanks for the support webee!
August 30th, 2007 at 10:03 amur blog looks cool too!
[...] [ reddit.com: search results ] 7 time saving Photoshop tips for web designers [link][more] [...]
August 30th, 2007 at 1:04 pmSome good tips for beginners, but most are common knowledge/practice for most seasoned designers IMO.
August 31st, 2007 at 12:30 am[...] 7 Tips para salvar tiempo a los diseñadores web / Jayhan Loves Design & Japan. Útiles consejos como organizar capas, crear acciones o simplemente la mejor de todas, ¡aprender atajos de teclado!. Expectativas para 2008: lo bueno, lo malo y lo feísimo / Espoiler. Calificación de seis series nuevas, con estrellas y toda la descripción necesaria. Todavía tenemos tiempo para que empiece Lost así que…. [...]
September 1st, 2007 at 12:30 pm[...] 7 time saving Photoshop tips that will save your time and increase your work efficiency. Head on over >> [...]
September 2nd, 2007 at 9:23 pmthanks for excellent information
September 5th, 2007 at 12:36 pmYo man, very interesting blog. It opens minds! Great job, bro!
January 19th, 2008 at 2:24 amThanks buddy, appreciate it
January 19th, 2008 at 11:27 pmVery good tips for users starting out or users that just need a reminder
To add on to tip number 2 about the actions, you could make it even faster and more effortless by using the Batch function under File>Automate>Batch, then next to Action, select your new action you created to do your resizing and the rest is pretty self explanatory. There’s a couple other ways to do this as well, but I believe this is the most user friendly IMHO.
October 25th, 2008 at 2:26 amBeautiful!
October 29th, 2008 at 8:10 am