By nahids29 on

Well i have seen in drupal themes that there are a image folder box and i wanna know if we have to create the whole page in photoshop then cut it into pieces and use a stylesheet to grow it on photoshop?

⋅ Categories: Drupal 5.x

Comments

tornupinside’s picture

tornupinside commented

I'm brand new here and just starting myself.... but I did it!

I just did the whole "design my page in photoshop and then Drupalize it" thing. Its not brain surgery, trust when I tell you that if I can do it, ANYONE can. I'm using drupal 6.2.... so things might be different in your version, but its really not that hard.

to get started simply do what you want to in photoshop, slice your page as you want and produce the web page as if you aren't even thinking Drupal.

Get the page's html and css set up as you want...... still not thinking about drupal. Everything needs to be viewing in the browsers you are testing with as you would like. put some fake content in there to help you get a feel for what everything is gonna look like.

Then comes the drupalizing! (have to take care of something but in about 10 minutes I'll post a crash course in the drupal'ization of a PSD)

tornupinside’s picture

tornupinside commented

Alright!

I assume you already have Drupal installed on your hosting server, AND that you have your html and css ready to go. (Oh, side note.... your css should be named style.css) So lets do this!

In the drupal directory

Open the "themes" directory and create a folder for your new theme. (D 5.x) (in 6.x you'll need to create your new theme folder in drupal/sites/themes/ AND create a .info file) Now navigate into the "Garland" theme directory. Grab the file "page.tpl.php" and download it. This file will pretty much be used to "build" your new theme.

Open the "page.tpl.php" file in your text editor, dreamweaver.... whatever. You'll see that Drupal uses the tag: print to print the specific sections in the page.

Since the page you have created is an html page first you need to make it PHP. At the very top of page.tpl.php you'll see:

// $Id: page.tpl.php,v 1.18 2008/01/24 09:42:53 goba Exp $

Copy/paste that into your created page at the VERY top.

Now in your created page you are going to replace your starting * html * tag through your starting * head * tag with this:

<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php print $language ?>" lang="<?php print $language ?>">
  <head>
    <title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>

Now as you look through the page.tpl.php page code you'll see these "php print" commands. All you have to do is paste them in between your * div * tags throughout your created layout.

If you have a "left column" and a "right column" find the area of the page.tpl.php that deals with these columns. (they are commented.... everything is)
You'll copy/paste the associated code into your created page like:

<?php if ($left): ?>
       <div id="leftnav">
<?php if ($search_box): ?><div class="block block-theme"><?php print $search_box ?>
       </div><?php endif; ?>
<?php print $left ?>
         </div>
<?php endif; ?>
    
<?php if ($right): ?>
         <div id="your right column">
<?php if (!$left && $search_box): ?>
         <div class="block block-theme">
<?php print $search_box ?></div><?php endif; ?>
<?php print $right ?>
         </div>

After transferring all the php code into your created page save it as "page.tpl.php"

The last thing you need to do after you get all your copy/paste stuff done is go back to the "garland" theme folder and grab the "template.php" and download it.

Now upload your images folder, template.php, page.tpl.php to your themes folder. Go into administer/site building/themes and active your new theme.

Ok, all that typing, I am bound to have messed up something. I'll check back and see if you get stuck. As I said I'm really new at this and there might be a better way to do this, but it worked for me.

nahids29’s picture

nahids29 commented

hey guys thanks for helping me out!

geoffrey_pizzutillo’s picture

geoffrey_pizzutillo commented

.. despite the countless web designers that use adobe photoshop to construct web sites on a daily basis - this work flow is fundamentally flawed. illustrator can be intimidating, but inherently outperforms photoshop in web design construction. even though the internet is still primarily bitmap dependent, beginning vector-based allows for much higher quality design. traditionally, photoshop is a photo editing application. on a side note ..

vm’s picture

vm commented

I agree 100%

_____________________________________________________________________
My posts & comments are usually dripping with sarcasm.
If you ask nicely I'll give you a towel : )

tornupinside’s picture

tornupinside commented

Starting with vector based graphics gives you more flexibility and on the backend nicer looking graphics.... but I don't see the work of drupalizing the finished product being any different.

Where ever you start, If you can get an html and css together.... you can drupalize it.