This post is to inform you of said return and run over some of the changes in the new design – DBv2. The general look of the design hasn’t changed too much – I have gone for a more ‘grunge’ inspired design with added noise, texture and ‘blander’ colour schemes. I’ve tried to bring colour to the site through new animated CSS3 rollers, within the thumbnails and the sidebar – trying not to be too overkill in any aspect of design. Now for the documented changes and run down of features.

Featured:

I decided to add a featured post to circulate the most popular posts – this was made easy by the latest version of WordPress by way of their ‘sticky post’ feature. Implemented with a ‘featured stamp’ I designed – setting the position to ‘absolute’ in order for it to sit above the sticky post.

Sidebar:

For the sidebar, I decided to incorporate further navigation in the form of categories – in order to make it easier to find specific posts. There is also the standard social and advertisement sections. Within the sidebar I have used CSS3 animations/rules to make it more interactive with a splash of colour in the social section. As you can see on the live site there is a fancy animation effect along with drop shadows.

Comments:

I’ve kept the comments clean and succinct – nothing too fancy here.

There are many more changes and new additions to the site – which I’m sure you will notice whilst using it. This post was just to let you know I am back and so forth. For upcoming tutorials, I plan to integrate video tutorials along side the written ones; to expand my audience onto youtube – I find video tutorials are under-saturated in this blogging niche and know that people enjoy visual learning as well as reading. Furthermore, I have a few product reviews to write – design software for Mac, so look out for them!

Sorry for the lack of posts, I have been working on my new site, TheDesignersYard.com, which I will post screen shots and features very shortly!

Step 1

In your js folder make sure you have the two files: jquery.js which you can download here, and a blank tooltip.js which we will be adding our own javascript to.

Step 2

Inside your blank toolip.js file add this javascript. It may look like a lot, however the code is repeated twice with the variable of the RSS & Twitter logo is changed.

Step 3

Link your style.css, jquery.js and tooltip.js files to the index.html file in the head tags.

Step 4

In your html body add the following code. Give the social icon a wrapping div, within this have your icon div and then your em tag – this will be the bubble that appears on the mouse over. If you check our tooltip.js we coded earlier you will find the variables and divs/classes match this html code. Where the # appears in the anchor tag – replace with your required links.

Step 5

Now we need to style the html that was just coded. Set the following css to your stylesheet. For each social icon you have you will need to change the class/div names and background images of the icon and em tag. One little effect you can add is to the icons opacity/opacity hover which will work with webkit capable browsers – this will save on the sprites!

All Done

Thats all it takes to get super cool jQuery animated bubble tooltips! If you enjoyed this post, have a alternative way to gain the same effect or have an opinion be sure to comment below. Sharing of this post would also be appreciated.

Step 1

First go ahead and download yourself a copy of the Hungred Post Thumbnail plugin.

Step 2

Next copy the folder into your ‘plugins directory‘. Then head over to your ‘plugins control panel‘ and activate ‘Hungred Post Thumbnail‘.

Step 3

You can then access the Hungred Post Thumbnail control panel where you can can edit the dimensions, colours and simple css terms of the thumbnail to suit your preferences.

Step 4

Now you can head over to your posts and upload an image of the dimensions you set in the control panel to use as the thumbnail for that particular post.

*Please note these websites may or may not be using this plugin.*

There you have it, how you can easily implement post thumbnails with ease, without using one piece of code. If you enjoyed this tutorial or have other means of doing the same thing which you think are better please tell us by commenting below.

Please let me know what you think of this weeks top tips, or if you have any of your own please contact me with them and they will be included in next weeks issue!

Here is the finished 404 error page that this tutorial will take you through. As you can see there is an image to create and some PHP & CSS code to write. Just show me the inspiration already!

There you have it, a nice simple tutorial and some great inspiration to get you started! Let me know what you think of the tutorial and if you have any inspiration you’d like to share drop a comment below!

1. Dual Monitors

Having dual monitors will greatly increase your productivity whilst designing, It allows you to display a large number of things on the screen at once. It will greatly increase your workflow especially when designing, from Photoshop to Coda you can have it all, survey after survey reveals that having multiple monitors can increase your productivity by 30%. Dual screens can be very handy especially if your a designer that owns a notebook computer, sure there great for portabilty, visiting clients etc. However when you come down to designing owning a large secondary monitor can be a god send. An example of this can be found at Apple.com where they cater an LED display for their notebook computers.

