Page 1 of 1 |
Horrordee
Soderator
Posts: 8866
Location: England
|
Posted: Mon, 9th Nov 2009 17:58 Post subject: Website templates |
|
 |
hello all,
i'm trying to build myself a website using templates found for free on the internet.
for example, i came across this one which I like alot:
http://www.templatesbox.com/templates/255.htm
Can be directly downloaded here:
http://www.templatesbox.com/download/255.htm
Anyway, I'm really struggling. I understand the basics / concepts of Photoshop / Dreamweaver (both CS4 installed), however I feel like i'm missing a link.
All of the template files come with one big over-arching .psd file which contains a mockup of the website (including fake text). They also include an html index page, which uses a images folder. I understand that in order to create the images found within the images folder, I use the "save to web" feature of Photoshop. I can successfully change a few of the buttons / text images, save to web, overwrite in the html images folder and then great.
The complexity comes into changing the templates in any way. Say, for instance, I do not want the "latest" news section on the above template. What i've been doing is deleting it from the HTML. however, the image slices completely mess up the layout. If i try deleting in Photoshop, then obviously the HTML doesn't match what i've done in Photoshop and it messes up.
Is there some tool which takes both the HTML index page (and corrisponding .css files etc if present), and the photoshop .psd, and then managages it on the fly? E.g. if i want to change something on the page, then it will let me do it?
If you've been so kind as to download the template I am currently talking about, and then open the index.html file - you will see that the whole thing is right at the top of the page. Say I want to move the website down slightly (to produce a border at the top too), then I struggle to do this. I have tried making the "slices" in photoshop higher, than saving to web, however it never seems to work correctly.
Another example, say I want to change the text on one of the buttons. I do that on the first layer, and then also do it on the mouse over layer. However, when I save to web it just saves one of the images. I am then having to rename the slice, and save to web again. It's just such a pain in order to change a simple button. I cannot believe it's this difficult?!
I'm really hoping there is an adobe product that does all this shitty bs for me?
Thanks for your advice / help as always!
HD
Space for rent. Contact me for rates!
|
|
Back to top |
|
 |
LeoNatan
Posts: 73194
Location: Ramat Gan, Israel 🇮🇱
|
Posted: Mon, 9th Nov 2009 18:12 Post subject: |
|
 |
I'm not sure how exactly the PSD and HTML are connected exactly, other than manual cutting? Perhaps because I don't use Photoshop and Dreamweaver, though. I opened the PSD, there are all the layers there, but it's one big image (like the single image in the jpeg folder). How you'd move from this image to the HTML table cells I'm not sure.
|
|
Back to top |
|
 |
Horrordee
Soderator
Posts: 8866
Location: England
|
Posted: Mon, 9th Nov 2009 18:24 Post subject: |
|
 |
Mate, nor am I. But i really appriciate you taking a look. All of the templates online follow this format, so I'm 99% sure i'm missing something!
Space for rent. Contact me for rates!
|
|
Back to top |
|
 |
LeoNatan
Posts: 73194
Location: Ramat Gan, Israel 🇮🇱
|
Posted: Mon, 9th Nov 2009 18:26 Post subject: |
|
 |
Are you even sure this is how it is supposed to be? Maybe they just supply the big image, and you are supposed to cut it into small cells? Again, not sure how Photoshop and Dreamweaver operate together, and what exclusive features they have... :\
|
|
Back to top |
|
 |
Cohen
Posts: 7155
Location: Rapture
|
Posted: Mon, 9th Nov 2009 18:28 Post subject: |
|
 |
Quote: | Is there some tool which takes both the HTML index page (and corrisponding .css files etc if present), and the photoshop .psd, and then managages it on the fly? E.g. if i want to change something on the page, then it will let me do it? |
No. It doesn't work like that. The general idea is, Photoshop PSD file of the design - give it to a skilled html/css coder to create the code clean. Slicing gives you awful results ; so the less slicing the better. You'd do well to hire a freelancer to make the tweaks for you. I'd offer to take care of it myself but my time is tied up with big clients atm.
troll detected by SiN
|
|
Back to top |
|
 |
Horrordee
Soderator
Posts: 8866
Location: England
|
|
Back to top |
|
 |
