Author Topic: Porting Template from Photoshop (Read 6984 times)

spiderwebb · « **on:** February 27, 2009, 11:27:51 AM »

Hi all Im sorry but I must be very very stupid, let me explain

I love WB and can modify the existing templates a bit to suite most of my needs. I want to begin using WB as a backend for my webdesign clients, but I cant seem to understand how to make an existing design into a WB template.

I use Photoshop and Dreamweaver and know my way around basic PHP. Photoshop can create a design as either html or CSS, so folks how do I do it?

below is a simple design (header, 3 col, footer) from Photoshop as both html and CSS please show me how to make either WB and I will write a Dummies Guide and submit any designs I make to the forum.

HTML Example

Code: [Select]

<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (index.psd) -->
<table id="Table_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3">
            <img src="images/index_01.jpg" width="800" height="150" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/index_02.jpg" width="176" height="402" alt=""></td>
        <td>
            <img src="images/index_03.jpg" width="481" height="402" alt=""></td>
        <td>
            <img src="images/index_04.jpg" width="143" height="402" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/index_05.jpg" width="800" height="48" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

CSS Example

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (index.psd) -->
<style type="text/css">
<!--

#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:800px;
    height:600px;
}

#index-01_ {
    position:absolute;
    left:0px;
    top:0px;
    width:800px;
    height:150px;
}

#index-02_ {
    position:absolute;
    left:0px;
    top:150px;
    width:176px;
    height:402px;
}

#index-03_ {
    position:absolute;
    left:176px;
    top:150px;
    width:481px;
    height:402px;
}

#index-04_ {
    position:absolute;
    left:657px;
    top:150px;
    width:143px;
    height:402px;
}

#index-05_ {
    position:absolute;
    left:0px;
    top:552px;
    width:800px;
    height:48px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (index.psd) -->
<div id="Table_01">
    <div id="index-01_">
        <img id="index_01" src="images/index_01.jpg" width="800" height="150" alt="" />
    </div>
    <div id="index-02_">
        <img id="index_02" src="images/index_02.jpg" width="176" height="402" alt="" />
    </div>
    <div id="index-03_">
        <img id="index_03" src="images/index_03.jpg" width="481" height="402" alt="" />
    </div>
    <div id="index-04_">
        <img id="index_04" src="images/index_04.jpg" width="143" height="402" alt="" />
    </div>
    <div id="index-05_">
        <img id="index_05" src="images/index_05.jpg" width="800" height="48" alt="" />
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

Thanks in anticipation

Edit:
Please use for code the code funktion of SMF. Thanks Matthias

erpe0812 · « **Reply #1 on:** February 27, 2009, 11:37:06 AM »

Hi

would be good to read the help pages.

All your questions are answered there.

rgds

erpe

spiderwebb · « **Reply #2 on:** February 28, 2009, 05:08:49 AM »

Hi erpe

Thanks for your reply, I have read the help pages, many times and trust me if they had explained what I was asking I would not have posted my request. I am sure I am not the only person out there who cant make heads nor tails of the help pages or there would be far more templates available.

Most of the templates I have seen are variations of the andreas01/maxdesign with over 20000 PSD templates floating around the internet would it not be nice to have a way the non WB experts could port these templates.

If this is not possible, I will just have to keep on designing websites without using WB but this would be a shame

Regards

Spiderwebb (Non WB Expert)

ruebenwurzel · « **Reply #3 on:** February 28, 2009, 08:22:09 AM »

Hello,

so maybe you have overseen this here:

http://help.WebsiteBaker.org/pages/en/advanced-docu/designer-guide.php

look at: adding wb functions, creating a wb template ....

all explained.

Matthias

erpe0812 · « **Reply #4 on:** February 28, 2009, 11:36:31 AM »

Hi Spiderwebb,

be sure that there are lost of wb-templates outside that will never reach any official gallery for people created them for their own or their customer's use.

It is that easy even for a newby in html and css to create a wb template that is not impossible to make your own templates or modify existing templates even if you are not a coder.

I created my first template by using the help pages and finished it 1 week after having started with wb. And I had only less skills reagrding html or css at that time (and none in php, the same as today

) .

And I know that there are a lot bakers outside that started the same way.

So it depends on you, to use this easy cms or move to another one.

And if you search the forum there are some examples of templates that have been ported to wb from other templates.

So if you are not able to port a template, ask someone to do it for you or learn to port it by your own.

rgds

erpe

spiderwebb · « **Reply #5 on:** March 03, 2009, 04:49:15 PM »

Thanks to you both for taking the time to reply to this post, still hasnt helped with my original question re code from Photoshop so I will pay a WB Coder to help answer my question the post tutorial after, once again thanks for your replies.

mr-fan · « **Reply #6 on:** March 03, 2009, 05:01:15 PM »

Quote

so I will pay a WB Coder to help answer my question the post tutorial after

...what a wasting.....

about a few months ago i only know a little bit of html&css...not more not less (no php - no templateexperience -no real good html skills)

-with the forum and help of some realy good members here i was able to edit a existing template for my needs and pimp it with a lot features...

-at this time i make with some others a new template-idea is getting running...

to ad a wb-function like a content-block or a menu is easy as it be....

regards martin

Argos · « **Reply #7 on:** March 04, 2009, 05:45:37 PM »

Actually your 'problem' has not much to do with WB. You seem to have trouble creating a working website from a PSD design. A WB template is just a working HTML page, without content. Instead of content there is the tag for content. Instead of a menu there is a tag for menu. Learning to create a menu from a visual design is often the hardest part of creating a template. But there is much information about that in the help pages and the forum. You should start with learning how to create working HTML from a PSD. After that changing the static HTML page into a WB template is peanuts.

You could use a commercial service for that if you like.
http://www.google.nl/search?hl=nl&q=psd+to+html

I do not recommend using Photoshop generated HTML/CSS. It is bad code most of the times, and only usable for mockup use.

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: Porting Template from Photoshop (Read 6984 times)

spiderwebb

Porting Template from Photoshop

erpe0812

Re: Porting Template from Photoshop

spiderwebb

Re: Porting Template from Photoshop

ruebenwurzel

Re: Porting Template from Photoshop

erpe0812

Re: Porting Template from Photoshop

spiderwebb

Re: Porting Template from Photoshop

mr-fan

Re: Porting Template from Photoshop

Argos

Re: Porting Template from Photoshop