unfortunatly half way through writing this my print screen key stopped working :S so i will try and describe where everything is as best i canNote for The Gimp users once you have text and your text box and the image is just one layer, you have to manualy copy, paste then save the seperate images. i will write a seperate HTML tutorial for you on makeing the basic layout.
hello and welcome back to john's shoppe, after a lengthy abscence i have returned, with a few techniques and skills i can hopefully teach you all. my first topic will consist of 3 articles
Part1: Makeing and Sliceing the image and exporting it to HTML
Part2: building the code in HTML and CSS for your portfolio
Part3: how to upload your website to webspace via FTP
Ok then lets get started
Step 1:
these portfolios are intended for your FS screenshots, so as the basic background we will take a FS screenshot but add text and text boxes so we can use it as a website. preferably you are looking for a screenshot where the aircraft is at the top of the picture, so it will be in the banner area. ofcourse you do not have to, you can use any screenshot you like its just some advice. for my example i will be useing a screenshot from my
foxeh lady thread
this image is perfet as it has the aircraft at the top, and then a large open area for which to add content. also i forgot to mention this earlier, useing a 800x600 screenshot is advised, and i am happy to host portfolios on my webspace, so long as they are not stupidly big!
step 2:
ok now that we have an image we want to use, open it up in photoshop. add some basic text at the top, saying *yourname* screenshot portfolio or what ever you want realy.
ok then ctrl+shift+n to create a new layer, name this layer text box. select the marquee tool. once selected at the top you will see a box caleld style, change this from normal to
fixed size and set the size as 600px width and 400px height. on the new layer make a selection and fill it with white. open up the layers blending options (right click the layer in the layer selection window, and select blending properties.
set the
FILL OPACITY to 15% (this option is found on the main blending options page, Or select the layer in layer selection and at the top of the box you will see the two options opacity and fill opacity just change the fill opacity option to 15%)
next we need to set a stroke to give the text box a border. this is the last option in blending options, select it, and set it to black and 1px in size. click ok and you should have someting that looks like this
step 3:
ok now that we have the text box in place, and some text on the banner, its time to slice the image so that we can export it into HTML. sounds hard? its actualy very very simple
ok before we start sliceing we need to flatten the image, but first, save what you have as a PSD layerd file so that you can go back and edit things if you wish. ok once saved right click on an image layer, not a text layer and select flatten image. at this stage you can add a inside stroke to the image to give it some definition from the 'body' background of the webapge (you will understand that bit in the next part of this tutorial) to add an 'inside' stroke do it the same way as before, but where it sais outside, change that to inside. simple as.
ok, so we can finaly start to slice.
press K or on the main toolbar choose the tool third from the top on the right to select the sliceing tool. it is important here that we keep everything stacked blocks, like bricks as it makes it easier to edit the HTML later on.
your sliced image should look something like that, just without the white text all over it.
ok then so now we just go
file>>save for web
-set the image type to jpg.
-DO not set any optimization!!
-click save, at the bottom of the save window, by default is sais 'save as images only' change this to save 'HTML and images' [i] it is best to save this into a new folder. give the new folder an approriate name, set the save name to 'img' and click save. and thats it.
step 4:
you can now close photoshop, go to the directory where you saved your images and HTML, you will have a folder called images and a file called img.html. copy and paste these into a new folder and call it backup! this is essential as it will allow you to backtrack and have easy access to the origional HTML.
ok now go back to your origional folder, and change the .html document so it is called index.html
ok we have now finished the first part of this lengthy tutorial. i will post part 2 next weekend, maybe before depends.
ok enjoy, and please if you are unsure of anything give me a PM, or you can add me to msn john_hughes6@hotmail.com i'l be more than happy to help you out (given im not busy working or something)
thanks again
john
Pages: 1
