Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 12 2012

21:00

Landing Pages Guide 101: Create Landing Pages that Work

I am by no matter an expert in landing page creation, but I am doing a lot of research on this topic in order to become more experienced myself and I invite you to join me in this journey.

In this article you will be taken through each important step in order to create a successful, landing page that converts visitors into customers, I will share the biggest takeaways here and point you to the right articles and tools – let’s call it Landing Pages 101, Science Of Landing Pages, Anatomy of Converting Landing page, whichever you prefer most.

What is a landing page and where it is usually used?

Basically a landing page is a powerful online marketing tool – it’s a unique webpage, also known as a lead capture page, where your task is to persuade visitors to complete a certain action for example:

  • to subscribe to your newsletter in exchange for an ebook or product demo
  • buy your product
  • to register for a webinar

Your main goal is to create a landing page that encourages your visitors to complete a specific action. That’s far from being an easy task, landing page creation is an art, which is very hard to master, and even when you do you still need to do a lot of A/B testing to adjust your assumptions about how your visitors think and to see what works and what doesn’t.

Landing pages are widely used to launch webinars or products, pre launches, persuade visitors to give you their email address with the help of ebooks, email courses, special discounts. And as we all known once you have a visitors email address you can communicate with them on a much more personal level, which helps to establish relationships and also encourage them to do what you wish them to do.

In this article you will be taken through each important step in order to create a successful landing page, capable of converting visitors into customers. If I didn’t succeed in explaining what a landing page is read the Wikipedia explanation or this great Hubspot blog article.

Strope inspirational minimal landing pages

(Strobecorp – beautiful and minimal landing page example)

How to use this guide?

This article is separated into sections starting from landing page structure, color usage, copywriting, how to write great headlines, tips on how to improve an existing landing page, templates, tools to use, a/b testing tools, analysis of some of the best landing page examples and more. Feel free to jump to the sections to learn what you find most important, though if you take the time to read this entire guide section by section, I can assure you, you will know more about landing pages than 99% of the rest of the industry!

Well, now that you know what to expect here, shall we start?

How to know when to create a landing page? Where are landing page used?

You can use landing pages together with:

  • ad campaigns through Adwords
  • guest writing
  • email newsletter
  • product launch
  • product pre launch
  • coming soon page
  • etc.

When you run campaigns it’s not smart to send people to your home page. Usually your Home page doesn’t explain a lot about your product, you need to make it as easy as possible for visitors to do what you want them to do. If you want to promote your latest product, webinar or ebook, make it as simple as possible. Point them to a special landing page where they can do just that! If you know where your audience comes from, learn about them and make it as related as possible.

When you run special campaigns on a website, for example a giveaway, greet them and customize your message! Make sure there isn’t any confusion what you want them to do (call to action) and build your landing page around this call to action. Simple is better, remember that!

Milk inspirational minimal landing pages

(Milk Inc. minimal landing page clearly shows how less is better).

Landing page anatomy (step by step parts in landing pages)

Before we start I’ll explain a few terms I will be using:

Visitor – visitors who come to your landing page, potential customers

Product – product in this case would mean an ebook, email newsletter,t raining, webinar, article etc.

Introduction

The best product launch is when you have a product other people will love so much that they will tell other people about it! And your product must be just like that, whether it is for a global audience or a very specific one, the first thing you need is a great product place and the landing page is the place to show it off and explain in simple words why your visitors need it!

Make your product desirable and memorable.

The Anatomy of a Perfect Landing Page

This is a great infographic visually explaining the most important sections of a landing page and how to direct visitors attention.

Anatomy landing pages

Top Page Headline

This is usually the first section a visitor will see as headlines are usually big and you need to make sure you explain what you’re offering here and what the page is about in a few seconds! What problem do you solve and why your visitors should care about it.

For example in this article the headline is:

Landing Pages Guide 101: Create Landing Pages that Work

You know straight away what to expect, you’re going to find a comprehensive guide on how to create landing pages that work! Make your message as simple and clear to understand as possible! Peoples attention spans are very short and great products aren’t used or articles aren’t read just because someone wrote a crappy headline!

Make sure your ad copy targets visitors to the right page to fulfill expectations:

Bonus tip: use the same color palette or graphics on your landing page as in your ad copy assuring visitors that they came to the right place when they clicked on ad. Example from MojoThemes campaign below.

Mojo Themes Cyber Bundle 2011

One Clear Call to Action

Build the whole landing page around your call to action, because it’s the main focus right? You created a landing page to get your visitors to complete a certain action and because of that make sure the call to action is easy to notice, whatever it is – subscribe box, buy button, form you want them to fill out.

Make sure your call to action is above the fold (basically it’s on the page visitors see without scrolling, approx 500px height). Some minimal landing pages even just put their whole message above the fold, making sure visitors don’t need to do ANY scrolling and keep their message super simple! You must aim for this goal too!

I’ve already mentioned how important it is to have one clear call to action and how you should build your landing page around it, but I wanted to emphasize this and include some more articles you will find extremely useful if you want to know how to create a memorable call to action or how to can improve your landing page to focus more on your main goal:

Shipment inspirational minimal landing pages

(Shipmentapp has no distractions, just one clear call to action).

Clear Headlines

The same way you use your headline you should use subheadlines. Use them to emphasize your message as you explain to your visitor what your product is about. Put the same attention into subheadlines as you put into your main headline, because you want your visitor to keep reading, you want to keep them engaged until he is sure your product is what he wants!

Note: continue reading the section about copywriting because the art of headline creation is really complicated and requires a lot of learning to master.

Page Content

All the page content should be focused on what your main headline says and a single, focused message and, of course, your call to action. Make sure you list the benefits of your product, not just your product features, you’re the most proud of. When you create page content, you need to think from a visitors point of view. Will they be interested in the features you offer, or how these features will benefit them?

Keep your most important content at the top of the page together with bullet points, because most visitors at the beginning tend to scan a page and you need to grab their attention to get them interested enough to read further.

For example, if:

  • feature is – Create a website without any coding skills
  • benefit is – You can save time by creating a website without any need to learn programming or spending a lot of money to hire a designer or programmer.

Make sure your 3 or 4 most important benefits are immediately clear.

You can also emphasize some of your content by making it bold or italicizing as I have done right below.

Tip: Focus on just three key benefits or ‘pain points’ you solve and no more! This will help your visitor to easily understand what your product is about, and more importantly, how it will benefit them.

Page content is also the place where you tell your story, build trust by showing your experience and address your audience by showing pain points they have and how you will solve them. When you tell this story, break your content up every 2-3 sentences to avoid the page looking cluttered. This is also why you need to use bullet points and numbered lists as I’ll discuss in the next section.

Write your content from a second person’s perspective – “You” addresses visitors much more directly than boring formal text.

Make sure you proofread and that there are no spelling or grammatical errors, your product will look much more professional and trustworthy!

Also don’t put too much text, because research shows 90% of the population doesn’t like to do much reading, which means headlines, images, video, and bullet points will get much more attention, where content may not get much at all.

Slidedeck inspirational minimal landing pages

(SlideDeck’s landing page shows how even with many elements you can still make a landing page look clean and simple).

Use Bullet points and numbered lists

Making use of this formatting will help your visitor understand what your product is about, the value you provide and what your message is. It will also simplify your layout, and simple is always better as peoples attention spans are super short.

Use Images

Images often explain more than words can – why do you think infographics are so widely popular? Infographics bring text together with images that require little to no explanation, I always encourage my readers to use images in articles, because visual relation is much more powerful than textual, as is our memory.

Stumbleupon inspirational minimal landing pages

(StumbleUpon did a very good redesign and their homepage makes great use of beautiful images).

Use Videos

