How to semplify your life and design a great layout
I receive a lot of e-mails from web designers or presumed web designers that quoting their words are “denied for all that concerns graphic and design” and they ask me how to improve themselves and build up attractive sites without being a genius of creativity and fantasy.
I often reply that sometimes a good course of graphic and books can do miracles, but the main quality of a graphic should be the aesthetic sense and this is one of those things that you can’t learn. Aesthetic sense can get refined through years of practice, but if basically one doesn’t have it, there’s very little you can do.
If you have aesthetic sense and your problem is the incapacity to use graphic software, the solution is: to study. And try. And once again study and try again and so on.- For what I’m concerned it took me weeks before I tamed the shrew pen of Photoshop, but once you understand it, it’s like driving: everything becomes so natural and so simple that it almost seems ridiculous.
If you have aesthetic sense, a basic knowledge of a graphic program and the problem is the difficulty on creating graphic elements from scratch, the solution might be just one: rely on an outside resource.
Let’s exorcize once and for all this concept: working as a web designer doesn’t mean that every time you have to create from scratch every graphic element of the layout, my work may also include the research of high quality resources and materials that are suitable for my client, which can represent in a proper and original way his activity. My work can also include mixing and combining these elements in a new way, unique, creating something different and personalized. A job that requires aesthetic sense and a bit of imagination… but above all the ability of selecting images, icons, patterns, texture and to work on them.
And this, everyone can learn how to do it (trust me, everyone!)
With this article, I want to show how you can create a sensational graphic layout relying completely on external resources with no need to struggle in creating special background and graphic effects which require particular technical knowledge.
A layout that everybody can create, with a basic knowledge of graphic software and the ability to select the right resources for a design project.
Step 1: the selected resources
The first step, which requires a bit of imagination and intuition, consists in the research of the most suitable resources for our purpose.
Start by saying that the one I use are all first quality resources, they are by choice. Acceptable or not, the choice is yours. Probably on the web one can find free resources similar to those chosen by me and obviously you’ll free to do it. But I often notice that many web designers – especially beginners – work “tighten the belt”, choosing low quality images (probably found on Google) that make the graphic sloppy and too haphazard.
For what I’m concerned for every project I work on, I prefer to invest a small amount and have the freedom of selecting original and good quality resources, probably because I’m an aesthetic and I love doing things in a certain way, or probably because I think that a client that pays for a work well done deserves to have a work well done, nothing more, nothing less.
The excuse “the client wants to spend less, so this is why I work like this” behind which many of us hide is easy but not credible: to create this layout, summing up everything, I spent about 32 $. A small amount even in the case I decide to work underpay, and with the advantage of presenting on my portfolio (and online) a good looking, professional site.
The choice, however, remains yours.
Now let’s start designing our layout!
Let’s open the resource number 1 inPhotoshop and with the rectangular select tool we select a square portion of the image.
Click on Edit>>Copy to copy the selection that we’ll paste in a new document:
Now we click again on Edit>> define pattern, and name the pattern we’re creating and save.
At this point we set the document that will contain the layout of the site. We open a new document of 1680px and we set the guidelines at 360 pixel from the borders, in order to enclose between the guidelines the section of 960 pixel in which we should insert the main sections of the site.
With a double click on the level we unblock the background and open the window of the styles of the level. In this window we assign to the background the pattern that we created previously, obtaining this effect:
At this point we open a vector image representing some bamboo canes and import it in the document:
We work on this imagine to make it less heavy in our background and avoid this way that the contents of the page become difficult to read.
We begin with pasting another color scheme to the image, through the Image menu>>Adjustments>> Black and White and setting the option “color”.
Now we modify the fusion level in “Linear light” and lower the opacity to 20% of the image at 20% in order to make it lighter on the paper background.
With the rectangle tool we draw a section of dark brown color (#1c0301) in the upper part and with the text tool we insert our navigation menu. We’ll use a free modern font with very soft curves, the Waukegan.
Now we import in the document the image of a label, slightly rotate it clockwise until we obtain the effect of the label falling from outside.
On the label we place the logo of the restaurant, also slightly rotated clockwise and with a fusion level set on “multiply” to eliminate the white background. Moreover we add a small slogan, “More than Sushi”.
It’s time to play with the photos, the most important attractive element in a layout. For this purpose we use a beautiful photo full of colors, capable of representing the object of my site. We position it in the document, in a way that part of it goes under the background rectangle of the navigation.
This way, lowering the opacity of this rectangle, we’ll have a nice transparent effect that allows us to see the rest of the photo even under the navigation.
Now we put the text of the homepage inside the layout, under the label of the logo.
Now we insert 4 different boxes that recall some sections inside the site. We set the custom shape tool and select as a predefined shape a sphere. Draw four spheres of the same dimension (in our case of 195 pixel) a bit asymmetric. In this phase we don’t care of the color set, we’ll think about the style to assign to each sphere, later.
We should come out with a result like this:
Now we open the photos selected for the layout (photo 5,6,7 and 8) and set the predefined dimension of the sphere (195 pixel) to each photo. Done this for all the images, we click on the menu Edit >> Define pattern, and give a name to each pattern we’re creating and save.
Let’s go back to our layout. We click on the layer styles of the spheres and assign to each sphere the pattern of the selected photo, obviously associating to each image the right sense: the Japanese dinner with friends is perfect to advertise the organization of Japanese evenings, the photo of a dish well represents the opportunity of consulting menus and so on.
Let’s give a creative touch to these images, assigning to each of them a thick border (20 pixel can be enough). We use different colors for the borders e play again with fusion layers in order to create interesting effects with the background wallpaper. Moreover we slightly overlay the images in order that the borders of the same images interact with each other thanks to the fusion layers.
The final effect will be really striking!
All that remains is to insert a brief description under each image, so that to give them their full meaning:
A nice touch out of the lines? We put a sticker on the image about the Take Away:
Let’s assume that the site will allow to book the dinner, so we put in the homepage a call to action that invites users to book. We draw a section with the rounded rectangle tool, lower the opacity of the same and insert the text.
Now we create the button of this call to action. With the custom shape tool set on sphere we draw a small orange button. We assign to this button a white trace of 5 pixel and a light drop shadow.
With the text tool we write the characters “>>” and look for a character that satisfies us and that represents in a pleasant way the functionality of a small arrow.
At this point we put another sticker to recall the style of the sticker previously used and to give a touch of color to the call to action.
A lively finishing touch? Decorate the bottom of the page with stickers that recall the Japanese cuisine. Simple and fantastic!
The homepage of the Japanese restaurant Japoyia is ready! Want to give a look?
With a bit of Photoshop work, a bit of imagination and the combination of some resources we created quite an impressive layout.
And you? What kind of resources do you normally work with? Do you usually invest part of the budget in resources for your clients’ projects o try to do without relying on your graphic capacity, maybe leaning on the free resources available on the web?
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »