Tutorials Photoshop Web Layout Splicing Images

Splicing Images

To start with you need to have Photoshop open, do this by double clicking on the PS icon on your desktop or by clicking the icon in the programs start menu.

image 1

Here we have the image were going to be splicing. It is a *.gif file with the dimensions 200x200 pixels. Feel free to save the image so you can practice splicing on it.

image 2

Now in Photoshop, click on File > Open or press CTRL+O and open the file to splice, whether you want to use this example one or one of your own. Find the file and click open.

image 3

Once open click on the slice tool or press K on the keyboard.

image 4

Drag the slice tool over the sections that you want to cut up and make sure that this is how you want it before you go any further with it. You can drag each slice to resize them if you make any mistakes.

image 5

Click on the 'Jump To Image Ready' button or press the shortcut CTRL - SHIFT + M.

image 6

To save your images as a HTML page layout with Image Ready creating all the HTML coding for you click on File > Save Optimized As or similarly you could press the shortcut (CTRL - SHIFT - ALT + S) Choose the directory you want to save your work, the index page (table code and images) will be the same name as the original image, in this case 'test-image' and all the graphics will be saved inside a folder called 'images'.

image 7

Here we have the finished product (with border set to 1). If you have some knowledge with HTML coding then you will be able to edit this code and implement it into another page or whatever else you want to do with it.

Splicing Images

And there we have it, my best attempt at a splicing images tutorial in Photoshop 7. I hope this helps you and comes in useful in the future.

subscribe to newsletter