And videos explain more than any single image could, you have a chance to show yourself, let people hear your voice, show them you’re a real person and it’s a great way to explain what your product is about and let your visitor just sit back and listen instead of browsing the page, trying to understand what he sees and whether he needs your product or not.

Social Promotion

If you are offering something of great value then of course visitors want to share your great product with their friends right? Make it easy for them and provide social promotion links, but remember to use just the most popular services like Twitter, Facebook, LinkedIn and nothing else. Keep it simple and try to place these links in a way that they don’t distract your visitors.

Here is a great spot to run A/B testing to make sure your social links don’t distract visitors from your main message.

Provide security

When you are asking for visitors personal information,  they will often have some anxiety about giving it to you, so you need to make sure you build enough trust!

You need to think like your visitor, why do they have that anxiety? They receive a lot of spam, scams and cold calls from sales people so you need to explain that this is not the case here, right?

You can build trust with:

  • high quality design and strong branding – for example I receive a lot of emails from people asking to check out their service, article, or help them promote it, but when I visit a site and it’s looks crappy  and has a terrible logo – I immediately close the page without even reading further! Presentation is so important, your product should look (in)credible!
  • testimonials – once you have grateful clients make sure to get recommendations from them! It’s even better if you can get testimonials from popular people in your industry or get mentioned on popular blogs.
  • 30 day money back guarantee, third-party security certification like SSL cerificate, guarantee seal.

What should call to action forms or buttons look like?

Usually your call to action will be subscribing to an email newsletter or a request to buy the product. It’s a very hard to decide how long your form should be, for example is it enough to just ask for their email, or do you need  your visitors name? It’s up to you, but try to keep your form as short as possible, the more input you require from your visitor the less likely they will go through with it. Ask for the least amount of information you need – the less information you require, the more signups you’ll get, simple as that.

It’s even harder with buy buttons because the next step is usually a request for their personal banking or credit card information. I recommend using my personal favorite, Paypal checkout, which is fast and simple and doesn’t require your visitor to share their personal financial information with you.

You can add some fields that will help you learn more about your customer, but make them optional, not required. A better option is to show these fields after subscribing -

Thanks inspirational minimal landing pages

Experiment with button and form size, usually bigger buttons perform better than smaller less noticeable ones.

Text on button

The default text is Submit, but studies show that it’s better to use something like Click Here or Go, but you can also take a different approach by making buttons more engaging and relevant to your offering like “Get Your Free Ebook Now!”, “Subscribe for news!”, “Get access now!” or “Download now”.

Posterous inspirational minimal landing pages

(Posterous has a beautiful, simple, landing page and good examples with call to action buttons).

Thank you page

Once your visitor has completed your call to action make sure you show your appreciation by simply saying thanks, offering a cool freebie or by directing them to related information on your site they may be  interested in.

On this page you might choose to give access to your product (if it’s something they can download), give more details and put the download link.

If you chose to not use social promotion on your landing page, you can use it here – ask them to share this offer or product with their friends!

Now you will usually have collected your visitors email address so keep them engaged and follow up there. I won’t get into this topic right now as we’ll have a separate section explaining how to make use of your email list.

Colors

You must also have a clear and basic understanding of colors, because different colors convey different meanings and are perceived differently. Check these three articles to learn some basics about how to use colors in web design and your landing pages.

preview-empathizing-color-psychology-web-design.jpg

How to pick the right font?

I didn’t want to go in depth in this topic, instead I found a good article for you to read if you want to know more.

Tumblr inspirational minimal landing pages

(Fonts can make or break the landing page, Tumblr does it right with professional fonts and effective use of whitespace).

Pricing tables - How to choose product price and how many options to offer

It’s a scary place to be thinking about how to price your product – you don’t want to price it too low and undervalue your product, and you don’t want to set the price too high and turn people off. How do you decide how many pricing options to offer and how to choose the actual product price?

It all depends on the exclusivity you provide, if you can make it look desirable, you’ll probably have no problem charging a higher price, but your landing page copy better be well written should be very well  to create that desire, need and rush that will convince them your product will help them change their life or business! And yes, if you charge a high price be sure you can deliver – people want to get what they paid for!

I like to think it’s better to set prices higher, and then offer discounts and experiment with your price point. As for the options – I think the best choice is to have one price, one call to action, but if you really need more, don’t have more than three plans. Too many choices will just confuse your visitor and he will turn away! Ah, and if you have more plans, be sure to offer a top choice, which should be the best value, to make it easier for your visitors to choose!

But here I will repeat what everybody is repeating a lot already – do A/B testing, don’t assume anything, just test it and know for sure what works and what doesn’t!

Here are two articles on this topic from SocialTriggers to help you make an even better decision on pricing:

..and a bit of inspiration, how a good pricing table should look and how to differentiate several plans:

preview-pricing-tables-inspiration.jpg

Tips on how to create, or improve, your landing page and some useful articles

Here I will again cover and repeat some tips you should really remember again and again while designing your landing page, and if you have already have a landing page, then check these tips to improve your page! For example did you know? “Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.”

  1. Put the most important content above the fold, did you know 80% of web users spend their time at looking at information above the page fold and only 20% of their attention goes below the fold? Ok, admittedly, the research is a bit old and the way people are viewing the Internet has changed, but it’s a huge difference! Most people will view just above the fold, be aware of that!
  2. Simplify your form/ Use a simple button in order to make the page as easy to understand as possible and the call to action as easy to complete as possible!
  3. Reduce distractions - remove visual clutter, make use of white space, hide navigation, if you have one there and don’t use links which will drive visitors away from your landing pages…every little mistake adds up and results in less sales and completed action steps for you!
  4. Use white space to direct the eye to the sections you want and effective use of whitespace will also make your site look cleaner and more professional.
  5. Optimize landing page for search engines to make use of search traffic as well, which will be huge in the long run!
  6. Only have one call to action on the landing page, but repeat it several times throughout the page if your page is longer. Good practice is to always have the call to action visible as he scrolls. I also want to take this opportunity to remind you not to have long landing pages, however if you have one, then include one call to action at the top, middle and lastly, one at the bottom.
  7. Make sure your page loads fast - people don’t like to wait, attention spans are short and if you keep them waiting too long, they won’t wait at all. The same way you need to keep your landing page simple, keep your code clean and the images and video optimized.
  8. Use heat maps to see where people are clicking the most, by doing this you’ll also notice sections where people tend to click, but which aren’t clickable  - this means you should test your landing page more to make it super simple to understand and help your visitor complete your preferred action.
  9. Put email privacy information right next to the email input box, simple text – “We don’t spam and hate spam as much as you do.” can work wonders and build trust.

Instagram inspirational minimal landing pages

(Instagram’s landing page clearly shows it’s app for iPhone, it’s free and there is one call to action – download app from AppStore).

Here are some related links you should read for some really in depth knowledge about landing pages:

Copywriting importance, learn art of copywriting

The art of copywriting is actually the art of keeping your readers engaged from the first word to the last. Keep them engaged in your content with bullet points, sub headlines, the artful use of formatting. Make your content flow so seamlessly that before your visitor is even at the middle of the page they desire your product and are already wanting to complete your call to action! It’s a very hard art to master and here are several articles to help you learn copywriting. If you read these articles, when you finish you’ll know more about copywriting than most people do, and that’s a huge advantage over your competitors:

preview_large_headlineimpact.jpg

Templates to get you started:

You can find a lot of great templates online, some you can use right away that will help you kickstart your business! I think templates are great place to start, I recommend a lot of A/B testing and once you’re ready and know what you need, you can hire a designer or a coder to develop your own unique landing page that converts really well! These templates are very cheap and should are perfect to get you started!

