Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

How to Slice Up Website Template Images? 
 
Cody DeHaan
Jr. Member
 
Total Posts:  9
Joined:  2008-04-22
 

Hi!

I am looking for any suggestions you guys have on slicing up a Magento store interface that is a large PSD file? (i.e. If you have the whole website as a large PSD file, how do you chop out the image-able sections vs. CSS’d sections) I’m new to Magento theming so any methodologies, ideas, and specific tips are welcome.

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Crucial
Enthusiast
 
Avatar
Total Posts:  770
Joined:  2007-11-07
Phoenix, AZ
 

Have you ever done a PSD2HTML conversion before? Or are you just wondering the best way to make a theme once the individual images have been extracted out?

If you’ve never done a PSD2HTML conversion, there are plenty of services that will do this. However, once it’s converted over to HTML/CSS, you will still need someone to turn that raw HTML/CSS into a theme that works for Magento (you need someone to integrate).

The Partners section has people that do integrations, and I can recommend some people that do themes as well. Just shoot me a PM.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Cody DeHaan
Jr. Member
 
Total Posts:  9
Joined:  2008-04-22
 

Crucial,

Thanks for the reply! I haven’t done a PSD2HTML conversion before. Perhaps this topic is more advanced than I am thinking. I am planning on making the theme myself, I just am unsure of the “proper” way (if one can say such a thing about image slicing) to cut the pieces I need to use as images out from background parts, etc.

Maybe I am simplifying my question too much.

 
Magento Community Magento Community
Magento Community
Magento Community
 
magento-marie
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-01
France
 

Hello Cody,

If you want to do it by yourself, here are some tips :

- try to figure out the different elements of your website… for instance, you can separate 3 type of graphics :
- images that you will need to slice as they are (header, static blocks...)
- images that will be part of a CSS style (background image that will repeat horizontally : you’ll only need to slice it 1px wide)
- parts that can be done in full CSS (agrey block with only a black border can be done in CSS… a menu item or a button witn only a background color and border color can be done this way too...)

- then create a new theme for your Magento site (browse the Designer Guide for detailed instructions, or copy the same folder structure from the default theme to your new theme).

- play with CSS in the boxes.css stylesheet mainly.

Don’t hesitate to ask questions if needed !

Good luck,
Marie

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top