How to easily modify PSD slices?

A few years ago, the background effects such as gradients, rounded corners, shapes and shadows were able to do with images cut from PSD project only. We had to create a pyramid of code to achieve desired result in the template.
Nowadays, with the help of CSS3 styles, we can achieve the same result as well as optimize the template code and in a result simplify the work.

 

What are slices?

Each of our latest Joomla template is provided with PSD slices to make the template background images modification easier.
It means that every image that is used in the template is provided as layers in the PSD file.
After the image layer modification, it will be saved with the same dimensions and with the same file extension as the image that is used in the template.

Worth to mention is the fact that other elements such as banners and icons that we use on a demo site are also provided as PSD files.

 

How to modify slices?

First of all, you will need to install an application that runs PSD files, e.g. GIMP (free) or Adobe Photoshop. 
We will use the Adobe Photoshop CS6 and PSD slices for our JM-School-Tools Joomla 3.x template in our example.

Let's suppose that you want to change the blue template color version to other color.
Many template elements were made using CSS3 styles, so you will have to make changes in the CSS files (Joomla 2.5) or in the LESS files (Joomla 3.x) as well.

We will focus on changing the color of some background images.
The images for the blue template color version are located in templates/jm-school-tools/images/style4 directory:

 

psdslices-1

 

Let's open slices.psd file.
On the right side you will find groups and layers. Leave only the blue group visible as it contains all slices we will need for our example:


psdslices-2

 

Now, click the right mouse button on the layer that you want to modify and you will see a dropdown menu.
Choose Blending options -> Color overlay

psdslices-3

 

Click on the color field:

psdslices-4

 

Choose the color you wish and click the "Ok" button.
Now you will notice that the selected layer has a different color:

psdslices-5

 

Now, repeat this for all the rest of layers that you need to modify.
After making all changes, you can save slices as images.

Go to File -> Save for Web... and you will see the following screen.
Choose the slice tool and select all slices that you want to save as images:

 

psdslices-6

 

Click the "Save" button. Let's see our new images:

psdslices-7

 

As you can see, the saved images have the same names as images in the template. All you need to do now is copying them into images/style4 directory and overwrite the existing images.

Congratulations! You have modified images of your template :)

 

 

News

New special offer till 23th september.

2014-09-17 13:27:12
Check this week's Special Offer! These three premium Joomla templates presented below are now 30% cheaper.Our ...

JM Beauty Center - check some interesting info about this template.

2014-09-15 09:37:47
JM Beauty Center is our latest Joomla! 3 template addressed for any beauty salons related with services like h ...

Blog

See what people ask about JM Doctor - multipurpose services template.

2014-09-08 08:15:00
 We keep getting questions about JM Doctor template. Check most popular ones.

The Joomla 3 beginner's guide second edition already released!

2014-08-29 12:03:13
The Joomla 3 Beginner's Guide Second Edition is another step-by-step Beginner's Guide to the Joomla CMS.It was ...

Faq

Utility classes for showing and hiding content by device.

2013-11-04 14:02:29
When customizing your own Joomla 3 site for tablets and mobile devices, you may come to the conclusion that yo ...

What does the subscription mean in practice?

2013-10-10 11:35:35
Customers often have doubts what the subscription exactly means in practice.They seem to be surprised that the ...