Klever media Essex web design blog

Social media ticket stub icons

Sun, 29 Apr 2012 11:36:21 +0100

My latest item uploaded the the envato market place are 7 highly detailed and original social media ticket stub icons perfect for your website's footer or promotional work. You can purchase the social media icons for a small price of only $2 and are free to use them how ever you wish.

What you get for your $2 is a fully layered photoshop document with high res versions of the social media ticket stub icons which you can reduce to the size you want. All icons are editable so you can add your own colours or recreate your own social media icons.

5 PSD navigation bars

Mon, 23 Apr 2012 16:45:19 +0100

Do you like to dabble in creating your own custom website templates or work on your own website from time to time rather than paying a designer?

If so purchasing layered psd files could be the way forward for you. Whether it's to learn from other designers or to simply implement them into your next web design template or current website there are lot's or benefits of purchasing ready made psd's.

i have uploaded 5 vibrant colourful navigational bars for your own use which you can download here.

Modern email template for sale

Fri, 20 Apr 2012 09:48:37 +0100

Are you looking to grab your customers attention with stunning - eyecatching email template? Next time you send out an email campaign why not think of Rewind and how it can help engage your product with your users. You can purchase this premium templater which comes in a variety of 8 vibrant colours for only £5.

What do you get for your money?

8 HTML Templates
1 Fully Layered PSD including all colours for easy editing
8 Colour Themes
Widgetized Layout To Create Your Own Schemes
Tried & Tested

Baby pink email template

Blue email template

Green email template

Lime email template

Orange email template

Pink email template

Red email template

Yellow email template

Web design portfolio via Forrst

Mon, 19 Mar 2012 09:48:37 +0000

I'v posted about my portfolio profile on dribbble where I post my latest web design work and experiments. Since being quite new to dribbble I only have a handful of web design illustrations and elements posted in my portfolio, so today I'd like to share my Forrst portfolio with you.

Forrrst works much in the same way as dribbble where web designers, graphic designers, logo designers and icon designers can post their current work to gain feedback from other creative professionals, except that Forrst allows for programmers to posts chunks of code and links to pages and articles as well .. so it's not completely visual as dribbble is.

I've been a member of Forrst for a while now, posting up design that eventually never saw daylight as well as experiments for personal skill gaining and some just for the sake of designing! So as you can see I've managed to build up quite a portfolio of design work which hasn't quite made it to my website, for various reasons.

If you would like to go and take a look at some of my web design work then please feel free.

Web design portfolio via Dribbble

Sun, 18 Mar 2012 09:48:37 +0000

It's been a while since I made a post about web design, and since I've been very busy working in the web design field on various projects I've not been able to update the blog as often as I'd like. So today I'm going to share some of my web design work and experiments I create especially to post on dribbble.

Dribbble is a show and tell type of website where web designers, graphic designers, logo designers and icon designers can post "shots" of projects they're currently working on and gain feedback from other professional creatives to help improve on they're work.

I've been apart of dribbble for a few months now and am starting to gradually build up my web design portfolio, so head over there and like my work.

HTML5 cheat sheet

Thu, 08 Sep 2011 10:12:16 +0100

With HTML5 being the big thing at the moment, and developers using the new coding standard more and more often it seems like designers and developers alike need to keep up. With any new type of coding language, or an update in this case you need to lean new tags and features and just what they do. A cheat sheet is the answer to learning new tags fast, I've come across a few good HTML5 cheat sheets but this one written by Antonio Lupetti seems to be one of the best in my opinion. Check it out, and see if helps you learn the new HTML5 tags.

http://woorkup.com/2009/12/16/html5-visual-cheat-sheet-reloaded/

HTML5 in web design

Sat, 18 Jun 2011 16:57:53 +0100

Though html5 has yet to be confirmed fully "ready" for commercial or client use, many web designers have already started to use the new html5 markup language to structure their websites and take full advantage of the latest tags and features.

After browsing the web I've stumbled across various fantastic looking websites which are already using html5. Take a look at the following websites, and ask yourself if you will be using html5 in your next web design project?

Create an emblem logo in photoshop