Landing page templates from UnBounce – here you’ll find a lot of great templates, you’ll be able to edit in WSIWYG editor easily without any coding experience! UnBounce has huge experience in this market, so you can be sure you’ll be in good hands to get started.

Unbounce landing pages

Themeforest

Themeforest landing pages

Themeforest is a huge marketplace, selling everything from WordPress themes to landing pages! Even if you don’t end up buying a premium design, these are great source of inspiration! Here is a link to their landing page category, order these by sales to see the most popular landing pages on that site.

A few of my favorites:

Conversation ($10)

Conversion is a premium HTML landing page. Its great structure and clean, professional design as well as a variety of page templates allow it to fit to both transactional and reference landing pages.The main goal of a landing page is to convert visitors into customers, therefore the layout is specially designed and fitted with a variety of features that will make that happen. Coupled with a structure that’s highly customizable, this product will be perfect for your product, service or company presentation.

01_Conversion_Premium_Landing_Page.__large_preview.png

View Demo

Lista ($8)

Lista Landing Page is a premium landing page design for your newsletter or download, even just a service, your choice! Lista Landing Page makes good use of the Z Reading pattern to guide the eye around the design and ultimately convert your visitors in to subscribers or buyers.

01_a.__large_preview.png

View Demo

Integro ($8)

Integro is a Corporate HTML /CSS landing page. It has a clean, professional design with a Definitive Call to Action. Integro is a powerful Landing Page with features like Live AJAX Form Submission, Pricing Table, Lightbox, Tooltips, 2 Types of Galleries and Image Sliders. You get started with Integro within minutes & only handful of Customizations with well documented HTML / CSS / JS & PHP .

01_preview.__large_preview.jpg

View Demo

Online tools you can use to create landing pages

Ok, this is the more advanced stuff! Once you know a bit more about what you need even if you don’t really think that you can code and design landing pages yourself there are a bunch of amazing online premium tools you can use to build your own landing page in no time! Often those tools come together with helpful tips on how to design a landing page and some even include A/B testing! I did a lot of  research and these tools are the best ones I found and tested! Get started right now!

Premise

This is a handy premium WordPress plugin create by CopyBlogger Media for easy landing page creation. You won’t have any more problems creating unique pages, which look good and go seemingly with your own WordPress blog. I bought myself this plugin some time ago and I must say it is easy to use. The tutorials helped me learn a lot about landing page creation and for quick results don’t look any further.

I think this is the best tool for landing page creation without need to hire a designer to do the job, however of course for advanced solutions you still would need to search for help, but for most cases it’s enough with Premise. In their features you’ll also find included A/B testing through WordPress and even SEO tools letting you get all the data you could need from your page.

It’s a bit pricy ($85), but if you need to create a lot of landing pages, it is certainly worth the money.

Premise landing pages guide

Unbounce

Unbounce is online software you can use to create your landing pages. Everything is broken down into easy steps: build a page (choose from 276 templates), publish it, drive traffic and check results and in the end do A/B testing and optimize your landing page. This is a good site and if you need a cheaper solution, pick Unbounce – it has a 30 day free trial and the most basic plan costs only $25 per month.

Unbounce landing pages guide

KickOffLabs

KickOffLabs is another popular choice for landing page creation, they are trying to push social promotion into your landing pages encouraging you to be social, which is handy.

Their WYSIWYG editor is also very easy to use, you can easily pick from good color schemes and edit different elements easily. Only thing I think is missing here is advanced features for bigger landing pages with many elements, but if you want simple – KickOffLabs will be a great solution for you.

Kickofflab landing pages guide

Check their dashboard below – everything is there explained in 1-2 sentences, the learning curve is very small. Ah and yes, for one landing page KickOffLabs is free, but for advanced features you may need to pay as much as $20.

Kickofflabs landing pages guide

Related reading:

Importance of converting landing page and A/B testing

Once you have created your landing page, don’t stop there, you should always be testing – even if you can improve your page conversion rate by 4-5%, calculate how much it could improve your performance in the long run! Don’t make assumptions about what works, I bet you’ll get a lot of surprises through A/B testing!

With A/B testing you can test everything  –  headlines, content, bulleted lists, video placements, call to action forms, looks, colors, formatting – you get the picture. Services like Amazon have done countless A/B testing and are still doing it all the time trying hundreds and thousands of different tweaks, while this is extreme you should learn from them and keep improving yourself!

Here are several helpful resources I found to help you delve much deeper in this topic:

  • The Ultimate Guide To A/B Testing – introduction to A/B testing, basic explanations what to test, how to create your first A/B test together with Do’s and Don’ts and real studies.
  • The Guaranteed Way to Radically Improve Your Copywriting – guide from Copyblogger, beginning is little similar as previous article, but here you’ll get explained the magic of A/B testing – guessing game where simple text change increase conversations by 25%! Powerful!
  • A/B Test Case Study: Single Page vs. Multi-Step Checkout – nothing is better than real case studies showing how to do A/B testing!
  • Which Test Won? – this site runs a lot of different A/B tests, puts them online and create inspiring game from it! How good is your gut? Which version performed better – A or B? After you choose you can see actual A/B test results! Sharpen your skills here!
  • An Introduction to A/B Testing – one more explanation about A/B testing taking little bit different approach.

Tools For Landing Page Optimization ( A/B testing) – Measure Results

Ok, this is super important – I know, I know it’s too much at first – so many little things you need to know, be aware of and at the end really you still cannot assume anything! You need to test it! And to be honest for a long time this topic was like rocket science to me! I didn’t know how to get started, A/B testing felt like too complex a topic and too hard to figure out and use…

But not anymore with these amazing tools we can use these days!

These are the most popular choices:

Optimizely

Yes, I joined many Optimizely supporters and think it is the best tool available for now! It’s very advanced, yet very easy to use with everything you need built in for serious A/B testing! I just registered and right away I was ready to do an experimental test!

It is really as easy as they promise on website:

  • Enter your website’s URL below and create variations of your website in minutes.
  • Copy and paste your one-line Optimizely snippet onto the pages you want to test or measure as goals.
  • Start your experiment and learn which variation performed best!

Here you can read more in detail how Optimizely works.

Optimizely isn’t free (starting from $17/monthly), but it has a 30 day trial and I totally recommend it as a top choice for running any tests!

Optimizely ab testing landing pages guide

Heatmaps

Together with A/B testing heat maps also can be very useful to see where people click, scroll on your live version, maybe there is image on your site where people click, but it’s not a link? Maybe in that case you need to make that section clickable or change the image to avoid distractions?

CrazyEgg

This is the most popular heat mapping service, which I use personally. It also has a handy WordPress plugin allowing you to automatically add tracking code, making the whole testing process even easier!

Crazyegg heatmaps landing pages guide

If you were wondering if there are any alternatives to CrazyEgg, there is also a very popular heat mapping service called ClickTale, which is similar, but it has some interesting extra features such as visitor recording, conversion funnels and campaign tracking.

Blogs to read to get even more:

Landing page creation, optimization, A/B testing – all these little bits require ongoing learning if you really want to be ahead of your competitors and improve your conversion rates. It’s very hard to keep track of this changing world all by yourself, but it’s super easy if you know where to search for high quality content! These blogs focus just on these topics and I recommend adding these sites to your RSS reader so you are always the first to know about the newest tests, tools and techniques:

Do you know any more useful blogs or resources about this topic? Share away!

June 01 2011

18:25

Nettuts+ Quiz #2: jQuery Basics

Advertise here

So it seems you folks enjoy your quizzes, ay? All right; I’m back with another quiz for you jQuery newcomers. Think you can ace the test?




A Friendly Plug

