PSP Ready at Soushi | Free Adobe Photoshop Tutorials

Create a Sony PSP Ready web layout in Photoshop.

Alright, how’s it going? Today we’re gonna be creating ourselves a Sony PSP Ready Website Layout. Okay, kinda wordy. So what does this mean? Well it’s not rocket science really, it’s a web layout which is ready for the PSP.

What? Ah okay, well basically it means that if you follow the guidelines in this tutorial when creating your layout, you’ll have a website which PERFECTLY fits in your PSP browser. Actually i’m not sure if the new PSPs (Slim & Light and the newer one) have larger screen, but i’m working off the “Fat PSP”.

A PSP ready website is cool if you want to allow people to also be able to access your site’s content via their PSP, without having to scroll ages to the right or left. It’s also interesting if of course, you want to make a website which’s sole purpose is to be viewed on the PSP. It looks damn good too when you view it on your PSP trust me . Let’s get started!

Create a new canvas, 480×400 pixels.
Fill in your background layer with white.
Create a new layer, name it Header and get hold of the rectangular marquee tool. Use these settings.
Fill this selection in black, deselect and move it to the top of the canvas.
Create a new layer and name it Menu. Grab the rec. marquee tool again and use these.
Fill the selection in with black, deselect and move it just under the header layer so that they are touching.
New layer, name it Content, get your rec. marquee tool, use these.
Fill in with black, deselect, bring right under the Menu layer.
New layer, name it Footer, use rec. marquee tool, use these.
Fill in with black, deselect, place it under the Content. Your canvas should now be filled with black.
In the layers palette, move your Content layer just beneath the Menu layer.
Go to your header layer and bring up the blending options, use these settings.
Next go to your Menu layer, use these blending options.
Go to your Content layer, add a colour overlay:
Finally go to your Footer layer and use these.
Now get your Move Tool, and move the Footer layer 1 pixel up using the Up arrow key on your keyboard. This is so the stroke is inside the canvas. After all these steps (including this one) you should have something like this.
You’ve got your basic layout done, now we’re going to add all the little details to spice it all up!
So type your website name, i used the font Trebuchet MS, bold size 24pt.
Add these blending options to it:
Create a new layer, name it logobg and select the rounded rectangle tool. Now draw a rectangle which is a bit longer than your text. Optionally you can leave some space like i did as i will be adding a little logo.

Go to the blending options and use these settings.
Now duplicate your logobg layer, right click it in the layer palette and choose Clear Layer Style. Now set the Fill Opacity to 0%, go to blending options and add a stroke.
You should have something which looks like this, note how i left space when i created the rounded rectangle to add my logo.
Next up is your menu, i used Trebuchet MS once again, all in capitals, size 8pt. Copy and paste the layer style from your website title to your menu links. I added some pins from the default shapes to make it more interesting.
Go to your Content layer, create a new layer above it, name it gradient. Now CTRL+Click your content layer to select it. Set your foreground colour to black. Grab your gradient tool, use these settings.
Now inside your selection, drag your gradient down about a centimetre or less. You should have a black gradient of your content layer now. Deselect and get your move tool. Nudge it down a few pixels so that you can see a line from the content layer, then lower the opacity to 20%. You should have something like this.
And uh.. you’re done! All you need to do now is add your content (to see what it can look like). You can of course also mess around with the colours, the blending options etc. The key is to experiment. Here’s my final result - Don’t get caried away, this website is purely fictional! At the moment anyway

Hints/Info:
If you follow this tutorial, and create a website for the PSP which is exactly 480px long, you’ll have a website which fits PERFECTLY on your PSP’s browser.
At this width it will be impossible to scroll left or right (which is good, it means the website is not running off the viewable area).

When coding your layout, make sure you set the position of the layout (in CSS i think) to absolute. As a rule of thumb you want your layout to be TOUCHING the LEFT and TOP sides of your web browser (when you preview it on your PC). If it doesn’t touch the left and top sides, most likely you’ll have the website being to the right a little in your PSP’s browser. Causing you to scroll right to see the rest of the layout.

That’s all really, the tutorial was pretty simple again, but i also wanted to share to people about creating a PSP ready website. That means you need a width of 480px, and need an absolute position. I’ve seen PSP “ready” websites which claim they are, but frankly they’re not, you need to scroll left and right to see the content etc, it’s a mess.

Try not to get images which are too big in there too, that’s both in size (pixels) and size (kilobytes). The PSP’s cache is not very big and if your website is too heavy you might run out of memory and thus not be able to load all images. If you stick to the dimensions i used for the site (ie: 480×60px for the logo), and save the files as GIFs, you should be fine.

The PSP actually resizes it a little, so it looks even smaller when viewed in the PSP Browser, but trust me it looks really good! If you have time to spare then i recommend giving it a shot for the fun, because these little miniature websites look really cute haha! It’s not like on mobile WAP where you have 1kb images with white background and black text, here you have a rich coloured website, but mini! Haha. Maybe it’s me but yeah, these things are great!

Happy experimenting, and have fun!