LeoNatan
Posts: 73194
Location: Ramat Gan, Israel 🇮🇱
|
Posted: Mon, 9th Nov 2009 18:35 Post subject: |
|
 |
Or just find another template from a different source. There are many CSS based templates which are much easier to manage than image based.
If I find any, I'll post.
|
|
Back to top |
|
 |
Horrordee
Soderator
Posts: 8866
Location: England
|
Posted: Mon, 9th Nov 2009 18:40 Post subject: |
|
 |
Yeh thanks, I've been looking for ages and can't find anything that looks any good, and doesn't require this psd->html magic!
Space for rent. Contact me for rates!
|
|
Back to top |
|
 |
Cohen
Posts: 7155
Location: Rapture
|
Posted: Mon, 9th Nov 2009 19:17 Post subject: |
|
 |
A design psd can be seen essentially in two ways:
One: slicing and coding using dream weaver or some other app. (or perhaps with semi-clean code and slicing blend)
Two: used only as a guide to create a pure html/css code from.
The latter is best for quality; thus a skilled coder will do little to none slicing at all.
troll detected by SiN
|
|
Back to top |
|
 |
Cohen
Posts: 7155
Location: Rapture
|
|
Back to top |
|
 |
LeoNatan
Posts: 73194
Location: Ramat Gan, Israel 🇮🇱
|
Posted: Mon, 9th Nov 2009 19:20 Post subject: |
|
 |
The templates in the first post are sliced from several layers (text buttons are from the text layers of the PSD, while the bg is from the various bg layers merged).
|
|
Back to top |
|
 |
Cohen
Posts: 7155
Location: Rapture
|
Posted: Mon, 9th Nov 2009 19:23 Post subject: |
|
 |
if you want to isolate a button, find all layers associated with said button and duplicate them into a new psd. Then merge flatten all the layers over a transparent bg, crop the canvas and safe it as a non-transparent gif. Then for example you can use ~ <img class="button name" src="images/thebuttonyoujustsaved.gif"/>
troll detected by SiN
|
|
Back to top |
|
 |
LeoNatan
Posts: 73194
Location: Ramat Gan, Israel 🇮🇱
|
Posted: Mon, 9th Nov 2009 19:26 Post subject: |
|
 |
Why gif? Gifs are awful for text, as they sometimes make text antialiasing awful. PNG all the way. 
|
|
Back to top |
|
 |
|
Posted: Mon, 9th Nov 2009 19:35 Post subject: |
|
 |
slicing and html tagging to images is infact rather nice and fast to do if u spend a little time invested in learning it, if you have any artsy skill you can knock up stuff rather fast and looks a ton better than standard crap....
photoshop packages and dreamweaver together really is rather nice toolset...
most the kewl stuff though is flash based for most part "gimmicky" etc but nothing beats a clean layout..
Id take a look also but my skill set has deteriorated over the years and ive forgotten way to much I blame piracy dont know about you lol 
|
|
Back to top |
|
 |
|
Posted: Mon, 9th Nov 2009 20:35 Post subject: |
|
 |
Dreamviewer is the easiest as it gets, when you make div tags and such it makes an outline -easier for you to see what's going on. Say you make in your HTML file sth like
<div class="menu"></div>
and in your css file you've make
#menu{ font-size:14px; height:70px; }
that will make a little box with the height of 70px, you can specify the details ofc, like whether you wish it to be aligned right, or left or so...
But recently I have begun to explore the world of jQuery, which rocks! You can get great looking templates here: http://chocotemplates.com/.
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson chiv wrote: | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. | 
|
|
Back to top |
|
 |
spankie
VIP Member
Posts: 2958
Location: Belgium
|
Posted: Tue, 10th Nov 2009 01:01 Post subject: |
|
 |
well the latest thing i started using is Adobe FleX. It all makes html/css look like kiddies playing with a bike when you are racing around with a ferrari.
click and drag and you have yourself a complete click and slide based zoomfunction or a custom designed graph with some data you supplied...
Still reading the books though...
|
|
Back to top |
|
 |
Page 1 of 1 |
All times are GMT + 1 Hour |