Honesty Rocks! truth rules.

creating a simple webpage with photoshop! really easy

HOME      >>       Graphics, Design & Animation

marijnnn

well, basicly, what you have to do is make your background in photoshop. you take just any picture, edit it as you wish, so you finally have the background for your website.then you save your picture and open imageready, which is delivered together with ps.you open your picture and choose the slices tool. you draw a rectangle for the area where your text should come. you can draw more of them if you want several text areas, for example: you want an area for some sort of menu and then you want a menu where the text will be. once you're ready, you choose 'save as html' in the file menu somewhere. now you'll have a html file and a folder with the image slices. open the html file and in the cell that should contain your text, you just start typing. your text will be in the right position and you'll be able to see your background. or you could open it with frontpage or words or whatever wysiwyg editor if you're not that good at html.see? it's really easy to make a good looking websitecheck http://forums.xisto.com/no_longer_exists/ to see an example. this one is a little mor advanced. the picture opens in a new window that has the right size and the text is opened in an iframe. but that layout is done just the way i described above.you can see the code by rightclicking just next to the border and choose 'view source'. feel free to use it. but please don't just copy it, try to understand it :)


k221405241470

Nice stuff, but if you have a 56kb and you try to open 260 kb of home page, you'll suicide :)


Neo

Thanks I was looking for the same since I got some nice templates.You could use them from :https://www.templatesbox.com/


marijnnn

another hint, hehe:in photoshop, you have an option in the file menu called "save for web"choose it and then at ther right top somewhere you'll find an a little arrow that expands to a menu. in that menu, choose the 'file size' option'pick a file size of about 70kb and then take the 'auto choose jpg/gif' option thing.it will save to a file of 70 kb and try to make it look very good by choosing the best compression.really cool.the rest remains the same: open the jpg/gif file in imageready, slices, save as web,...


vietpost

I tend to minimize the use of images as much as possible but your guide is pretty good to me. We cin indeed create a nice site with photoshop but if we "abuse" it too much, there will be a counter-effect. Someone may not be patient enough to wait, wait and wait for your website to load and at last it turns out to be a gingerbread ! :)


marijnnn

hehe, you're right. but pictures are cool when they make it look nice.pictures suck when you use 1246 pictures on one page.next to this, it's an unwritten rule that you shouldn't use too much animations to your site. they tend to irritate people.don't use pop up windows too. hey, maybe we should write down all of the unwritten rules in a new topic :) good idea if i may say so :)


gritto

i'm pretty sure you can use the splice tool before you import it into imageready, if i'm thinking of the correct thing, if i'm thinking that the splice tool is that kind of blue box that you can make, then yea, i'm pretty sure you can do it in photoshop beforehand.


marijnnn

you can use the slice tool in ps and then import it to imageready. it's all the same :)or you can download 'the gimp'. it has somewhat the same features.

Notice from moonwitch:
mentioning of illegal ways to obtain software is a violation of the TOS thus I have removed the reference

wannabeeaweak

but u don't know where u can get maybe get photoshop to try for like 30 days


marijnnn


vietpost

content removed, please do not discuss illegal activities.

wannabeeaweak

thanxs i went there found some stuff i can use for my web site.

thanxs for the info. but one more question there any way for me to build a site like gamespot.com and beable to get there source code and use and change and stuff????


marijnnn

thanxs i went there found some stuff i can use for my web site.

thanxs for the info.  but one more question there any way for me to build a site like gamespot.com and beable to get there source code and use and change and stuff????

<{POST_SNAPBACK}>

well, you could go to the 'view' menu of your browser and choose 'view source'

then you'll have the html, so you can fake the layout and stuff.

 

but if you want the coding, that's impossible. they use jsp i think and the only way to get that code is by asking them :) but if you want it to look the same, you just have to copy the html as described above.

then, in the html, you'll find some links to 'js' files and 'css' files. you have to copy those too. then, you'll have their layout. but i think it's easier to just start from scratch :)


Bigyan

Hey marijnnn,I agree it all looks cool ; but do look at the other side of the fence, the grass is definitely not greener out here. You'll need a MBps connection to view these image only sites. And one thing for sure, you won't be able to edit your web pages easily and creation of DYNAMIC web page is not possible.By the way I tried out this idea on a project presentation on local HDD. and it surelu looked gr8. But guess it's an altogether different matter for WEBBye,Cool.techie


marijnnn

why wouldn't it be possible to create a dynamic website with it? just have php/asp(.net)/jsp fill in the text inside the table, and you have a dynmaic website. make some parts into links and it'll work just fine


ChronicLoser

heh...didn't really need it, but I'm sure this tutorial would help many new comers to the webdesigning world ^_^