There are many sites around at the moment with this effect being used as a background or as part of the design. It is a really great alternative to simple noise effects or gradients and adds an extra dimension to your designs, really quickly and easily, and the best thing about it, it is repeatable, scalable and very easy to tweak.

So jumping straight in, I find even if I am working with an open document, it is much easier to create this effect in a separate document and then copy it across rather than creating it straight in to my layout, simply because it is quicker, and you have to finally use a step and repeat so it is easier to get a nice square crop on the texture.

Step 1 – Create your workspace

In this example I am creating the texture at 500px x 500px and aiming to crop around 400px square for a good amount of variation on the texture. You could go smaller to keep the file size down, but I find this adds more variation to the texture itself.

Step 2 – Create a layer and add some noise

So now we simply create a new layer and fill it with a white. We then want to add some noise, so we go to Filter > Noise > Add Noise. We want to use 100% noise to make the texture really grainy, and make sure you have Monochromatic checked. Choosing either Uniform or Gaussian distribution makes very little difference for our desired effect.

Step 3 – Duplicate and blur

Next step we need to duplicate the layer we have just added noise to, do this by right clicking on the layer and selecting ‘Duplicate Layer‘.

Now with your top layer selected, we want to add a motion blur. Do this by selecting Filter > Blur > Motion Blur. For this effect we are going to blur at right angles, 90 degrees vertically and horizontally, but the effect works just as well at 45 degrees. So we want to set our first motion blur to ‘Angle 0‘ and distance of 35.

Next we hide the current layer we are working on and select the layer we first created. We now want to repeat the process but this time set the motion blur to ‘Angle 90‘ or ‘Angle -90‘

Step 4 – Add layer effects and cropping

Now the final step we want to combine the effects to make the canvas. To do this we simply make our top layer visible again, and set the display settings of both layers to ‘Color Burn‘. This should leave you with a white screen.

We now need to tweak the color settings to create our desired final effect. We are going for quite a subtle, oldish feel to this canvas, so we are going to set the background of the canvas to be the color #bdb79b.

Finally before cropping we want to play around with the opacity of our layers, in this example I have set both layers to be 20% opacity but you can of course make this is strong or faint as you like.

Step 5 – Cropping

We now need to combine our layers and crop the canvas. There are two ways to do this, and it depends on how strong your canvas effect is to how you tackle it. If your canvas is very very subtle, you can get away with simply taking a swatch of around 200px x 200px from the center of your canvas and cropping this way. But I like to make a pure seamless background.

So to do this, we first of all flatten our layers by selecting all the active layers and pressing ‘Ctrl E‘ for Windows or ‘Cmd E‘ for Mac. We then using our Marquee tool, draw out a 200px x 200px segment of our canvas.

Then instead of cropping, we copy this and paste it over the top of our other layers. We then set our background layer to invisible so you are only left with your 200px x 200px swatch on the screen.

Next we duplicate the layer, select our transform tool ‘Ctrl T‘ for Windows or ‘Cmd T‘ for Mac, and we want to flip the duplicate swatch horizontally. There are many ways of doing this but we are simply going to set our horizontal scale to -100%. This then flips the swatch. All we do now is simply align this swatch to the right or left of the original. And that gives us a seamless repeating pattern left to right.

Now we combine these to layers to make one rectangular shape swatch.

Repeat the above steps but this time we want to set the vertical scale to -100%. So after completing these steps you should be left with a 400px x 400px repeating canvas texture.

We can then crop it and save it for web. As mentioned earlier, this is quite a large texture, but you should still be able to save this image at quite a low file size due to the minimal amount of colors used.

So that is it! Creating your very own canvas effect in Photoshop. You can also try messing around with the settings, creating different colors, depths of texture and angles to make the effect more diverse.

But the time has finally come that I can happily and openly announce one of the reasons I have been so caught up recently. In December 2010 I accepted a new job offer to work full time for an agency in New York, and that agency is called Fueled.

Late 2010 I was approached by a fine gentleman, whom I have collaborated with and carried out a fair bit of freelance work for in the past. We got talking about a position he thought I would be suited for in his new company. It was a brand new agency, with no brand, no website and no presence. But, it did have a very strong client base from it’s sister company, with work for brands such as MTV, Wendy’s, Fanta and The Chicago Bulls.

The more and more we talked, the more it sounded appealing, yet equally as risky, as most of you Brits know, the UK economy has been pretty poor of late. We are all so tired of hearing about redundancies and agencies especially in the North East going in to liquidation, closing down or simply struggling to fight for work. Was it really the right time to move to a new company just starting up? Was it to risky?

I had to look at the opportunity objectively. The majority of my freelance projects I am currently working and have worked on in the past, are and have been clientele based in the US, and with the amount of work coming in to the new agency, it did seem like an opportunity not to be missed. So as of December 2010 I finished my final week at Guerilla ready to start in the new year, working for an agency 3352 miles away! Crazy!

My Role, Old & New…

Working for Guerilla was great, it gave me a lot of opportunities and in the time I was there, I made a lot of friends, met and worked with some fantastic clients and through very difficult economic times, we managed to keep our heads above the water, so ‘hat tip’ to all at Guerilla for that! But the time had come and I was ready to move on.

My new role is pure UI. I am no longer coding, although I am still keeping this a large part of my role within my freelance work, mainly because I thrive in coding! but also because I do not want to fall off the ever changing, ever improving and increasingly challenging ‘techno wagon’, and fall behind in the industry I love.

Saying that, my new position does mean I can dedicate my time fully to working on user interface elements of projects, spanning across both mobile and web. this allows me to really put in the time to perfect a single area of a project which effects many, rather than having to think about completing all other aspects of the project on top of the design.

Fueled has a fantastic team of architects, strategists, web and mobile developers with the added benefit of a group of animation specialists, which I have already found, are bringing a whole added depth to the design work I am doing. It is like a breath of fresh air.

Getting Stuck In!

One of my first tasks was to work on the brand and digital presence for Fueled, and I am happy to announce that we have just launched the first phase of the website!

As this is the phase 1 of the site we are now in the throws of ironing out any issues, and working on advancing it into a responsive layout with a mobile version, which is about to start development. But for now, here are a few snippets along with the link to the new site!

The site can be found at http://www.fueled.co (Yes that is .co for all you Brits!)

Working for a company abroad

Finally I thought I would leave a few tips for any freelancer thinking about working for a company abroad. I know these things may seem trivial, but they do take a little bit of getting used to. So, firstly:

1. Working hours – It is a bit of a challenge to balance this one out, especially with companies far and wide who are sometimes 4 hours ahead, 6 hours behind and so on. It can mean you are doing late hours. But what I have agreed which is a good balance, it to stagger your hours. So, as New York is 5 hours behind UK, my full time hours now mean instead of the standard 9am – 5.30pm, I am doing 11am – 7.30pm. This allows me to reduce the crossover and get an extra 2 hours of valuable time, working with the agency based in New York, without having to do crazy times here in the UK.

2. Language Barriers – This one is not so bad, apart from just double checking spellings when it comes to proofing artwork. If working for an American agency for example, who is creating work for an American client, you need to spell things the way Americans do! So watch your ‘ize’ and ‘ise’, ‘our’ and ‘or’ and of course your ‘re’ and ‘er’!

3. Currency – When quoting for jobs in proposals, or when working out pay checks (cheques!) Make sure to work out any exchange rates and also any charges maybe added by the banks. It is always good to note on any invoice that charges must be covered by the payee to avoid losing out and messing up your accounts!

So as far as things to watch out for, from my experience that is it! If these are classed as negatives, it ain’t half bad! I am loving my time so far at Fueled, and I am so happy I made the move. It was risky but it has certainly paid off!

I am also able to post any work I carry out through the agency here on Branded07 so watch out in my portfolio for any new projects coming about in the near future! In the mean time, why not follow Fueled on Twitter, visit the site, and by all means, send over any feedback/critique on the site design and we will happily take your comments!

I decided to cover a simple tutorial, looking at how to implement a small wrap around ribbon on to a website using only code, abolishing the need for images. The techniques covered hit on a few great tips for things such as creating shapes with item borders, reducing load times on pages, especially important these days for mobile browsers, and fallback solutions for the ‘less capable’ browsers such as IE6.

I really enjoyed putting this tutorial together, it was good to be apart of something a little different. It was certainly a challenge trying to get all the detail I wanted to put in reduced to 45 word blocks and condensed down to 18 steps, but after some major copy tweaking I just about managed!

Along with my tut and all the other great content in this issue of .Net you also get a free little sitepoint book about creating HTML emails, written by Mathew Patterson, Head of Customer Support at Campaign Monitor.

So make sure to grab a copy of .Net magazine this month (issue 212), give the tutorial a go and let me know what you think! Any feedback welcome, just leave a comment below. Happy tutting!

HDLive10 Design and Build

After the success of the HDLive 09 conference back in October last year, I was asked to carry out the new design and build for the 2010 conference, and here it is!

I am really happy with it as it gave me a great opportunity to play around with HTML5 and CSS3, combining the interaction between these modern scripting languages and jQuery effects to create such features as the infographic and twitter streams on the homepage.

HDLive10 detail

HDLive10 Twitter

A whole new look

I have been working at Guerilla now since July 2008 and for most of that time we have been keen to re-design the Guerilla website. Well, we have finally managed to find the time to do it, and this is it!

The website re-design was driven off the back of a full re-brand for Guerilla, so there was a necessity to sync up the newly formed brand with the agencies online media. We worked long hard hours to complete the site on deadline and we are very proud of the result.

We have taken the random theme of the brand and carried this through so the website appears differently every time you revisit, we have brought the diversity in through the news and blog pages, right through to the contact us page and meet the team section.

Feel free to leave a comment on the new website and let us know what you think.

New sites are popping up all over using very simple techniques to create very effective, modern looking designs. And why are these techniques proving so successful? Well one of the biggest reasons is they are used so heavily nowadays on designs for Apple products, namely iPad and iPhone.

That’s right, Noise, Grooves and Text Shadows are such a winning combination because they highlight depth, and pixel perfect accuracy, simply because each of them use a single pixel width or height to create the desired effect, and you can’t get much more accurate than that…Well, unless you are designing for iPhone 4, in which case you have to use a bit of maths to calculate how wide a pixel actually is on screen, as the new screens use a higher resolution than that of superman’s vision!

So for this tutorial we will be sticking with the standard 72DPI.

These techniques have become bread and butter to the every day UI designer and will be commonly seen on a load of websites and applications, possibly to many you say? Well maybe, but being able to perfect these simple steps and techniques means when the right project comes along, you to can easily implement a modern look to your site designs.

So, that’s the intro out the way! Now I thought I would cover off each of the above for mentioned items and display how they can be used and combined.

The Desired Outcome.

Basic setup, open up Photoshop and create a blank image, any size will do for playing around with this, I used 500px x 250px. Throw in a gradient, here I used (#848ea2 top and #5b687f bottom) and we are ready to go!

Technique 1 – Noise

Easy-peasy this one, just don’t over do it! Noise can be produced very simply in Photoshop by navigating to ‘Filter’ > ‘Noise’ > ‘Add Noise’

For this example I set the noise to 1%, Distribution to Gaussian and made the whole thing monochrome to keep away from the multicolours!

Technique 2 – Grooves

Two ways to create grooves, either with images, or with borders in CSS, depending on where you are using them and how often they are to be repeated. I would suggest using a background image for main header breaks or title breaks, and borders for items such as list breaks or repeating items.

a) Create a Groove in HTML

This is best used for repeating elements stacked either next to or on top of each other, and can only really be used with more than 2 items or you will lose the effect. For this, all we need to do is add a border-top and border-bottom to our elements, one light and one dark to create the groove effect.

So, using the colours we are using in this example, your code would look something like this:


ul{
border-top: #3d495f 1px solid;
border-bottom: #8895ac 1px solid;
}
ul li{
border-top: #8895ac 1px solid;
border-bottom: #3d495f 1px solid;
}
 


You will notice that the colours have been reversed from the List to the List item, this is so we can apply the grooved look to the first and last element. You must also make sure you have no margin on your list items and no margin or padding on your list. That easy!

b) Create Grooves with Background Images

This is still a light weight solution and very simple to create, better suited for individual items and one which I would suggest using for this example.

For our horizontal groove we need to create a 1px wide by 2px high image, which can be saved as a 2 colour gif to keep the weight to a minimum.

Selecting your shades here are quite important as they need to be balanced. If your groove uses to heavy highlight and not enough low-light, or visa verse, you can easily loose the effect of the groove and your line will look more like a 1.5 pixel badly aliased cutout.

For the visual we simply stretch this 1px wide image to the width of our canvas like so.

When zoomed out you will see our groove stands out nicely and offers a decent amount of depth. Both the highs and lows can be picked out nicely. For this example I used the colours: #8895ac for the highlight (bottom) and #3d495f for the low light (top).