So how’d you do? If you liked today’s quiz, consider buying jQuizzy, the engine that powers it, on CodeCanyon. You’ll love it, I promise!

jQuizzy
Sponsored post
soup-sponsored
04:52

April 04 2011

07:00

CSS Basics: How to Design & Code a Stylish Button

Some of my most popular articles and tutorials are those that cover the basics. In this post we’ll go through the process of designing a stylish button graphic in Photoshop, then build a complete working example in HTML and CSS. We’ll be looking at pseudo selectors in particular to create hover and active states for the button.

View the CSS button demo

The button we’ll be designing is built with lots of detail to create a semi-realistic three dimensional appearance. The button has three states – normal, hover and active. In the normal state the button is made entirely of blue, when hovered the text within the logo turns to purple, then when the button is clicked it moves to give visual feedback that relates to how a button would react in real life.

View the CSS button demo

The Photoshop concept

Open up Adobe Photoshop and create a new document. Fill the background with grey and add a white highlight to the centre using a soft brush. On a new layer draw a rounded rectangle with 10px corner radius.

Double click the layer to open up the Layer Styles window and add a Gradient Overlay. Enter the colours #0730a5 and #a4c9f3 then adjust the angle to 90 degrees.

Give the button an Inner Shadow to create more of a three dimensional appearance. Adjust the settings to 2px Distance and 9px Size using the colour #d9f7ff.

Add a thin 1px Stroke to the inside using the colour #8eb4f2 to give the button a fine outlining border.

Finally, use the Drop Shadow feature to add a fine 1px highlight on the bottom edge. Change the settings to Normal, 100% Opacity, 90 degrees, 1px Distance and 0px Size using the colour #4285bd;

Create a new layer underneath the current button and draw another rounded rectangle. Match the new rectangle to the top and sides but extend it slightly on the bottom edge.

Add a Gradient Overlay layer style to this new rectangle. Use the colours #174994 and #3c64bf at the outer edges of the gradient bar to create realistic shading.

Give this lower button shape a thin 1px Stroke with the colour #315a99. Align the stroke to the Center.

Finally add a soft Drop Shadow to create more shading to provide a touch of realism to the design. Adjust the settings to 30% Opacity, 5px Distance and 18px Size.

Use the Text tool to add some wording to the button, then give the text a Gradient Overlay using the colours #3062ae and #557ac9.

Add an Inner Shadow to the text to give it an inset appearance. Use the settings #5c8fdf, 100% Opacity, 3px Distance and 4px Size.

Finish off the inset effect by adding a highlight to the bottom edge. This is done using the Drop Shadow feature with the settings Normal, #8eb4f2, 100% Opacity, 90 degrees, 1px Distance and 1px Size.

Group all the elements that make up the button, then duplicate the group. CMD+Click the text layer and fill a new layer with purple (#6c3a9c).

Change this layer’s blending mode to Color. This variation of the button will appear when the button is hovered by the cursor.

Duplicate the group again, this version will be the active state when the button is pressed. Move the upper layer of the button downwards.

Draw a selection around the excess left above the button and nudge it downwards to match the outline. This essentially shortens the button’s height.

Toggle off the background layers and draw a selection around the button. Toggle on just the normal button layer group and Copy Merged (CMD+Shift+C).

Copy and Paste all three button states into a new file. Each selection should be exactly the same size. Save this file for web as a PNG-24 with alpha transparency.

The HTML structure

View the HTML code

Being a demo file with just one button the HTML is very simple. First we start with the basic document structure of Doctype, title and link to the CSS stylesheet. The container div will help centre up our demo while the actual button is created from a simple anchor. This <a> is given a class of “btn” so it can be targeted for special CSS treatment.

The CSS styling

View the CSS code

The CSS stylesheet begins with a simple CSS reset to remove the browser defaults from the elements in use. The demo file is then set up with the grey background and centred container div.

View the CSS code

The anchor with the class of btn is targeted with CSS using a.btn. It is first converted from an inline element to a block element to allow for a width and height to be added and furthermore to increase the clickable area. The height of the anchor matches the height of a single button graphic in the sprite image, creating a kind of window which will mask the other two button states. The image sprite is added as a background image and text-indent: -9999px; used to shift the default text off screen.

The different button states are created using CSS pseudo selectors. For anchor elements these include :hover, :active, :visited and :focus. The background image is shifted into place for both the :hover and :active states for the button to show the relevant image in each sitation.

If you test the button in the browser you’ll see an ugly dotted border around the element. This can be fixed using overflow: hidden; to prevent the border extending across the page, or it can be removed altogether by adding outline: none; to all anchor elements. Remember that this visual cue is important for users browsing with a keyboard and/or screenreader, so a backup should be provided using the :focus selector. By adding the :focus selector to the same code as :hover, we can simply replicate the visual change on both mouse hover and keyboard focus.

The final CSS button demo

View the CSS button demo

Check out the demo to see the complete CSS button in action. Notice how the default blue button state is shown until it is hovered by the mouse. The text then changes to purple, then if the button is clicked, the :active state switches the background image to give the impression that the button has been physically pressed.

View the CSS button demo

September 29 2010

10:00

The Ultimate Guide to Object Oriented Basics of JavaScript

Thanks to expertly crafted libraries such as jQuery and MooTools, JavaScript has become a foundation of Front-End Development. However, it’s extremely important that we note the higher level concepts utilized in these wonderful libraries. Why is that? As web developers, we must equally balance learning the current programming trends with attempts to push the boundaries of those trends. Without this balance, no innovation will occur in web development. So let’s take a moment to appreciate the fundamentals of JavaScript Object Oriented Programming, which include classes, inheritance, and scope.

Classes

Before we learn how to implement classes into your code, let’s discuss what classes are and why you should bother learning/using them.

As stated in the Java documentation, “A class is the blueprint from which individual objects are created.” Consider an actual blueprint used in the process of making a house. The builders use the blueprint to evaluate what properties the house contains and what functions the house will execute. Classes are a convenient way to represent the properties of objects, be it a house, car, or person. Classes become especially useful when more than one of a given object exists.

As an example, let’s compare two real-life objects without the use of classes. This mirrors the procedural thought process as opposed to the object oriented thought process. We’ll describe a man named Rob and a baby girl named Emillee. We must assume we know nothing about the human body since we have no blueprint(class) to work from.

Rob:

  1. Rob has two oval-like structures a few inches apart on the upper portion of his body. These oval like structures have a white background with a brown middle.
  2. Rob has two structures that run relatively parallel to the floor that seem to indicate the most vertical portion of the body that’s still part of the body’s base.
  3. Rob has two appendages that extend from another two appendages. These seem to be used to grab items. They seem relatively large.
  4. Rob measures approximately 6 feet in height.
  5. Rob involuntarily intakes oxygen and converts it into Carbon Dioxide.

Emilee:

  1. Emillee has two oval-like structures a few inches apart on the upper portion of her body. These oval like structures have a white background with a blue middle.
  2. Emillee has two structures that run relatively parallel to the floor that seem to indicate the most vertical portion of the body that’s still part of the body’s base.
  3. Emillee has two appendages that extend from another two appendages. These seem to be used to grab items. They seem relatively small.
  4. Emillee measures approximately 1.5 feet in height.
  5. Emillee involuntarily intakes oxygen and converts it into Carbon Dioxide.

That was a LOT of work to just describe a human’s 1) Eyes, 2) Shoulders, 3) Hands, 4) Height, and 5) Act of Breathing. Notice we had to make almost the exact same observations both times since we had no blueprint to work from. While describing 2 people wasn’t too bad, what if we wanted to describe 100, 1000, a million? There certainly has to be a more efficient way of describing objects that have similar properties: This is where classes shine.

