Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / How can I convert PSD to an ZEN TEMPLATE?

How can I convert PSD to an ZEN TEMPLATE?

Locked

Views: 7,458

Results 1 to 20 of 32
This thread is locked. New replies are disabled.
30 Aug 2008, 4:15 PM
#1
dhanesh avatar

dhanesh

New Zenner

Join Date:
May 2008
Location:
India, Trivandrum,Kerala
Posts:
43
Plugin Contributions:
0

How can I convert PSD to an ZEN TEMPLATE?

Anybody please have any information on how to convert a** PSD into a actual working Template**.I am tired of those free template from zen users. Please.... have a variety in design..not those 3 column layouts again and again...:frusty:

I mean how to make those beautiful designs to turn into an actuall working template.

1)Slicing and converting into HTML
2)Turn it into a PHP.
3)Coding with appropriate sources from zencart.

Please have any idea....:(

30 Aug 2008, 4:18 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: How can I convert PSD to an ZEN TEMPLATE?

Sorry, but it doesn't work that way.

You have to style Zencart by editing the CSS file(s) and adding images, etc. in the template PHP files (usually begin with tpl_).

30 Aug 2008, 5:01 PM
#3
kim avatar

kim

Obaa-san

Join Date:
Jun 2003
Posts:
26,602
Plugin Contributions:
0

Re: How can I convert PSD to an ZEN TEMPLATE?

BTW- The free templates are made with 3 columns as the default, but that doesn't mean you have to use all three - you can shut them off in the Admin> Configuration> Layout settings

30 Aug 2008, 5:03 PM
#4
kim avatar

kim

Obaa-san

Join Date:
Jun 2003
Posts:
26,602
Plugin Contributions:
0

Re: How can I convert PSD to an ZEN TEMPLATE?

PS - a screenshot of the idea you have would help us to give you the best advice for implementing it.

30 Aug 2008, 5:14 PM
#5
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: How can I convert PSD to an ZEN TEMPLATE?

The pieces:

body
mainWrapper
header
left column
center
right column
footer

A Sliced PSD design piece can be attached to each of these elements or one of it's sub-elements, only if the element is used. By doing so one can recreate the PSD design.

No requirement to generate this into html as it will not normally be used

30 Aug 2008, 6:33 PM
#6
dhanesh avatar

dhanesh

New Zenner

Join Date:
May 2008
Location:
India, Trivandrum,Kerala
Posts:
43
Plugin Contributions:
0

Re: How can I convert PSD to an ZEN TEMPLATE?

kobra:

The pieces:

body
mainWrapper
header
left column
center
right column
footer

A Sliced PSD design piece can be attached to each of these elements or one of it's sub-elements, only if the element is used. By doing so one can recreate the PSD design.

No requirement to generate this into html as it will not normally be used

Ya i am expecting this type of answer.Can you please specify the steps involved in detail.Those template like in Template monster.

templatemonster.com/zencart-templates.php

I am don't talking of those simple right or left side contents customizing.I think you got the idea.Can you point out some tutorials of any on that kind.I know its a lengthy process.

30 Aug 2008, 6:37 PM
#7
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: How can I convert PSD to an ZEN TEMPLATE?

No tutorials that I am aware of

One must be familiar with the Zen Cart structure and a capable web designer and know the functions in PS. The remainder is just applying this knowledge

Do not use TemplateMonster as a guide

30 Aug 2008, 6:48 PM
#8
dhanesh avatar

dhanesh

New Zenner

Join Date:
May 2008
Location:
India, Trivandrum,Kerala
Posts:
43
Plugin Contributions:
0

Re: How can I convert PSD to an ZEN TEMPLATE?

Ya i searched and searched in the whole forum.But till not yet found an answer.:(

I do respect the guys who developed this amazing system.But they must also had provided some documentation of its User interface design aspect.

Regarding the Template monster,Kobra i can see how basic or say inferior the designs are in the forum to those in template monster.
(No intention to hurt anyone)
I do accept there will be negative aspects in them,but in the front end who wins?
Clients want that type of designs.I had done a site in website baker.
Its also a PHP oriented Open CMS .How nicely the folks documented step by step design conversion process from PNG to template.I was expecting that type of help from Zencart too.:dontgetit

30 Aug 2008, 7:13 PM
#9
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: How can I convert PSD to an ZEN TEMPLATE?

Template Monster templates are attractive

I was refering to how they assemble them as not to use them as a guide.

Search here for them and see the issues they cause by coding ourside of the structure.

Lack of documentation is a whole other matter...

30 Aug 2008, 8:15 PM
#10
kim avatar

kim

Obaa-san

Join Date:
Jun 2003
Posts:
26,602
Plugin Contributions:
0

Re: How can I convert PSD to an ZEN TEMPLATE?

It is extremely difficult to document an exact process because every design is different and add to that the dynamic nature of Zen Cart and couple it with it's ability to have different layouts on different pages and you have a nearly impossible task.

Start in the tutorials/FAQ with the how to's on creating a custom template and then break your idea in small pieces.

31 Aug 2008, 3:05 AM
#11
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: How can I convert PSD to an ZEN TEMPLATE?

Kim:

It is extremely difficult to document an exact process because every design is different
But even a "General" document does not exist for so many things

31 Aug 2008, 4:52 PM
#12
dhanesh avatar

dhanesh

New Zenner

Join Date:
May 2008
Location:
India, Trivandrum,Kerala
Posts:
43
Plugin Contributions:
0

Re: How can I convert PSD to an ZEN TEMPLATE?

I know that zencart is an open e commerce system.I do accept that its not a commercially oriented software.But i am just asking for a basic guide in a template building procedure.

I have bought a book e start your website with zencart.But thanks,they don't even mention these topics.But i wonder how those
guys at TM and others design and implement those sites.Is it remains a best kept secret forever???

I dont know.I think everybody is hiding something.May be its with some economic interest.

Thanks.:smile:

31 Aug 2008, 4:55 PM
#13
kim avatar

kim

Obaa-san

Join Date:
Jun 2003
Posts:
26,602
Plugin Contributions:
0

Re: How can I convert PSD to an ZEN TEMPLATE?

https://www.zen-cart.com/tutorials/index.php?category=4

There are no hidden secrets, but the process takes time to learn.

Start by setting up your override directories and then take the page one piece at a time.

BTW- I asked earlier for a look and that has not been provided. It is very difficult to give any specific advice without seeing the design.

31 Aug 2008, 5:18 PM
#14
dhanesh avatar

dhanesh

New Zenner

Join Date:
May 2008
Location:
India, Trivandrum,Kerala
Posts:
43
Plugin Contributions:
0

Re: How can I convert PSD to an ZEN TEMPLATE?

Kim,

I have designed 2 carts recently...

http://electropath.ca/
http://www.lockdownsurveillance.com/

I am fed up with those traditional designs.I mean can we move around the language selection over the header or say the cart over the header or better see this link:

osc3.template-help.com/zencart_20740/index.php
osc3.template-help.com/zencart_20844/index.php

Look at how they customize the header section:
the shopping cart,Currency selector,Search bar...
I mean not the design but their position.They have that freedom to move around.

I am stuck with this default settings.Mean i am bound to within the default settings of zencart.I think you understand

31 Aug 2008, 5:28 PM
#15
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: How can I convert PSD to an ZEN TEMPLATE?

What is a link to your design?

These things can be accomplished and still staying within the Zen Cart structure and NOT as TM does it at all

31 Aug 2008, 5:31 PM
#16
kim avatar

kim

Obaa-san

Join Date:
Jun 2003
Posts:
26,602
Plugin Contributions:
0

Re: How can I convert PSD to an ZEN TEMPLATE?

You can move anything you want most anywhere you want, look at the way the header_search is constructed - you can do the same for other sideboxes. You just have to think outside the box :D

31 Aug 2008, 5:58 PM
#17
1plm avatar

1plm

New Zenner

Join Date:
Jul 2008
Location:
Cape-Coast, Ghana WestAfrica
Posts:
53
Plugin Contributions:
0

Re: How can I convert PSD to an ZEN TEMPLATE?

Zenners, I have been wondering the same if I could combine work done in Photoshop and Dreamweaver and image sliced into a ZenCart Template.
An example of what I have in mind is to convert http://www.lilmodlaudia.com Which is a PSD into a Custom Zencart template.
Any Comments or suggestions are appreciated?
Peace.

31 Aug 2008, 6:19 PM
#18
dhanesh avatar

dhanesh

New Zenner

Join Date:
May 2008
Location:
India, Trivandrum,Kerala
Posts:
43
Plugin Contributions:
0

Re: How can I convert PSD to an ZEN TEMPLATE?

I am referring to this design:

http://electropath.ca/images/Template.jpg

Thanks

31 Aug 2008, 6:45 PM
#19
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How can I convert PSD to an ZEN TEMPLATE?

The only recoding needed for that is to move the language, currency and cart code to the header, and as Kim said, there are examples in the code you can follow. Yes, it would be nice to be able to make those moves with admin settings, but that would mean even more bulk to the standard code. The features line has to be drawn somewhere, and no matter where it is, someone will be unhappy with it.

Since those three elements are probably the most frequently desired in the header, perhaps someone should write a mod for that. I could see that as useful. It would still need customizing for each site, but having the bulk of the coding done would help less-competent coders.

31 Aug 2008, 7:04 PM
#20
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How can I convert PSD to an ZEN TEMPLATE?

1PLM - You can always cut parts of your big image and apply them to the relevant elements of your site.

In this case, the image as you have it will only really work for the home page. You could just use the whole image as the background for define_main_page.php, suppress the display of sidebars & header, and create transparent links positioned over the buttons in the image.

The other pages would require separate design, perhaps using the background of your big image.
You could use the button images in a menu with no problems.

By the way, the image you have created will not be able to be viewed properly in any but the very largest monitors - not a good idea when you don't know what your customers have.