By thedreampolice on
Sorry I am really having a hard time comming to grips with the theme engines. I am also learing css. Is there an easy way to go from a photoshop design to a template?
Sorry I am really having a hard time comming to grips with the theme engines. I am also learing css. Is there an easy way to go from a photoshop design to a template?
Comments
The way I transform design mocks to templates
You are in a common predicament.
What I normally do is pick an existing theme that has the same general layout (number of columns etc) and then spice it up slowly by removing and adding things. CSS is difficult at first but once you get to understand it, it's more powerful than HTML layout. I work with designers who create artist impressions of the site, and I translate it into working CMS/Drupal websites.
Use themes on PHPtemplate, they are easier to modify and understand.
Ofcourse if you need it all done externally and you are willing to pay for my weekends, I can get it done .
Otherwise I can guide you as much as possible pro-bono in the spirit of Opensource
-----
Web Development, Production & Marketing Advice - http://www.cmsproducer.com/click/26/3
Use Imageready
I use Adobe Imageready to export my photoshop designs. You can export the layout as an html file. There is also an option to use CSS divs instead of tables.
After you have the html file, you can modify it by referencing from an existing template.
Yes I have tried that with
Yes I have tried that with elements, but I just dont understand how to place drupal items in the css sheets. Again I am still learing css.
Drupal & Css minus tables
You can always create a table layout if you have a faint battle heart, or in CSS.
Create everything in div tags (use the existing drupal themes to get an idea of pieces that you can pull in to mae it dymanic - like references to columns, content, title, breadcrumb etc)..
In CSS, if you float:; all your DIV tags to the same side e.g if one div is class 'left_column' .left_column {float: left;} and do the same for the main body, they will stick together like table columns... and you can read some more CSS at www.w3schools.com for free. It's a good resource.
Once you begin, you can ask specific questions when you get stuck and there will always be a willing soul to help you
-----
Web Development, Production & Marketing Advice - http://www.cmsproducer.com/click/26/3
learn CSS
You can build table based drupal themes but I find it harder and less flexible than CSS. It took me many hours to learn to build table less layouts that worked in all the major browsers.
What I do now is I have built 2 plain html css layouts. One fixed width one fluid, and once the design has been finalized I pick the layout that is the closest and build a static html css page. Once I got that 100% working in all mayor browsers I open the phptemplete Bluemarine or Box grey themes and copy past the relevant php into my theme and I am done.
If it is urgent then I just modify a exiting theme that has the same layout, because it is faster, but mostly I like to do it myself. After a few sites you get better and faster and learn more and more tricks.
I would focus on learning the basic's of a CSS layouts before tackling drupal themes. Learn the difference between Classes, ID's and elements, and I would avoid inline styles as much as possible.
Here's some info I used:
http://www.sitepoint.com/article/websites-tables-parts-1-2
http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm
http://www.w3.org/TR/2001/WD-css3-multicol-20010118/
http://www.westciv.com/style_master/academy/css_tutorial/index.html
http://www.positioniseverything.net/articles/onetruelayout/anyorder (advanced stuff)
css list menus:
http://www.aplus.co.yu/adxmenu/intro/ (see examples)
http://www.alistapart.com/articles/dropdowns/
http://css.maxdesign.com.au/listamatic/
You also need to learn to set CSS for specific browsers. The most irritating browser for me is IE. To pass specific css to IE I us the IE Conditional Comments. (http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp). This for me keeps things cleaner.
As long as the IE CSS is after the other CSS it should override it.
You should be accustomed to build table based sites form PSD files. Once you are more comfortable with CSS you should find going from PSD to css much easier. Then it's just a short copy and past of php code and you should have a drupal theme. Once you get to this point you can look at more advanced themeing like overriding theme function or admin themeing. (http://drupal.org/node/55944)
Photoshop to Drupal: corporate website sample
As I promised in one of my posts here, here is a demonstration of a Drupal-based corporate web-site developed from a Photoshop design.
-----
iDonny - Web CMS Development - Web Design - Web Marketing Advice
Nope
There is no fast and easy way. It is just a matter of your web development knowledge :-/.
photoshop to Drupal & good web design: - no pain no gain
Of-course, like any good web design/production process, it takes work and skill. The underlying assertion in this discussion (at least in my opinion) is that Drupal is very skinnable and we do not always have to have a blog-like look for all Drupal Web-sites (unless that is the objective).
-----
iDonny - Web CMS Development - Web Design - Web Marketing Advice