Let’s rethink the previous example using an object oriented mindset. Since we are describing a man and a baby girl, we know they are both humans. So let’s first create a simple blueprint for humans.

Humans:

  1. Have two oval-like structures a few inches apart on the upper portion of his body. These oval like structures have a white background with a varying color in the middle. We call them eyes.
  2. Have two structures that run relatively parallel to the floor that seem to indicate the most vertical portion of the body that’s still part of the body’s base. We call them shoulders.
  3. Have two appendages that extend from another two appendages. These seem to be used to grab items. Their size varies. We call them hands.
  4. Vary in height depending on age and other factors. We call this height.
  5. Involuntarily intake oxygen and convert it into Carbon Dioxide. We call this breathing.

So we’ve stated that the properties of humans are that they have eyes, shoulders, hands, and a height. We’ve also stated that these properties may vary. Having defined the blueprint of a Human, and having declared that Rob and Emillee are human, we can apply what we already know about humans to Rob and Emillee.

Rob is a Human.

  1. Rob has brown eyes
  2. Rob has shoulders
  3. Rob has large hands
  4. Rob is 6 feet tall
  5. Rob breathes

Emillee is a Human.

  1. Emillee has blue eyes
  2. Emillee has shoulders
  3. Emillee has small hands
  4. Emillee is 1.5 feet tall
  5. Emillee breathes

By explicitly stating Rob and Emillee are Human, we take the properties and functions associated with being Human and apply them directly to Rob and Emillee. This lets us avoid redefining all the body parts while also letting us effectively describe the key differences between the two objects.

Here are a few examples of classes and their objects(known as instances of the class) so you understand the relationship between the two.

Class Student

  • Properties: grades, age, date of birth, SSID
  • Functions: calculate GPA, view absences, update conduct

Class Employee

  • Properties: EIN, hourly wage, contact number, insurance
  • Functions: set wage, view productivity, pull resume

Class Computer

  • Properties: CPU, motherboard, monitor
  • Functions: turn on, turn off, restart

So now that we understand the idea behind classes, let’s apply what we know to JavaScript. Unlike languages including PHP and C++, JavaScript does not have the class data type. However, using JavaScripts flexibility, we can easily mimic a class using functions.

Referring to one of our previous examples, let’s use a class to represent students.

When creating a class, there are two things you must do: You must know what properties/functions(also known as methods) the class will have, and you need to initialize the properties with a value.

	function Student(name, gender, age, grade, teacher)
	{
		this.name = name;
		this.gender = gender;
		this.age = age;
		this.grade = grade;
		this.teacher = teacher;
	}

	var bob = new Student("bob", "male", 15, 10, "Marlow");
	alert(bob.age); //Outputs 15

	var susan = new Student("susan", "female", 10, 5, "Gresham");
	alert(susan.gender); //Outputs 'female'

From this example we can see that instances of the class are initiated using the new operator. Properties and methods of the class are accessed using the . (dot) operator. So to get the property age of the instance of the Student class named bob, we simply use bob.age. Similarly, we created an instance of the Student class and assigned that to susan. To get the gender of susan, we simply use susan.gender. The code readability benefits from classes are enormous: You can reason that bob.age is the age of bob without having any programming experience.

However, the previous example contains two detrimental (but easily fixable) flaws.
1) The class properties can be accessed by any statement
2) The arguments must be passed in a certain order

Keeping property values private

Note that in the previous example, we were able to get the value of bob.age by simply calling bob.age. Additionally, we could set bob.age to any value we feel like anywhere in the program.

	var bob = new Student("bob", "male", 15, 10, "Marlow");
	alert(bob.age); //Outputs 15

	bob.age = 9;
	alert(bob.age); //Outputs 9;

Seems harmless, right? Well, consider this example.

	var bob = new Student("bob", "male", 15, 10, "Marlow");
	alert(bob.age); //Outputs 15

	bob.age = -50;
	alert(bob.age); //Outputs -50;

We have age as a negative number: A logical inconsistency. We can prevent issues like this and preserve the integrity of our data by utilizing the concept of private variables. A private variable is a variable that can only be accessed within the class itself. While once again JavaScript does not have a reserve word for making a variable private, JavaScript gives us the tools to create the same effect.

	function Student(name, gender, age, grade, teacher)
	{
		var studentName = name;
		var studentGender = gender;
		var studentGrade = grade;
		var studentTeacher = teacher;
		var studentAge = age;

		this.getAge = function()
		{
			return studentAge;
		};

		this.setAge = function(val)
		{
			studentAge = Math.abs(val); //Keep age positive using absolute value
		};
	}

	var bob = new Student("bob", "male", 15, 10, "Marlow");
	alert(bob.studentAge); //undefined, since age is privately protected in the class definition

	alert(bob.getAge()); //Outputs 15
	bob.setAge(-20);
	alert(bob.getAge()); //Outputs 20

By using variable declarations as opposed to attributing properties directly to the class, we have protected the integrity of our age data. Since JavaScript utilizes function scope, a variable declared within our class will not be made accessible outside of that class unless explicitly returned by a function within the class. The method this.getAge, which returns the student age to the calling environment, is known as an Accessor method. An Accessor method returns the value of a property so that the value can be used outside the class without affecting the value inside the class. Accessor methods are usually preceded with the word “get” by convention. The method this.setAge is known as a Mutation method. Its purpose is to alter the value of a property and preserve its integrity.

So we see the benefits of using Accessor and Mutation methods within a class to preserve the integrity of data. However, creating an Accessor method for each property creates extremely long-winded code.

	function Student(name, gender, age, grade, teacher)
	{
		var studentName = name;
		var studentGender = gender;
		var studentGrade = grade;
		var studentTeacher = teacher;
		var studentAge = age;

		this.getName = function()
		{
			return studentName;
		};

		this.getGender = function()
		{
			return studentGender;
		};

		this.getGrade = function()
		{
			return studentGrade;
		};

		this.getTeacher = function()
		{
			return studentTeacher;
		};

		this.getAge = function()
		{
			return studentAge;
		};

		this.setAge = function(val)
		{
			studentAge = Math.abs(val); //Keep age positive using absolute value
		};
	}

	var bob = new Student("bob", "male", 15, 10, "Marlow");
	alert(bob.studentGender); //undefined, since gender is privately protected in the class definition

	alert(bob.getGender()); //Outputs 'male'

My C++ Professor always said “If you find yourself typing the same code over and over, you’re doing it wrong.” Indeed there is a more efficient way to create Accessor methods for each property. Additionally, this mechanism also eliminates the need to call function arguments in a specific order.

Dynamically Generated Accessor methods

This demonstration is based off John Resig’s Pro JavaScript Techniques book (which I highly encourage you to read. The first 3 chapters alone are worth it).

	function Student( properties )
	{
		var $this = this;  //Store class scope into a variable named $this

		//Iterate through the properties of the object
		for ( var i in properties )
		{

			(function(i)
			{
				// Dynamically create an accessor method
				$this[ "get" + i ] = function()
				{
					return properties[i];
				};
			})(i);
		}
	}

	// Create a new user object instance and pass in an object of
	// properties to seed it with
	var student = new Student(
	{
		Name: "Bob",
		Age: 15,
		Gender: "male"
	});

	alert(student.name); //Undefined due to the property being private

	alert(student.getName()); //Outputs "Bob"
	alert(student.getAge()); //Outputs 15
	alert(student.getGender()); //Outputs "male"

By implementing this technique, not only do we keep our properties private, we avoid the need to specify our arguments in order. The following class instantiations are all equivalent

	var student = new Student(
	{
		Name: "Bob",
		Age: 15,
		Gender: "male"
	});

	var student = new Student(
	{
		Age: 15,
		Name: "Bob",
		Gender: "male"
	});

	var student = new Student(
	{
		Gender: "male",
		Age: 15,
		Name: "Bob"
	});

