Register now or log in to join your professional community.
The PSD file that you have created, which is made of several layers should be sliced. Slicing is the technical term used to refer to breaking up of a single large image to multiple small images. One of the advantages of using sliced version of the PSD in your HTML page is that it will aid in faster loading of the pages. If the entire PSD file is going to be a single image file, then it will take a lot of time for the page to load, which in turn could affect the quality of the user experience. To slice your image, make use of the slicing tool available in PhotoShop.
Three types of slicing options are available in PhotoShop for breaking your web page into small pieces, namely Normal, Fixed Aspect Ratio and Fixed Size. If you are using the Normal option to slice your PSD file, the proportions of the image will be shown as you drag the slicing marker lines.
The fixed aspect ratio slicing allows you to feed the required size whereby the sliced portions will change based on the figures that you feed. For example, if you want to triple the width of the sliced image then you just need to enter 3 for the field pertaining to the width and enter 1 in the field for the height.
In case, you want all the slices to be of specific height and width, then choose 'Fixed Size'. Here you should enter the required sizes in pixel values.
Another easy way to slice the PSD is by adding guides to the image and using the 'Slices from Guides' option in the Slice tool. When you use this option, the file will automatically be sliced as per the guides. Remember, all previous slicing actions will be nullified when you use the 'slices from guides' option.
Once you have sliced the PSD file, make sure to save the sliced version. Go to file and save it using the option "Save For The Web." Save these images in the 'images' directory, which you have already created.
from my point of view, I like to use CMS like WordPress or Joomla. but if you are a designer that likes to work on PSD and like to convert them to Websites. the best way is to convert them using CSS and Html5 her is a helpful link.
https://thesiteslinger.com/blog/tutorial-how-to-code-your-psd-into-a-html-css-layout
you can use "save for web" option in photoshop file menu , or you can just Google "psd to html converter" you will find hundreds of applications doing that and even some online services doing that easily.
Do you need help in adding the right keywords to your CV? Let our CV writing experts help you.