Ok, so I recently started designing a site using PSD CS3, and i must, it really is so much fun. One problem I have encountered is how to insert text into the document after it's been saved as .html. I can replace images with text, using an HTML ediotor, but how do I go about floating the text over the images? I guess what I'm asking is...what's the easiest way to do this and is there a way to create text (that will render as actual text in a browser after saved to a .html) within photoshop? thanks!
Here you go Sir this should get you started http://forums.digitalpoint.com/showthread.php?t=1156591&highlight=simple+enter+page
Well, my company is a web development and design company. What I suggest you do is save a PSD. What we also do is save the psd and then the html, so we can make changes to the psd and resave the html file as we are making changes to the web site.
yeah, but when i save the PSD file as a html web document, all of the text saves as images...is there anyway i can get them to render as actual text when saved as a .html document?
Oh, I am sorry I misunderstood your question. I have never heard of a way to do this, but again, I have never tried nor have I looked. We are a professional web design company.. I will give you our method and maybe it is something you can look into. I mean i saw you have CS3, is that just photoshop cs3 or the entire suite? Because we just slice images and then create and code it all in Dreamweaver, and then the text portion is put in over the images in dreamwaver.
basically what you're doing is something called "Not web design" You must code an HTML page, and insert images into it. The photoshop funcionailty with the save to HTML assumes youre using it for something small like a graphical menu, where all the text is saved as an image. No, Photoshop can't do this, but seeing as it's a Photographic retouching and manipulation program I won't count it against it -it was NOTHING to do with the web. Go get yourself Fireworks if you really really need to do things graphically instead of properly, and Fireworks integrates directly with Dreamweaver for all your WYSIWYG fun. But be warned, without doing it the right way, and by the right way I mean coding it by hand - there is no shortcut to profesisonal product. You cannot create a professional website using Photoshop. Stop trying. What you can do, and do VERY well in photoshop is retouch photographs. It's so good at doing that, they pretty much just put the word 'photo' right in the name.
I see your point here. But the great thing about PSD is that it renders very simple HTML code (just tables and images basically). What's the only other basic element a web page needs? text. I can build my templates around that (like floating text over images, or replacing images with text with an HTML editor). I think using a combination of PSD and an HTML editor is much more viable then coding from nothing. I'm sure there's great WYSIWYG editors out there that can do this for you, but I just don't have those. I understand PSD, I understand HTML--so I think I'll stick to my own methods. Thanks for the advice though
I don't understand what you mean when you refer to PSD, to me a PSD is a Photoshop Document. Photoshop is abbreviated to Ps typically. Would you do me a huge huge favour. Just keep an open mind and check out the features that Fireworks has. Just objectively look at it, download a demo nd build a little site using it. Compare the experience of building that site to your experience vuilding your very first Photoshop site. Check out some videos and tutorials and see which is better for you. Same copmany, one is for editing photos and one is BUILT to make websites. Just try it out and see if it's nice.
You do not have to use the whole PSD and every slice for your web page. For a section where you intend on posting the main content for the page... plan your slices accordingly. Make 1 thin slice that will cover the width of where you plan to post your text (or other content). Then use the "background-image" property with HTML or CSS to have that slice repeat itself to cover the height of your text area.
Actually based on your word, I went ahead and downloaded the demo for fireworks and dream weaver. You know, I could never understand why adobe makes so many programs related to web design, why not just make one?? Anyway, I'm going to give them a try..can't say that I'm impressed yet, but I'll keep you updated. This is the idea I had in mind. I was just thinking of re-sizing the slice to each individual page (my websites are largely static). But using the background-image property to repeat the slices is a good idea. How exactly is this done?
Adobe's lineup is great, because they have ONE tool for every task. Photoshop: to manipulate digital photos Illustrator: a vector illistration program InDesign: a multi-page layout tool for print. Pulls photos from Photoshop and Vector Illustrations from Illustrator to make a dynamite product Firewords: a web layout tool for the screen. Pulls bitmapped graphics from photoshop and vector elements from illustrator and lays them out in an interactive way that can be edited further in Dreamweaver Flash: a vector animation program, pulls vectors from illustrator and animates them Dreamweaver: takes HTML documents generated from Fireworks, existing websites or start with templates and insert photos from photoshop, and flash animations, or images from fireworks. Flex: Program interactive flash-fronted applications for the web or desktop, integrates with flash and dreamweaver. So there you have it, I mean, you technically can drive a nail with the handle of a screwdriver if you hit it hard enough, but if a hammer were available, cheaper and worked better - why wouldn't you just use the tool as it was designed to be used and then use the proper tool for the job?! I can make a professional level site without using any of these tools, not because I use the wrong tools, but because there are also free alternatives you can use. The downside is thayt since they are all published by different folks they can't integrate as tightly as Adobe's suite, but they still do their job. GIMP can interchange with Photoshop Inkscape.org can interchange with Adobe Illustrator Scribus can interchange with InDesign GIMP can interchange with Fireworks so some extent And flash animations should always always always be done in Adobe Flash - it's their format, don't use knockoff tools.
There's probably many ways to accomplish this... but for example... let's look at one of my sites (the one in my siggy) and "reverse engineer" it. My background is made up with 2 backgrounds. 1) The black to grey background was done separately. The CSS for this: body {background: transparent url('../images/background_01.jpg'); repeat-x top center;} Code (markup): 2) The rounded white box with border and shadow was done with Photoshop and slices. I made several horizontal slices as such: 1 for the header: scoopy.kernow-webhosting.com/images/background_02.png 1 for the text area: scoopy.kernow-webhosting.com/images/background_03.png 1 for the footer: scoopy.kernow-webhosting.com/images/background_04.png In your HTML code... give each div or table a separate CLASS or ID. In your CSS file you define them like so: #header {background: transparent url('../images/background_02.png') no-repeat top center;} #text-area {background: transparent url('../images/background_02.png') no-repeat top center;} #footer {background: transparent url('../images/background_02.png') no-repeat top center;} Code (markup): Be sure to define the height and width attributes, otherwise the image will not show correctly. #header { margin: 0 auto; width: 980px; height: 37px; background: transparent url('../images/background_02.png') no-repeat top center; } Code (markup): This will allow you to add your other HTML code for other images or text that will show on top of your background images. Also note here that we have background images on top of other background images
Ok, so i have an image background I want to use for <p> text. This background can only be repeated on the y axis (up and down, right?). My problem is that i want to set a margin for the text only, and not the text and background. As you can see from the screenshot, I need the text to be set to a margin only because the image needs to stay in line with the rest of the template. Here is the CSS i am using for <p> p { background-image: url(images/blogtap2_30.jpg); background-repeat: repeat-y; margin-left: 15px; margin-right: 15px; } HTML: any help would be vastly appreciated, thanks!
You will probably have to use <br /><br /> instead of <p> tags and make sure there is a separate <div> class for that text area and its background. Then use padding-left and right for the spacing.