Inheritance

Recall that throughout this article I’ve used the term “class” extremely loosely. As stated before, JavaScript has no class entity, but the pattern of classes can still be followed. The main difference between JavaScript and other object oriented languages lies in their inheritance models. C++ and Java exhibit Class-based or “Classical” inheritance. JavaScript, on the other hand, exhibits Prototypal Inheritance. In other object oriented languages, class is an actual data type that represents the blueprint for creating objects. In JavaScript, although we can use Functions to simulate an object blueprint, they are just in fact objects themselves. These objects are then used as models (aka prototypes) for other objects.(See Article JavaScript Prototypal Inheritance).

Applying the concept of prototypal inheritance allows us to create “subclasses”, or objects that inherit the properties of another object. This becomes particularly useful when we want to use the methods of another object with some slight modifications.

Consider a class Employee. Let’s say we have two types of employees: wage-based and commission-based. These employee types will have many similar properties. For example, regardless of whether an employee receives income through commission or receives income through wages, an employee will have a name. However, the way the income for a commission-based employee and a wage-based employee is completely different. The following example captures this idea.

	function Worker()
	{
		this.getMethods = function(properties, scope)
		{
			var $this = scope;  //Store class scope into a variable named $this

			//Iterate through the properties of the object
			for ( var i in properties )
			{

				(function(i)
				{
					// Dynamically create an accessor method
					$this[ "get" + i ] = function()
					{
						return properties[i];
					};

				//Dynamically create a mutation method that parses for an integer and
				//Ensures it is positive.
				$this[ "set" + i ] = function(val)
				{
					if(isNaN(val))
					{
						properties[i] = val;
					}
					else
					{
						properties[i] = Math.abs(val);
					}
				};
				})(i);
			}
		};
	}

	//The CommissionWorker "subclass" and WageWorker "subclass"
	//inherit the properties and methods of Worker.
	CommissionWorker.prototype = new Worker();
	WageWorker.prototype = new Worker();

	function CommissionWorker(properties)
	{
		this.getMethods(properties, this);

		//Calculates income
		this.getIncome = function()
		{
			return properties.Sales * properties.Commission;
		}
	}

	//Expects the following properties: wage, hoursPerWeek, weeksPerYear
	function WageWorker(properties)
	{
		this.getMethods(properties, this);

		//Calculates income
		this.getIncome = function()
		{
			return properties.Wage * properties.HoursPerWeek * properties.WeeksPerYear;
		}
	}

	var worker = new WageWorker(
	{
		Name: "Bob",
		Wage: 10,
		HoursPerWeek: 40,
		WeeksPerYear: 48
	});

	alert(worker.wage); //Undefined. wage is a private property.

	worker.setWage(20);
	alert(worker.getName());   //Outputs "Bob"
	alert(worker.getIncome()); //Outputs 38,400 (20*40*48)

	var worker2 = new CommissionWorker(
	{
		Name: "Sue",
		Commission: .2,
		Sales: 40000
	});
	alert(worker2.getName());   //Outputs "Sue"
	alert(worker2.getIncome()); //Outputs 8000 (2% times 40,000)

The most important statements from the previous example are:

CommissionWorker.prototype = new Worker();
WageWorker.prototype = new Worker();

This states that for each instance of a new CommissionWorker or a new WageWorker object, the properties and methods of Worker will be passed down to those new objects. These methods and properties can be overwritten within the “subclass” definition if so desired.

Scope

JavaScript exhibits what is known as function scope. This means variables declared in a function are not initially accessible outside the function from which they originate. However, in blocks (such as coniditonal statements), variable declarations or alterations are made available to the calling environment.

	var car = "Toyota";

	if(car == "Toyota")
	{
		car = "Toyota - We never stop...and you won't either.";
	}

	alert(car); //Ouputs Toyota - We never stop...and you won't either.

	car = "Toyota"; //Reset car back to original value.

	function makeFord(car)
	{
		car = "Ford";
	}

	makeFord(car);
	alert(car); //Outputs "Toyota" because car was altered in the function scope.

However, if you want a function to alter the value, you can pass in an object as an argument and alter a property of the object.

	var car = new Object();
	car.brand = "Toyota"

	function makeFord(car)
	{
		car.brand = "Ford";
	}

	makeFord(car);

	alert(car.brand); //Outputs "Ford"

This is known as passing a value to a function “by reference”. I generally recommend passing by reference only if you are setting up methods within a class and you know what properties the object will contain.

You are now armed with the object oriented basics as applied to JavaScript. Use these principles to simplify your code for projects in the future.

July 22 2010

10:00

Learn the Basics: 25+ Sites And Resources To Learn Typography

Typography has been practiced and used in our daily life. Range from handwriting in a pocket notebook to the big advertising billboard. It’s sometimes typed using Times New Roman in 12 points for newspaper. Others use Edwardian in 26 points for their wedding invitations. When a designer decide to use the right font for the right job, the typography itself become an art.

Learning typography seems to be easy at a glance, in order to achieve a great impact from typography for graphic and web designs isn’t so easy. Many designers found it as a complicated design aspects to practice. Below are the 25+ sites and resources we have selected to help you understanding typography basics in print or web designs, choosing the right fonts for your project, and guide you to create a good typography which aesthetically pleasing.

1. Learning About Type

There are quite a few terms thrown around with regards to typography. Hopefully this article will help you understand more about the world of typography. If this is your first true introduction to typography you probably underestimate the effect it has on the world.

2. Five Simple Steps to Better Typography

This is a series articles, each part explains deep knowledge of typography and help you to understand it more. The kind of typography in these articles is not your typ ical “What font should I use” typography but rather your “knowing your hanging punctuation from your em-dash” typography.

3. Type Is Sexy

This is more like an online book, but presented in interactive way. You will find basic understanding of typography from this site, from Anatomy 101 to The Rules of Good Typography.

4. Know Your Type – Starting Points For Typographic Inspiration

Not every typeface is the right choice for every job, this articles will help and guide you to understand and picking the right choice for different type of job or concept theme.

5. The Type Studio / The Written Word

This page offers links to a number of articles on typography, including PDF versions of archived. These cover individual typography topics in detail, for both online and offline applications (including pull-quotes, visual alignment, bullets, and emphasis, among more than 30 others).

6. Typographic Marks Unknown

There are many typographic marks which are familiar to most, but understood by few. Most of these glyphs have interesting histories and evolutions as they survived the beatings given to them through rushed handwriting of scribes and misuses through history. They now mostly live on our keyboards and in our software, and a few are used often, so it seems only fitting to know where they come from and how to correctly use them.

7. Periodic Table Of Typefaces

A reference table for most popular typefaces and their classifications.

8. Typedia

Typedia is a resource to classify, categorize, and connect typefaces. It is a community website to classify typefaces and educate people about them, very much like a mix between IMDb and Wikipedia, but just for type. Anyone can join, add, and edit pages for typefaces or for the people behind the type.

9. Typographic Design Patterns and Best Practices

This article from Smashing Magazine gives you a broad knowledge of popular typefaces used in web design, also included with some case studies and inspirations.

10. The Right Font for the Job

In this article you will find four main ways fonts can differ, even if most of their letters look the same. Save, bookmark, or print this newsletter and ask yourself these questions the next time you’re choosing type.

11. How to Choose A Font

Have you ever had the problem of not knowing what typeface to use? Well of course you have, everyone has. This is a guide on how to choose a font.

12. 11 Essential Tips for Good Print Typography

You can’t just throw text on a page, it has to be laid out and organized in a clean way that adds to the information being presented. This article will give you  11 typography tips to help you convey information in print the right way.