2. Tidy Desk, Tidy Mind!

You’ve probably heard this saying a lot, however it’s stands in my opinion to be very true. A tidy workspace will relieve your mind from clutter, stress and help your designs flow on to the paper. Now I’m not saying your desk needs to be immaculate because that would be hypocritical of me, you do need some sense of organization though as soon you don’t, you wont be able to see your desk. I aim to organize and clean my desk as often as possible but some of the times I forget and it’s a tip! Having some kind of organization methods will greatly increase your efficiency around your work. For example you can have file holder for each client or project rather than just a pile of mindless paper.

I find that keeping your designs and project files off the desk, in a filing cabinet or a dedicated area makes you feel uncluttered and stress-free as you are not reminded of all the work at hand when its on your desk staring at you. Get rid of all those post-it notes! Yes they are very handy but there are far better “to-do” applications you can install on your computer that you can set to alert you. The saying Tidy Desk, Tidy Mind should also be applied to your computers desktop. Organize all your files in folders with names that you will know what’s in there also it is a good idea to add sub-folders inside the main folder to further that organization, this will result in you knowing where everything is rather than hundreds of files on the desktop that you’ve not a clue what they are!

3. Gunnar Optiks Glasses

Gunnar Glasses aren’t just your ordinary pair of glasses, they are specifically designed to cater to people who spend long periods of time in front of screens – like us designers. Their iAmp technology with amber tinted lenses help relax the eyes by slightly magnifying what you’re looking at, making the colours ‘pop’ more and reduce the frequency of headaches.

Gunnar Optiks sell their iAmp lenses in various frames and colours so you can pick the ones that best suit you. They range from $89 to $189, granted they’re very expensive however for what you get and the experience I’ve had with them it’s well worth the money. Please note that you will not get the full experience if you have to wear prescription glasses! Although if you just like the frames you can get your prescription lenses fitted in them. Please stay tuned to the site for a full review on them.

4. Pen Tablet

As a designer having a Pen Tablet in my eyes is a must! When in Photoshop pen tablets can greatly increase productivity and the quality of your designs. When designing on paper you use a pen/pencil right? So in theory on the computer having a pen trumps a mouse. The tablet that I would recommend is the Intuos4 line from Wacom – this tablet has endless forms of functionality and customization to shorten tasks and functions within any program. Size wise I would generally say the bigger the better. You can read my full review on the Large Intuos4 Tablet here.

5. Ergonomic Chair

Getting yourself a quality ergonomic chair is essential, it’s what your sat in day in day out. I decided to get myself an expensive office chair a few months back and its the best decision I made, not only is it comfortable it will also last me a long time. The chair that I have is the Leather Ergohuman Office chair. Getting yourself a descent chair will greatly benefit you in the long run, many people suffer from upper back and lumber problems due to prolonged use of non-ergonomic chairs. Being comfortable while designing will help you relax and contribute to getting better designs! There’s nothing worse than being uncomfortable whilst working.

6. Stay On Top Of Your Work!

Staying on top of your work is a given really however you wouldn’t believe the amount of people let their work get on top of them. This is not a position you want to be in, sometimes it can be a downwards spiral and very hard to get out of. Having schedules, to-do lists and set tasks can be a very easy yet effective way of keeping one step ahead. For me the most important thing is motivation and the only way you have motivation is if you love what your doing, if you love what you’re doing you will want to do it! Therefore not letting work get on top of you. Also keeping your inspiration fresh is a great way to stay interested in what you do!

7. Set Tasks & To-Do’s

There are some great programs out there to set tasks and to-do lists for the following day or days to come. Here are a couple I use daily.

“OmniFocus is designed to quickly capture your thoughts and allow you to store, manage, and process them into actionable to-do items. Perfect for the Getting Things Done system, but ?exible enough for any task management style, OmniFocus helps you work smarter by giving you powerful tools for staying on top of all the things you need to do.”

Check Off is a fantastic little app for Mac OS X that sits in the task bar next to spotlight, its so simple you simply click the plus button to add a to-do item or a folder to group to-do’s and check them when done! Its also great if you need to scribble something down to remember.

8. Freelancers: Get A Blog

As a freelancers getting yourself a blog is crucial in todays world of design. An example of a freelancer that markets themself very well with two successful blogs, a huge twitter followers list, a great porfolio and a popular personal blog is Chris Spooner, popularly known by his very inspirational blog at Blog.Spoongraphics.com.

If you run a quick search for Chris Spooner you will find lots of interviews with him where he says that he started Blog.Spoongraphics as an experiment with wordpress looking to learn more which he now earns a nice monthly income from ads and has stated he has got some good projects through his blog. His other blog that also recieves monthly income is Line25. So getting yourself a blog could lead to great things.. and if you love writing about what you do its easy right?

9. Close Social Networking Programs!

Everyone loves social networking, its the place to be these days! However it can be your biggest distraction whilst doing a project or trying to get work done. It can easily side track you and may find yourself slipping behind on your work. So make sure you close all the Twitter apps, Facebook windows and get focused on your work! In fact you should close anything that can be a distraction to you.

10. Are My Sites Up?

So you’ve done work for a client, once you’ve done that work after a few weeks it’s very likely that you will stop checking the site, making sure its okay unless you are asked or paid to? Well here is a nifty little web service that allows you to make sure your sites are up. If one of your sites were to go down you would recieve an email notifying you – this is much better than an angry client blaming you for something you had no control over. The service is free to signup to however you are limited to 5 sites only. You can then upgrade to a Standard, Plus or Pro account. With these you will get more sites to keep track of and a bunch of other features for very cheap yearly costs! Its well worth the money upgrading yourself from the free account. Check it out yourself here.

There you have my 10 tips on making your experience as a designer easier and increasing your productivity and skills as one! I’d love to know how you feel about my tips and if you have some of your own you’d like to share! Please feel free to let us know by commenting below.

The Tutorial

Lets get started, download the Twitter PSD Background Template courtesy of Chris Spooner. This PSD has all the different screen resolutions and where the twitter section will be in relation.

Grab your websites header and place it in the top left corner. Then shut the visibility of the template group off.

Using this Hi-Res Spray Brush Set – start to erase the right end of the header, the reason behind this is that we want to make the head fade of to the background colour seamlessly with a nice sprayed grunge effect, rather than a straight edge.

Using some of your own brushes really start to personalize the end result whilst blending from the header to the background. You can also use a white brush to spray some texture at the center of the header.

Next, grab your logo and place it on the canvas, scale it to size, rotate it to make the design more free and fit with the fading edges.

Download a blank polaroid photo frame, scale it to size and rotate it the opposite way to the logo.

With the polaroid layer select go to Edit>Transform>Warp.

Warp the polaroids image at the bottom right up – this will create the effect that the edge is slightly curled.

Next to add more depth and realism add yourself a drop shadow with an angle of 35, opacity of 50% and a distance of 3px.

Now just turn the visibility of the PSD Template back on just to check that everything is aligned okay at the standard screen res.

Make your twitter page personal to you and grab a photo of yourself and rescale and rotate it in position, then give it the same Warp we did with the polaroid frame.

Add your name to the bottom space of the polaroid frame, the font I have used here is called Dear Joe.

Get yourself a Mug Stain Brush and place it over the polaroid photo, set the blending mode to Multiply.

Download Free Hand Drawn Doodle Icon Set bring the icons that you want or you are part of and desaturate them (SHIFT+CMD+U), rotate and scale them to your preference.

Next, take the desaturated social icons and nudge them into position behind the polaroid photo.

Using the same spray brush set as earlier bump the resolution up and set the colour to black, then spray some where over the header

Next, change the opacity of this layer down to 25%, this will add more of a textured feeling to the header.

Now find yourself some nice doodle brushes and place some around the design, then drop the opacity down to 35% so they aren’t too intrusive to the design – yet making it more ‘personal’.

That’s pretty much the design side of it done! You want to keep your websites theme and make it more personal. However, you don’t want to clutter it as it’s only the top left corner you have to work with. Now crop the design to the smallest area possible and save for web and devices (OPT+CMD+SHIFT+S) – save it as a JPEG and tweak the file size so you get high quality with the smallest file size.