Technique 3 – Text Shadow

Text shadows are being brought in through CSS3, and even though not fully supported over all browsers, this CSS3 technique alters the look of the element so subtly that when viewed in none supported browsers, the fallback and degradation effect is pretty minimal, it is worth the risk of using it.

If you are concerned about your CSS being valid, which you have every right to,  then you can always create a secondary CSS file for your CSS3 elements.

So we choose a font for our header and copy, for this we are using a web safe font ‘Times New Roman’ but with the range of font replacement techniques available this could easily be applied to a none web safe font also.

We will set our header font size to 70px and center the text, and our paragraph will be set to 18px with a line height of 22px. Both will have a colour of #0f1727 which is quite dark but, we need to keep our contrast up as the same applies with colours on text shadows as it does when creating the groove, to little difference and you will not notice the effect, to much and it will become unreadable, as demonstrated below.

So the left item does not include any text shadow, the center image has text shadow of white which is to vivid, and the image on the right has the finalised colour which was chosen as #8895ac.

So applying all these techniques together we end up with a very nice, modern looking snapshot of what a full web page could look like.

All I would say is do not over use these techniques, as much as they are popular at the moment, they do become quite repetitive and should only really be used on extremely relevant projects, not just for the sake of using them.

So that’s a wrap! Hope you enjoyed this little tutorial, go now and make some Noise, get Groovy and be sure you leave a Shadow!

To kick things off I will list out my daily bookmarks and sites I visit in order, along with a rough estimate of time spent on each site, then hopefully get some feedback through comments on other peoples daily routines!

My average day I generally visit the following websites:

1. Best Web Gallery

Ever since I was featured in the Best Web Gallery back in 2008, I have made it my first port of call every day to visit the site, take a look at all the new website submissions and play my part in commenting and joining in with the sometimes quite heated discussions on design practices and techniques.

I am also a massive fan of Nick La and his work at NDesign Studio and Web Designer Wall.

Time: I would say on average I spend about 5-10 minutes on this site depending on how many new submissions there are.

2. Apple / Apple Store

Yes yes I am part of that gravy train of Apple fan boys, although I would consider myself tame in comparison to some people I know! I do regularly check the Apple Store, mainly the refurb section as I am keen to grab a bargain.

At this stage I find myself drifting away from my browser and into the iTunes app store, generally having to pull my self away from spending more money on the latest tunes! I am a big listener of music when I work so always having new tracks to listen to is a productive measure in my opinion!

Time: I would estimate about 10-15 minutes here, depending on if I saunter off to the iTunes app store or not!

3. BBC Technology News

I think this should be a daily stop for any techno bod, the BBC technology pad is a great place to find out about new releases in the latest technology, social media news and new digital movements. You can sign up to the BBC Technology feed here. I also then skip around the sport section and latest general news stories to keep up with whats going on in the world.

Time: If there are stories of serious interest here I can be on for around 20-30minutes reading, but usually I would say about 5 minutes is average.

4. Rightmove

Kind of an odd one this one! but for the last 5 months my wife and I have been ‘trying’ to sell our house, so it is now part of my routine to log in to Rightmove and take a look around any new houses that have been added in the last day or so. It is a little addictive house hunting! and our favourite list is getting larger and larger by the day!!

Anyone want to buy a house?! Just give me a shout, I know a great little pad in the North East of England!

Time: Generally about 2-3 minutes, quick search in our price bracket, print off or save details then move on.

5. CSS Remix

CSS Remix is a site that I have visited regularly for a few years now. I have been a little disappointed of late not to see many new submissions, but I am still an avid daily visitor as not only do I enjoy checking out the new submissions, but I also like to see how many overall visits my site is getting.

Time: Lately around 30 seconds as there have not been any new submissions, but usually around 5 minutes.

6. Google Analytics

At this point, I am feeling a little more in work mode and open up Analytics for my daily checks on all my sites to see how they are performing.

I would recommend this step to anyone designing or building websites, always keep an eye on your Analytics, whatever method you use to check them, as it is invaluable information, and can seriously help you keep clients happy via on going maintenance or gather new business via improving and targeting areas lacking in performance on your sites.

Time: I spend a decent amount of time here a day, usually around 20-30 minutes, unless we are looking at online marketing campaigns and I am actively tracking certain sites.

7. Twitter

Well, I was a little bit of a slow burner on Twitter, I only actually got my twitter link on to my site last year!