13. A 20 Minute Intro to Typography Basics

This is an introduction for you who are still new in the design field. Its aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.

14. Fundamentals: Combining Type With Helvetica

In this article the Indra (the author) shares her favorite Helvetica companions with the following guidelines in mind: “Focusing on contrast makes combining fonts easier. Better not pair Helvetica (or other Neo-Grotesques) with another sans serif (like a Humanist Sans). Instead, choose a serif or a slab. Transitional and Modern (bracketed)serifs work quite well with Helvetica. So do most Garaldes like Garamond — it all depends on what kind of atmosphere you’re aiming for. Browse the list of ideas below, or look for faces with broad proportions, a large x-height, or similar characteristics, like an uppercase ‘R’ with a vertical tail.”

15. Four Techniques for Combining Fonts

This article gives you four tips for navigating the typographic ocean, all built around H&FJ’s Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.

16. How Do I Choose Paring Fonts?

This is an open typography forum regarding paring fonts. Get the suggestion or advice from the designers who have been professionally experienced in typography in this forum.

17. Beginners Guide to OpenTtype

OpenType (OT) is a cross-platform type format that includes expert layout features to pro­vide richer linguistic support and advanced typo graphic control. This beginners guide will help to illustrate some of the more common features found in OT fonts and when they should be used.

18. Making Geometric Type Work

For graphic designers beginning to experiment in type design, a geometric or modular typeface is a natural starting point. Illustrator and other programs offer a simple collection of elements such as circles, squares, and triangles which can be combined to create a passable alphabet. This is not an argument against all geometric or modular typefaces, but simply some guidance on how to make them more readable, work effectively and be visually consistent.

19. Font or Typeface?

An article which discusses both font and typeface because these terms evolved over a considerable period of time and saw several transitions in technology, they can sometimes be interpreted in varying ways. This resulted in a terminology that is often perceived as at best esoteric, at worst plain confusing.

20. On Web Typography

A List Apart gives you more knowledge for typography on websites, explore choosing and pairing fonts on the web, particularly in relation to the expanded options @font-face provides from this article.

21. Choosing Type Alignment For The Web

This is another article that will help you understand type alignment for the web. It explains each on Justified, Right-Aligned, and Left-Aligned and giving the reason of which is best to use on the web depends on your need.

22. Principles For Readable Web Typography

There are many factors that play into the readability of text. There are also a number of terms, all very important. This article explains a few of the more common Web typography terms and an explanation of how each term affects readability.

23. Setting Type on the Web to A Baseline Grid

And how about setting type to a baseline grid? Learn more and practice it after you read this article, it will guide you with the easy to follow examples and codes.

24. Clagnut’s Typography

Clagnut’s typography category archive is filled with great information on typography spanning the past eight years or so. Articles talking about theory, news, and technique are all included.

25. Type-Inspired Interfaces

Picking the right typeface gets you farther than you might think. Here are a few tips on taking cues from type to design interfaces and interface elements.

26. Inside The 3D Typography

This article will guide you to understand how to develop digital work in 3d typography, also included with 3D typography book and 3D typography inspirations.

27. Typography Books To Help You Learn Typography

The article gives you 15 typography books (with links to purchase) which are personally recommend by the writer to helped you learn, understand, appreciate and absolutely love typography and type layout.

28. Findings

Typography samples and inspiration.

Did you find that your favorite typography-related article is not on the list? Let us know in the comment section.

May 24 2010

07:00

Basic Web Page Background Techniques with CSS

The good old background property is one of the core elements we can play around with in our web designs. Here’s an overview of the four most common approaches to styling your web page body, from the basic solid colour through to large detailed background images. If you’re just starting out in web design, you’ll find some basic CSS techniques for you to put into practice into your future projects.

Single colour background

Example of a single colour background

body {
	background-color: #a1bad1;
}

You can’t get much simpler than a single colour background for your website. Browsers will default to white, but you can specify your own background colour for your page body.

Repeating background pattern

Exporting a background pattern

Example of a repeating background

body {
	background-color: #a1bad1;
	background-image: url(images/pattern.png);
}

Repeating patterns and textures come in all kinds of styles, from a simple and subtle noise texture, right through to complex and ornate patterns. By default a background image will repeat in both the X and Y directions, so there’s no need to tell it to in your CSS. Remember to make sure your background image is seamless, otherwise you’ll see ugly lines where the image repeats. Despite a repeating background image covering the whole web page, you should still set a background colour, just in case the user doesn’t have images enabled in their browser.

Horizontally repeating background

Exporting a background gradient

Example of a horizontally repeating background

body {
	background-color: #a1bad1;
	background-image: url(images/gradient.jpg);
	background-repeat: repeat-x;
}

Backgrounds in CSS can be repeated on just the X or Y axis. Using repeat-x is commonly used to add a gradient to web elements, especially on elements used as buttons. A thin clipping of a gradient image can be set as a background image of the body, which when repeated will spread across the whole page. By default the image will be positioned at the top of the page, but center or bottom could also be used. The background colour of the page should be set from the lowest most tone in the gradient to allow for a seamless transition from background image to CSS background-color.

Large background image

Exporting a background image

Example of a centrally positioned background image