Login to your Twitter account and navigate to your settings page, click the tab that says design. Change the background image by uploading your new design remember not tile the background.

Next, change the colour scheme of the design so that it matches the overall colours used in the design. Use the eye dropper tool in Photoshop to get the hex colour and simply apply it to the desired section.

Final Image

With the design complete head over to your profile and check out your new design! If you enjoyed this don’t forget to follow me on Twitter.

The Step By Step Tutorial

Create yourself a new document with the dimensions 600x315px, colour mode RGB Color – 8 Bit and set yourself a white background.

Download and Install the font HandVetica. Type out the text “TheDesignersYard” at 70pt in black with the anti-aliasing method of crisp.

Next, go and grab yourself a high res grungy paper texture from Bittbox, I have used the last one on the page. Drag the paper texture onto the canvas and shrink it vertically – this will add a little more ‘crinkle’ texture and lay the layer over the text.

With the paper texture over the text layer, head to the layers palette, make sure the text and paper texture are next to each other in the palette – hold down the “alt” key whilst clicking inbetween the two layers. This will now overlay the paper texture right into the text. Nice and easy with no fuss.

Go ahead and grab yourself another grunge paper texture from Bittbox this time I chose the first one. Bring the texture onto the canvas and again shrink it vertically however this time down to the same height as the text.

Once you’ve positioned the texture where you want it – shut the visibility of this layer off and lock it up. Switch to the magic wand tool (W) – on the text layer select the area outside of the text and the centers of the letters i.e. ‘e’ ‘d’.

Switch back to the second texture layer unlock it and turn the visibility back on, now cut the pixel that you have selected (CMD+X). Now you should be left with the text “TheDesignersYard” in the texture you had. Next, desaturate the layer (CMD+SHIFT+U).

Next, change the blending mode to overlay and whack the opacity down to around 70% – this just adds extra texture to the text.

Find yourself a cracked ‘ground’ texture or use the one I have from TextureVault. Duplicated the texture over the text or if the texture is high res shrink to fit. Next desaturate the layer (CMD+SHIFT+U).

With the layer desaturated set the blending mode to overlay and change the opacity down to 90%.

Open yourself up a new layer and select a soft edged brush, set the colour to white and paint over the top half of the text.

Select the outside of the text layer and delete this from the white overlay layer so you are left with just the top portion of the text in white.

Change the blending mode to overlay and drop the opacity all the way down to 15%, to give the effect of light coming from above.

Next, start to make the grass – use the file above by duplicating the different varieties of strands to make your layer of grass.

Now that you have perfected your grass and are happy with it, switch to the eraser tool (E) and select yourself a soft brush. Lightly soften the bottom edge of the grass, also erase some of the grass that covers the letters – for example you can see where I have made the ‘g’ visible, this will help add more depth.

Next, take my pre-made soil texture and position it under the grass. I achieved the soil look through a variety of different textures and colours. It’s just the way I want it, feel free to experiment with it.

Switch to the eraser tool (E), change to a soft brush with a texture and start to shape the soil – whilst doing this remember that the effect you are trying to achieve is soil, so make it look crumbly and realistic.

Now the soil is shaped and you’re happy with it duplicate the grass layer, flip it vertically and change the opacity down to 40%. Next shift the duplicated layer behind the soil leaving the tips showing. This will just finish the soil off and give it a more realistic feel.

Now to finish off that soft edge we left on the grass earlier. Duplicate the grass layer and again flip in vertically, erase the majority of the grass leaving the tips. Next, shift this layer up to the soft edge to really add realism to the grass.

Next, Grab yourself a bird and place it in the top right corner of the text and add a white 1px outside stroke to the layer effect.

Finally open up the layer style panel for the text layer and add yourself a #87a20e 1px stroke to help blend the grass and text together whilst added a definitive line between the background. You can also go around the layers with the burn and dodge tool to make the image have some depth.

There you have it, a step by step tutorial on how I created TheDesignersYard Logo, granted I’m not sure if this will be the final logo, therefore it’s open to suggestions. Let me know if you like it, hate it or have a suggestions. Any feedback will be appreciated.

**Please do not steal this as your own and if you do make one with your own text be sure to give a link to this tutorial as it maybe the final logo for The Designers Yard. Thanks.

Learn How To Make A Coming Soon Page – Including This Logo