As the guys at Twitter release more and more features I am finding myself spending more time on Twitter on a daily basis, especially now with Twitter in my iPhone I am sometimes tweeting before I even get out of bed in the morning!

You can follow me on Twitter @branded07

Time: 20-30 minutes a day is about right for my daily Twitterage! Not taking into account wandering off to different linked sites.

8. Facebook

Aah Facebook, I don’t know about you but for me, I am not spending as much time on Facebook as I used to, especially on a daily basis. I do still log in to keep up with the chat, but not nearly as much as I did in the hype days.

I don’t doubt that it has become such a large part of peoples lives but for me it is so ‘common place’ now that I am not really interested anymore. I walked past an internet pod the other day in our local mall, and a teenage girl was sat with what must have been 20 friend chats open on her screen, she was there when we arrived to shop, and was still there 3 hours later when we left.

For me, that is now the direction Facebook has gone, entertaining the younger generation, unless you are looking at it from a commercial aspect. Obviously from this point of view, Facebook becomes another beast all together. This post is from a personal angle, and I am beginning to find value in actually ‘seeing’ my friends again, when I have the time that is!

Saying that, if you want to buddy up, here is a link to my Facebook profile!

Time: 5 minutes max, personal time.

9. Linkedin

I pop on to Linkedin daily to search for new connections and check my recommendations. At the moment, I am extremely busy so finding new business, although nice and always welcome, is coming second to my on going work. I would love to get connected so please feel free to view my Linkedin profile and throw me an invite to connect!

Time: 5 minutes for checking and updates.

10. Smashing Mag

Ok so I have done the social thing, I am now back in web design mode and looking around for more inspiration, I turn to Smashing Mag.

I have been reading Smashing Magazine daily now for the last couple of years and I am always amazed at the great and diverse level of content available for web designers. I generally integrate items I find of interest on Smashing Mag and retweet them on Twitter. Visit Smashing Magazine here.

Time: I can spend 10 minutes a day easily on this site

11. Gizmodo

Similarly to Smashing Mag, I use Gizmodo as a great resource for Technology news.

I also find it a great way to get some banter from other techno bods on the articles posted and read other peoples views on what is hot and whats not.

Time: I would say around 15 minutes a day is spent reading Gizmodo articles.

12. Apple Movie Trailers

I love films, and I am an avid cinema goer. It has become a weekly excursion for my wife and I, we even own an Odeon Premiere card, which I treat with more care than my bank card!

So I love to visit the apple movie trailer site to check out the new releases and teasers of up and coming films. I think tonight it is Sex and the City 2 night… but it looks like I am going to be ill this evening and unable to attend.

Time: About 2 minutes on the site excluding actually watching the trailers or reading the synopsis.

13. The CSS Awards

Since Branded07 won site of the month back in December 2009 I have been visiting the CSS Awards site as it is a great resource for inspiration.

It has a very dedicated judging panel, of which a random selection judge the submissions on design, creativity, usability and content, ranked out of 10. These then get placed and chosen from the daily submissions to win the monthly award and finally an overall site of the year.

It is really interesting to see how others rate the level of your work and it is nice to see how different popular sites get ranked.

Time: I usually spend about 5 minutes on this site as there is only 1 new submission a day gets ranked and placed on the site.

14. Dribbble

No, this is not my weak attempt at getting a Dribbble invite! That’s next week…

Dribbble has been brought to fruition by Dan Cederholm from Simplebits and Rich Thornett who have put together a great site made up of top designers, developers and creatives showcasing small screen shots of designs, projects and applications they are working on.

It uses an invite process to be a part of the Dribbble community in order to keep up standards of design work available on the site. It is a fantastic resource for getting an insight into what new designs could be released and what people are working on.

Time: I spend about 5-10 minutes a day on Dribbble checking out the new snapshots and responses.

Then after all that, it is down to work! So that my friends is what I do on a regular daily basis. It is amazing how I find time to do anything else! So I would love to hear your daily web paths and routines, maybe I can pick up a few new ones for my trails!

Happy Tapper design only

I was delighted to work on my first iPhone app website design, I know I know, a long time coming! Hopefully this will be the first of many as there is something nice and subtly challenging about keeping up with the high standard and trends of all the great iPhone app sites out there.

I am overall happy with the final result and the client was delighted!

Happy Tapper detail

Happy Tapper subpage

I will be posting a link to the site once its live so keep an eye out!