Your Customers are Mobile, you will be too …

multiple images

In this tutorial we will show you how to rename dozen or even hundred of images at a time with Photoshop CS6 batch processing capabilities. This technique will work in all version of Photoshop including Photoshop Elements, Photoshop CS5 and Photoshop CS5.5. I am doing this tutorial as I have noticed a lot of people searching my site for it… Continue reading

Photoshop CS6 batch processing multiple images ready for the web

In this tutorial we will be showing you how to use batch processing to re-size an entire folder full of images you want to prepare for deployment on your web page. Rather than editing each photo individually, with one simple action we will change them all to 72ppi and re-size them all to suit your website. We all know we don’t want great big picture consuming a few meg of bandwidth each being re-sized by the browser. This is very bandwidth heavy so normally we would use Photoshop or Fireworks to re-size them etc. but when you are processing dozens or even hundreds at a time this can be quite tedious. This is where batch processing comes in. For this exercise I will be using Photoshop CS6 but most versions have this capability and are all pretty simple if not exactly the same.

This process has been testing and works also on Adobe Photoshop CS4, CS5, CS5.5 as well as CS6. The process remains unchanged across all these versions of Photoshop.
Continue reading

Note: This tutorial has been checked and moved for Photoshop CS6. The new Tutorial can be found here.

In this tutorial we will show you how to rename dozen or even hundred of images at a time with Photoshop CS5 batch processing capabilities. This technique will work in all version of Photoshop including Photoshop Elements. I am doing this tutorial as I have noticed a lot of people searching my site for it and getting pages that relate to other batch processing items but if you use those methods you could wind up losing a lot of files or just doing nothing at all. Recording a normal action and telling it to rename a file simply won’t work.

Continue reading

In this tutorial we will show you a simple way of staggering images as they go down your website. With this method if you wish to control the position of a particular photo you still can with inline CSS, however if you do not style a particular image the CSS will automatically stagger your images down the page.

The images will stagger like the images do in this screenshot I took of a test site.Images staggered on a website.

Continue reading

We all know that the biggest killer of bandwidth on our websites is the use of images, but how do we go about reducing this. What tricks can we use to create the same effect but without the expensive bandwidth totaling up rapidly on us. In this tutorial we will look at a number of methods available to us to reduce our bandwidth whilst maintaining the look and feel of our site.

Continue reading

A common problem encountered by web developers first starting out is making the background of all their columns go full height. Often when we give say our left column one background and our content another the left column’s(or right column) background does not go all the way to the bottom of the page. This throws out the look of the site. So we are told to use a background image in our wrapper that has the same width of the column.

But what happens when we are using a fluid layout? we can’t create an image to be the exact same width of our column if the column width will vary from browser to browser and screen size to screen size. Can we still make our background go all the way to the bottom of the page with a variable width column? Yes we can.

We can even do this for a 3 column liquid layout.

Continue reading

In this tutorial we will show you how to Create a watermark in Photoshop CS5, how to add it to a image and then how to set your Photoshop up so that you can apply this watermark to numerous images in one action saving you time. This tutorial is in 3 steps.

In the first step we will show you how to create an effective watermark for your images in Photoshop CS5. Next we will show you how to add them to an image. And lastly we will show you how to make use of Photoshop CS5’s batch processing capabilities to add this watermark to multiple images in one action.

Please note: This tutorial has been updated and moved for Photoshop CS6. This tutorial can now be found at Photoshop CS6: Adding a Watermark to Multiple Images.

Continue reading

Photoshop CS5 batch processing multiple images ready for the web

In this tutorial we will be showing you how to use batch processing to re-size an entire folder full of images you want to prepare for deployment on your web page. Rather than editing each photo individually, with one simple action we will change them all to 72ppi and re-size them all to suit your website. We all know we don’t want great big picture consuming a few meg of bandwidth each being re-sized by the browser. This is very bandwidth heavy so normally we would use Photoshop or Fireworks to re-size them etc. but when you are processing dozens or even hundreds at a time this can be quite tedious. This is where batch processing comes in. For this exercise I will be using Photoshop CS5 but most versions have this capability and are all pretty simple if not exactly the same.

Continue reading

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: