How to easily modify PSD slices?

Pin It

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

 

 

Pin It

News

New Special offer available! Till 29rd July.

2014-07-24 09:21:40
New Special offer is available - 3 selected templates are 30% cheaper. Check them.

Our Real Estate template ranked as one of the best!

2014-07-22 09:47:41
One of our Joomla classifieds template has been listed in top 10 best real estate Joomla template ranking by&n ...

Blog

CSS3 powered hover effects for your logo.

2014-07-25 13:00:00
Would you like to spice up a logo image on your site? Then keep reading :) We have prepared 6 examples of a mo ...

Modify JM Doctor color version in this simple way!

2014-07-14 11:52:15
In this article I would like to demonstrate how to change template color version in JM Doctor template followi ...

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