New Tutorial: Smooth Content Frame in Photoshop

on Dec 23, 2007

If you’re new to web design and wondered how to make your content a little bit more attractive—how to create a simple, yet elegant, frame to put your content in—then I’ve got a little tutorial for you. This tutorial uses Photoshop to create the image, but I assume no prior experience with it so anyone can attempt this simple illustrated guide. Without further wait, here’s my tutorial on making a smooth, rounded content frame.


Tutorial: Saving Images for the Web

on Oct 8, 2007

saving images for the web

I’ve just updated the site with a new illustrated tutorial on how to save images for the Web effectively. This isn’t an advanced tutorial, but more of an introduction to people who aren’t really sure about what formats to use and when. The guide is a practical overview of the three formats, PNG, JPG and GIF, and my own suggestions on where each one is most appropriate, together with some examples. Click here to read the guide. Enjoy.


Tutorial for Creating “Engraved” Style Text Released

on Sep 19, 2007

I’m pleased to announce yet another new tutorial. This time I’ve got a Photoshop tutorial for you. It’s an illustrated tutorial on creating “engraved” style text that seems to be ‘cut-out’ from a metal/plastic surface, creating a nice 3D feel to it. It’s a very quick and simple to follow guide, that can achieve nice some nice effects if used in the right context. Click here to read it. Here’s what the results look like:

Finished engraved text image


Horizontal CSS Navigation Menu Tutorial Released

on Sep 15, 2007

Horizontal navigation seems to be all the rage these days, especially across the Web 2.0 sphere, so today we’re releasing a new tutorial that covers the development of a horizontal navigation bar using XHTML and CSS.

I’m using the Pixelshell navigation bar as the example, and will walk you through all the steps I took to implement it—so if you want to discover a technique for making horizontal navigation bars, or are interested in how the Pixelshell navigation was created, check out the: Creating a Horizontal CSS Navigation Menu tutorial.


‘favicon’ Illustrated Tutorial Released

on Sep 12, 2007

I’m proud to present our first Pixelshell tutorial: an illustrated 5 minute guide on making and implementing your own ‘favicon’.

Most sites these days feature a ‘favicon’, but there are still some that don’t, so if you’re not sure what it is, then let me give you a very quick description. A favicon is a little icon that’s displayed by the side of a website address in the address bar, or the favorites/bookmarks lists on most browsers. Here’s a picture of the Pixelshell favicon seen in the Safari browser:

Pixelshell favicon in the Safari browser

If you don’t already know how to implement your own, then please check out the tutorial. It’s a very short and sweet guide, so I hope you like it. We plan to release more guides very soon, so make sure to check back later for updates.


Contact Information

If you would like a quote or a project proposal, just click here to fill in our short client web form and we'll get right back to you.

Direct Contact Details

Email Email: info@pixelshell.com Skype Tel: +44 (0)20 8816 8876