How to export a photoshop design to modx?

Hi I need to start working on this very soon at work (on monday) so I need immediate help because I am very confused.

It seems that with modx, unlike joomla there is a very simpler way how you can use your personal photoshop design in your modx website.

Can someone please tell me step by step how this can be done?

So to clarify exactly what I need:

I have a photoshop sliced design and I need to export it to modx, possibly without loosing the documents, navigation bar, etc... that are already found in it (which is the first time the site loads, with the default content that it already has).

I already tried to use the ’new template’ option and pasting the html but photoshop designs have images and I do not know where I can put the images. In fact, it worked, but without the images and without the content. All I need to know you can insert the images and possibly the content that it already has.

Thank you very much in advance!

P.S. I am using the latest version (0.9.6.2)

First of all, I would like to thank your for your abrupt response.

Secondly, I am working locally for now since it is simpler, and the assets/images folder contains only index.html and logo.png. Also, how and where do you insert these modx-tags?

Also, I managed to work out something, I create a new template, I inserted the html code, then I went to manage files, created a new folder (the images folder) and uploaded all the sliced images there. This way, when I loaded the site, it worked, but all the content was removed. Is there a way with the method that I used how can I put the content back? maybe by inserting the modx-tags that you mentioned? but how?

thanks

1) you need to create a new page in the MODxmanager
2) assign your template to the page
3) then edit your page and refill the content via the rte.

ps: your template must have a [*content*] tag.


imo it’s better to use the "assets/templates/yourtemplate/images" folder for structural design and leave the "assets/images" folder free for content images...


ps2: look @ the Minimal template to learn quickly how to use MODx tags...

Just to add on to what the guys have said....read the documentation, it will help a lot...and here’s more:

http://bobsguides.com/porting-your-site-to-modx.html
http://sottwell.com/how-templates-work.html

So to understand if i understood...

First I go to:
1: Resources
2: Manage Resources
3: New Template
4: Insert the HTML code that contains all the tables of the slices
5: Link the photoshop images
6: Go to preferences and set my default theme to my theme.

At this point, if i load the site, of course, it only appears the background without any content (I created a very simple design, which contains an upper rectangle (header), left rectangle (navigation bar), etc...

Now say I have a red rectangle as a header, which is 1024 * 50 (too keep it simple). In dreamweaver for example, you cannot add content in an image. Is there a way in modx to add content in this header (which is an image slice) and keeping it the same size? Like for instance using divs? If so, this is the only thing that I require to know how to implement(inserting the content (with modx tags, etc... in an image slice). I already read about modx tags and I basically understand what their usage is.

Any suggestions on this matter?

thanks

You can add content anywhere you please following the normal xhtml rules, which of course you can tweak further using css. A modx template is no different from your normal xhtml/css templates, except for the tags. Just tell modx where you want the content to go using modx tags. As pointed out above, add [*content*] in your template where you want your main content to be. Now, when editing your documents, anything you type/copy-paste in the visual editor will appear where you put the [*content*] tag. You are however not limited to this one content area...you can create others by creating other TV areas, e.g. sidebar_right, sidebar_left....If you went through the documentation above all this is well explained.

ok i think i understand the problem. you dont know how to do a cool/flexible template..?
you cannot (not 100% sure i’m a fireworks user.. ) export photoshop design and think all will be ready for the web, if you want to have a professionnal template, you need to rebuilt your design piece by piece, image by image.. and when all look ok in all browsers THEN go to modx.

tips: use background-image in divs to add content on image.

example : http://joplan.com/digg/div_site/

hope it help