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:




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:



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



Click on the color field:



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



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:




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



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 :)





Special Offer - templates 30% OFF

2015-03-25 15:18:00
See our latest Special offer and purchase three Joomla templates cheaper. Take advantage of our 30% discoun ...

JM JoomClassifieds works with EF4 now!

2015-03-23 10:29:50
We are happy to announce that JM JoomClassifieds template is compatibile with EF4 framework now.This professio ...


How to submit Adsense and custom banners with Joomla 3 template?

2015-03-27 11:42:15
Every Joomla user can set custom image banners as well as adsense banners on the site. It's needed if a user w ...

How to get invoice?

2015-03-24 11:48:23
If you need to get an invoice for your purchase at our store you can download it at your account. Take a ...


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 ...