First off, props to Dan Wiersema (my friend and Creative Director at Guifx) for being the brains behind this tutorial. Concept and wireframe were both developed by him. He also helped me iron out the creases in terms of rating my work from beginning to end.

In this tutorial, we’ll create a main menu interface for a fictional iPhone game. We’ll go through setting up Photoshop to accurately display target screen size, setting up a wire frame for the project, creating a background, making a logo, creating rock texture for the sidebar, and wood texture for the saved games-box and buttons. We’ll also add creating greenery for detail and good measure. This is gonna be a long one, so patience is a virtue. Also, coffee helps!

Continue Reading

This tutorial will guide you through the process and ideas behind the designing a professional website with a funky flair in Photoshop. The tutorial will read much like a "choose your own adventure" novel in the hopes it will encourage creativity and uniqueness in your design with a little advice and instruction along the way. Adventure time!

Continue Reading

This is another icon I have created with Negreu Andreas. We wanted to create an icon that can be used for a game maybe or a Mac app of some sort. Before we started we searched the web for photography with similar vans, then made some ideas, and a quick sketch. After that we started working. Let’s review the process!

Continue Reading

The past days I was looking for inspiration in famous old paintings, and got interested on "Starry Night" of Van Gogh and thought: Can I apply this to web design? And the answer is Yes! Then after several hours of work, here’s my tutorial for you, an artistic web design depicting a "Magic Night" concept.

Continue Reading

When working on GUI design, shapes are a great way to achieve a realistic look to your design. As the shapes are vector based, you enjoy the ability to resize them with minimal detail loss, which is a significant consideration in GUI design.

In this tutorial, I will show you how to create a detailed audio player from scratch. This tutorial will be a great opportunity for you to practice those Shape Tools and Layer Styles skills, with lots of adding and subtracting of Shapes. Enjoy!

Continue Reading

Earlier in Web Design Week we saw how a simple layout can be mixed and matched with different backgrounds, patterns and photos, today we’re going to take that one step further. We’re going to completely change the look of a website by changing not just the background, but the overall style of the design.

We’ll begin with the Grungy Paper Texture Site we created in a past tutorial, then we’ll change the design to look minimal, metallic, abstract, and web2! And after that we’ll talk about the process of learning a library of web design styles. So let’s get started…

Continue Reading

This year has seen a big increase in grungey / textured / hand-drawn styled website designs. By nature I tend to design a cleaner look myself, but I thought I’d try my hand at grunge today and write up a tutorial on creating a simple paper texture from scratch in Photoshop then marrying it with a web layout to create a neat design.

Then later this week we’ll take this same web design and I’ll show you how you can take remixing even further than just changing backgrounds and colour schemes, that in fact you can change the entire style of a design. But first let’s make our paper texture site!

Continue Reading

It’s pretty amazing how much colour and background can change the look and feel of a website. In this tutorial we’re going to put together a quick, simple but effective layout and then create variations using backgrounds, photos and patterns. We’ll also look at how to make seamless tiled backgrounds out of a photo, methods for ending a single photo and simple ways to create pixel patterns. In short it’s a jam packed tutorial!

Continue Reading

Tiled backgrounds are great for both website backgrounds and in all kinds of Photoshop work. They are particularly useful when working with textures where you need a larger overall background than the small image you have to work with. In this quick tutorial I’ll take you through taking a texture and turning it into a background image ready for seamless tiling. It’s a useful little technique that’s been around forever. We need this technique for today’s other tutorial - How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds.

Continue Reading

Photoshop is often the right tool for web design, especially if you’re creating a design using numerous images and brush effects. In this tutorial, I’ll show you how to create a complete grunge home page design. We’ll design the header, sidebar, body, footer, and style everything to work together in a heavily textured and worn design.

Continue Reading