Thu, 12 May 2011 05:00:00 +0100

Round emblem logo's seem to be the "in thing" at the moment, you see them everywhere, magazines, blogs, community websites such as dribble & forrst. The reason for this? well they look pretty damn sweet for a start. I've been checking out some great designs over at Forrst and wanted to create my own emblem logo with my own spalsh of style, and why not share it with you guys.

So, this is finished product of the emblem logo we'll be creating in photoshop, nice eh? So go ahead and head over to the hv-designs to get scoop on how to create your own photoshop emblem logo.

Changing the default text selection colour

Mon, 09 May 2011 15:37:50 +0100

Have you ever come across a website with a custom background colour used to style the content when you highlight the text? Well, you can add this little trick to your collection of "know-how" with the simplist piece of css.

Highlight some text on this page to see just what the heck I'm talking about... cool eh?

Head on over to the web design tutorials page to find out how to get this cool, simple effect working on your website.

Create a widget ready footer for Wordpress

Mon, 25 Apr 2011 23:04:36 +0100

I've been working with Wordpress more recently and come across a few simple tricks and hacks which make the platform more versatile and easy to use and it's non stop impressing me, this got me thinking that I should share something very simple with you, that will really help improve your Wordpress theme.

Though it's not quite a "trick" nor a "hack", it is still very extremely useful in making your theme's footer more dynamic.

Start by opening you functions.php file and inserting the following code.

View code

Ok, so let's take a look at what we've done here...

Name
We've named our widget the obvious, footer. We can copy and past the above code placing it inside the function again to create a second widget area, something like "Second Footer Widget Area".

Id
Again very obvious, we've given the id the same title as Name.

Description - Keep your description short and to the point, this is what's displayed in the admin panel.

Before_widget
We've left this blank, but it's used to place your widget inside a some html such as <div class="footer-widget">.

After_widget
This would be a closing tag like </div>.

Before_title
As above, this would be to wrap a heading tag or something similar around the title, let's just say <h2>.

After_title
Again, the closing tag would be used here </h2>.

As I've done in the pasted code, if you don't want to wrap your widget or title in any html set to false.

Now all we need to do is place our lat bit of code in our footer.php document to allow widgets to be applied to our footer.

View code

Save your document, log into your admin panel and your set to go!

Simple jQuery/css3 modal box

Mon, 21 Mar 2011 22:53:18 +0000

Have you ever wondered how to make those cool looking pop up windows you see floating about on those "high grade" type of websites?

Well luck has it I've just written a tutorial over at hv designs which shows you how to create your own jQuery modal box with only a few simple, easy to follow steps.

You will only need basic knowledge of html, css/css3 and html to get the desired jQuery effect.

5 places to sell your wordpress themes

Wed, 16 Mar 2011 01:10:49 +0000

A lot of web designers create wordpress themes and sell them online as an extra source of income, and some of these designers make a good living out of this. If you're looking to start designing and building your own custom wordpress themes then you'll find some of these websites useful for selling your work.

Theme Forest

Mojo Themes

Theme Garden

Woo Themes

WP Theme Market

Make your own pure css3 buttons

Sat, 26 Feb 2011 10:22:40 +0000

Css3 makes it quick and simple to apply various new styles to your css stylesheet to achieve great effects. Css3 isn't fully supported by all browsers so most designer tend to use the new css rules if they can degrade nicely in browsers such as Internet explorer. For this tutorial we'll be using the new rules, css gradient, css text-shadow & css rounded corners.

All you need to do is create yourself an anchor link with the class "button". Next you need to apply the following css rules to your stylesheet for the desired effect.

a.button {
	margin:10px 0;
	display:block;
	padding:15px 25px;
	width:75px;
	text-align:center;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	font-size:12px;
	/* styling for chrome */
	background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.25, rgb(183,241,71)),
    color-stop(0.63, rgb(220,255,100))
	);
	/* styling for firefox */
	background-image: -moz-linear-gradient(
    center bottom,
    rgb(183,241,71) 25%,
    rgb(220,255,100) 63%
 
	);
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	text-shadow:1px 1px 0 #91c232;
}

We can now add a hover effect to our button, I've just reversed the gradient and removed the test shadow but you can try adding a new gradient colour, or a box shadow maybe.

a.button:hover {
	text-shadow:none;
	background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.25, rgb(220,255,100)),
    color-stop(0.63, rgb(183,241,71))
	);
	/* styling for firefox */
	background-image: -moz-linear-gradient(
    center bottom,
    rgb(220,255,100) 25%,
    rgb(183,241,71) 63%
	);
}

Replace your web images with @font-face

Fri, 25 Feb 2011 22:55:12 +0000

@font-face is an extremely useful css rule which allows you to use non-standard fonts on your website to replace the use of title images and graphics. There are a lot of benefits using @font-face over images and graphics, like reducing page loading times & saving bandwidth.

The great thing about using @font-face is just how easy it is to implement it. All it take is you to place your chosen font into your website directory and add the following css rules to your stylesheet.

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

And to apply it to your title's simply use the following.

h1, h2 { font-family: Delicious, sans-serif; }

It's as simple as that, 3 lines of css and you can start replacing your images with pure css and html. You can download more fonts at Font Squirrel, they offer a download service specially for @font-face which allows you to download a kit, be sure to check that out.

Keep in ind that font's are licensed just like images, so you'll need to make sure that if you're using a font commercially that it comes with the license.

Create a professional clean button in photoshop

Tue, 22 Feb 2011 15:35:08 +0000

Using buttons in your web design projects can make your call to actions clearer and grab the users attention if done right. In this Photoshop tutorial I'm going to walk you through the steps needed to make a professional, sleek looking button to use in your next web design project.

Let's get started

To get started we need to open up a Photoshop and create a new document, we'll make it 300 x 200 pixels. Now create a new layer named "Button", we'll keep things simple. Select the "Rounded rectangle tool" and create yourself a rectangle shape like below.

Add some style

The button shape is pretty much the foundations to creating our button, from here on out it's all about adding some styling to bring it to life and make it pop. To start we'll add a nice gradient, I used the colours #e80b63 and #d60358 but you can use pretty much whatever colour you like.

Gradient overlay

Stroke

Now for a gradient stroke to give the button a nice outline, again I used the colours #c80251 and #f60f6b but you can use something else.

Inner shadow

Next we'll give the button a white inner shadow, this will give the button a nice shining light effect.

Drop shadow

To finish of the styles for our button we'll just add a slight drop shadow like so.

Add some text

With the button style all this leaves is for us to add some text, I used Arial bold at 13pt with the anti-aliasing set to sharp. Then set the following blending options.

The finished article

Well done, you've just created a professional, sleek photoshop button ready for use in your next web design project.

Top 5 creative design websites

Sun, 13 Feb 2011 10:20:30 +0000

There are plenty of graphic based websites out there for designers to show off their photoshop skills. Whether you're looking for inspiration for your next web design project or a strong community to share your experiences and work with, these creative websites offer a vast amount of high quality work for your browsing pleasure. I've compiled a list of the 5 most popular creative sites around that a worth joining, they are invite only but you can request an invitation to join.

Dribble

Forrst

LoveDsgn

Designmoo

Behance

Klever media website re-designed

Fri, 11 Feb 2011 20:17:38 +0000

It's been just over a year now since I launched the website in December 2009, and it's had it's first complete re-haul. I started out with a simple one page static website with little information about myself and what I do, along with a portfolio and contact info. I've moved along way from that with the design & build as I'm now using the content management system SilverStripe to manage and edit content and generally keep it up to date.

Along with the new content management system I've added nice little visual effects and features such as twitter feeds and my new blog. Take a look around the website and let me know of any issues or just if you like it!

Feel free to leave a comment below.

jQuery sliding effect tutorial

Wed, 20 Oct 2010 20:18:41 +0100

If you want to really make images on your website pop then have a read through a tutorial I wrote on jQuery sliding divs over at HV-Designs. This jQuery tutorial teaches you how to slide content into view over the top of a thumbnail or advert for visual effect.

You don't need to have much knowledge in jQuery to follow along, as long as you have a good understanding of html and css you should find this relatively easy.