body {
	background-color: #a1bad1;
	background-image: url(images/bg-image.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}

Backgrounds don’t have to be small image files that are set to repeat, you can also get away with some pretty large graphics. While the filesize of a large background image will be higher than a small repeating graphic, with careful image compression you can tweak it to something perfectly usable. It doesn’t matter how large your background is dimensions wise, as background images don’t inflict scrollbars, the larger the browser window the more the image the user will see. Large background images should still fade out to a solid colour, to allow that seamless transition. This example uses a large graphic that is positioned centrally at the top of the webpage.

May 10 2010

10:00

March 15 2010

19:31

Learn Photoshop: All of the Basics for Beginners

We frequently publish posts on this blog that feature  tutorials for learning how to do various things with Photoshop, but we have rarely focused on just the basics. This post is intended for designers or aspiring designers who either want to get started with Photoshop or have limited experience and are looking to improve.

While there are plenty of great learning resources available online, it’s often difficult for beginners to know where to get started because everything seems to be scattered. With this post you’ll find links to plenty of resources to teach you all the basics and fundamentals of Photoshop.

Most of the resources and tutorials listed in this post will focus on teaching one particular aspect of Photoshop, such as how to use a specific tool. Everything is broken down into sections so you can find exactly what you are looking for.

Intro to Photoshop’s Tools and UI:

The resources in this section will serve as an introduction for those who are new to Photoshop. They will help you to learn your way around the interface and with some of the basics of Photoshop.

Getting Started with Photoshop

Getting Started with Photoshop

Getting Started in Photoshop

Getting Started in Photoshop

Photoshop’s Toolbox

Photoshop's Toolbox

Using Palettes in Photoshop

Using Palettes in Photoshop

More resources for learning the tools and UI:

Layers, Layer Styles, Layer Masks and Adjustment Layers:

In order to be able to efficiently and effectively work with Photoshop you will need a solid understanding of layers. The resources in this section provide guides for working with layers in Photoshop, as well as layer styles, layer masks and adjustment layers.

Working with Layers in Photoshop

Working with Layers in Photoshop

Photoshop Layers Essential Power Shortcuts

Photoshop Layers Essential Power Shortcuts

Layer Styles in Photoshop

Layer Styles in Photoshop

Saving, Loading and Reusing Layer Styles in Photoshop

Saving, Loading and Reusing Layer Styles in Photoshop

Understanding Layer Masks in Photoshop

Understanding Layer Masks in Photoshop

Getting to Know Clipping Masks and Layer Masks in Photoshop

Getting to Know Clipping Masks and Layer Masks in Photoshop

A Basic Guide to Photoshop CS4 Adjustment Layers

A Basic Guide to Photoshop CS4 Adjustment Layers

Photoshop 101: Adjustment Layers

Photoshop 101: Adjustment Layers

More resources for working with layers:

The Pen Tool:

Photoshop’s pen tool can be used for impressive results, but it can be very difficult to use if you don’t understand how it works. The following resources will provide helpful guides to explain the pen tool and how you can use it in your own work.

Photoshop’s Pen Tool: The Comprehensive Guide

Photoshop's Pen Tool: The Comprehensive Guide

Photoshop Pen Tool Guide

Photoshop Pen Tool Guide

Making Selections with the Pen Tool

Making Selections with the Pen Tool

Become a Master of the Pen Tool in Under 30 Minutes

Become a Master of the Pen Tool in Under 30 Minutes

More resources for the pen tool:

Brushes and Other Presets:

Brushes, patterns, shapes, and the other presets are an essential part of Photoshop. Whether you are using the presets that come with the software, downloading those created by other designers, or creating your own, learning the potential of these presets and how to work with them should be a priority.

Beginner’s Guide to Photoshop Brushes

Pen Tool Cheatsheet

Photoshop’s Brush Tool – Basic Guide

Photoshop's Brush Tool - Basic Guide

Installing and Managing Brushes and Other Presets

Installing and Managing Brushes and Other Presets

How to Create Your Own Photoshop Brushes

How to Create Your Own Photoshop Brushes

Guide to Patterns in Photoshop

Guide to Patterns in Photoshop

More resources for brushes and presets:

Type Tool:

The type tool is a little more straightforward than some of the others for beginners, but it still helps to have a firm grasp of how the tool works and what you can do with text in Photoshop.

A Comprehensive Introduction to the Type Tool

A Comprehensive Introduction to the Type Tool

Tip: How to Change Text Orientation

Tip: How to Change Text Orientation

Photoshop 101: The Type Tool

Photoshop 101: The Type Tool

Transform:

With Photoshop’s transform capabilities you can edit and manipulate objects in a variety of different ways. The links provided below with get you started.

Using Transform in Photoshop

Using Transform in Photoshop

Photoshop 101: How to Use the Free Transform Tool

Photoshop 101: How to Use the Free Transform Tool

Photoshop Free Transform Tutorial

Photoshop Free Transform Tutorial

Selections:

The are several different ways to make selections in Photoshop, and each technique has certain situations where it works better than others. Here you’ll learn about the basic selection tools and when to use them.

The Selection Tools

The Selection Tools

A Comprehensive Introduction to Photoshop Selection Techniques

A Comprehensive Introduction to Photoshop Selection Techniques

Master Photoshop’s Selection Tools in Under 30 Minutes

Master Photoshop's Selection Tools in Under 30 Minutes

The Magnetic Lasso Tool

The Magnetic Lasso Tool

The Polygonal Lasso Tool

The Polygonal Lasso Tool

The Lasso Tool

The Lasso Tool

How to Cut an Object in Photoshop Using the Polygonal Lasso Tool

How to Cut an Object in Photoshop Using the Polygonal Lasso Tool

The Elliptical Marquee Tool

The Elliptical Marquee Tool

The Rectangular Marquee Tool

The Rectangular Marquee Tool

Five Secrets of the Marquee Tools in Photoshop

Five Secrets of the Marquee Tools in Photoshop

More resources for selections:

Clone Stamp Tool:

The clone stamp tool allows you to duplicate, or clone, an area. The resources below will explain how to tool works and how you can use it.

How to Manipulate Images with the Photoshop Clone Stamp Tool

How to Manipulate Images with the Photoshop Clone Stamp Tool

Useful Applications for the Clone Stamp Tool

Useful Applications for the Clone Stamp Tool

Blend Modes:

Photoshop’s various blend modes give users a lot of potential to create different results quickly and easily. The links in this section will explain how you can play with the blend modes of your layers and what types of changes it will have.

An Explanation of Photoshop Blend Modes

An Explanation of Photoshop Blend Modes

Photoshop’s Five Essential Blend Modes for Photo Editing

Photoshop's Five Essential Blend Modes for Photo Editing

More resources for blend modes:

Filters

Photoshop has a number of different filters that you can use, and each has its own purpose and use. These links will explain some of the different filters, how they work, and when you should use them.

Photoshop’s Filters

Photoshop's Filters

Getting to Grips with the Vanishing Point Filter

Getting to Grips with the Vanishing Point Filter

10 Photoshop Filters You Should Definitely Know

10 Photoshop Filters You Should Definitely Know

Channels:

Earlier we provided some links to tutorials on selection methods. Channels can also be used to select and extract, as well as to edit photos in other ways.

Digging into Channels as an Extraction Tool

Digging into Channels as an Extraction Tool

Photoshop 101: Working with Alpha Channels

Photoshop 101: Working with Alpha Channels

Smart Objects:

Photoshop smart objects can help you to save time on repetitive tasks, and these links will show you how to use them.

Genius Ways to Use Photoshop Smart Objects

Genius Ways to Use Photoshop Smart Objects

Photoshop Smart Objects, Smart but not Always that Smart

Photoshop Smart Objects, Smart but not Always that Smart

Actions:

Photoshop actions are a great way to automate certain processes and save time. You can create your own actions or use those created by others.

Lights! Camera! Photoshop Actions!

Lights! Camera! Photoshop Actions!

How to Use Adobe Photoshop Actions

How to Use Adobe Photoshop Actions

More resources for Photoshop actions:

Efficiency and Performance:

If you use Photoshop a lot you will want to make the most of your time with it. The resources here will help you to work smarter with as little wasted time as possible.

Professional Tips for Improving Photoshop’s Performance

Professional Tips for Improving Photoshop's Performance

20 Photoshop Tips for a Faster Workflow

20 Photoshop Tips for a Faster Workflow

Create Your Own Custom Photoshop Keyboard Shortcuts

Create Your Own Custom Photoshop Keyboard Shortcuts

Batch Editing and Automated Processing in Photoshop

Batch Editing and Automated Processing in Photoshop

More resources for efficiency and performance:

Saving Images:

These links will show you how you can save and optimize images that are going to be used on websites, for maximum performance.

Saving Images for the Web

Saving Images for the Web

Save for Web, Simply

Save for Web, Simply

Optimizing Images for the Web with Photoshop

Optimizing Images for the Web with Photoshop

Working with Colors in Photoshop:

Colors are, of course, an essential part of any design. These resources will explain the basics of working with color in Photoshop.

Photoshop Color: Custom Photoshop Color Swatches and Sets

Photoshop Color: Custom Photoshop Color Swatches and Sets

Photoshop Color Replacement Tool

Photoshop Color Replacement Tool

More resources for working with color:

Design for Print:

Designing for print is different than designing for the web. These links will explain some of the intricacies of designing for print and how it should be handled.

Spot UVs, Proofs, Roll Folds and Other Printing Terminology Explained

Spot UVs, Proofs, Roll Folds and Other Printing Terminology Explained

Designing for Print – Setting Up Crops and Bleeds

Designing for Print - Setting Up Crops and Bleeds

More resources for designing for print:

Working with Graphics Tablets:

Although it is not necessary, you may choose to work with a graphics tablet. These links will explain how to do so and how to decide on the tablet that is right for you.

Using Pen Tablets in Photoshop

Using Pen Tablets in Photoshop

How to Choose a Graphics Tablet that Fits Your Needs

How to Choose a Graphics Tablet that Fits Your Needs

Now that you’ve learned the basics of Photoshop, here are some tutorial collections that you may want to check out:

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...