Malacandra.me

Latest Posts

Graphic Design Basics Part 1: Elements

Graphic design is a very wide domain and getting a job as a graphic designer is not an easy task. Besides the many skills you will have to learn, getting a job on the web also requires personal attributes such as resistance to stress, creativity and self-motivation. But before your personal skills will be evaluated, the practical ones are the first to be looked at; and the most important, obviously. Therefore today we start a short series of articles in which I will talk about the basics of graphic design. Today we review the most popular elements of the industry.

The main job of a graphic designer is to design visual elements for the web and print, such as layouts for websites (which are most of the time “translated” into real websites by the web designers), posters, brochures, flyers or advertising campaigns (both in web and offline).

There are in total six elements of a design which you need to be aware of: the line, the shape, the color, the texture, the value and the space.

1. The line

The line is usually present in every design, even if it is a solid border of 1px or a dotted one of 5px. Every website has lines, but the minimalistic style which became more popular in the past couple of years tries to erase the lines from the layouts, or at least to decrease the use of them.

The lines can be long, red, straight, thin, blue, dashed, short, black or curved, they are all into the same category. They are most of the time used for delimitation between different sections of a design, or are used to direct a viewer’s vision in a specific direction.

The lines can create different effects and visual impact. While a thick, bold line draws attention because of its visual power, the thin lines tend to go the other way. The color has an impact too, dark colors are easier to see and draw more attention than light or pale colors.

And this is not all. The style of a line can also influence the way the user sees it. This style can easily be defined through CSS and can be solid, dotted and dashed among others. The solid lines have a different impact than the dotted ones, because they are more imposing.

The minimalistic style which I’ve talked about earlier uses either less solid lines or more curved lines, because they give a dynamic and fluid look to a design, which is also the purpose of the style. They indicate energy, keep the user interested and, if combined with illustration, are very powerful to the human eye.

Many years ago solid lines were very popular because they determined the style of the design: rigid, solid and organized. The web changed in the past years and this style is not very popular anymore, especially for designers’ portfolios and other pages with a strong need of a personal touch.

The lines separate the two columns and are not very bold.

The solid lines are used to separate different parts of the website.

2. The shape

The shape, or the form, is the second most used element of a web design. They are actually lines combined in different shapes. The forms are still popular and this is because if there is something that needs to stand out, forms are one of the ways to do it. There can be circles, squares, rectangles, triangles or any other abstract shape; most of the designs include at least one of these. Minimalistic designs use it a lot, because they are often based on illustrations and drawings. The old style of designing websites included shapes too, so they remained popular throughout the time and will probably continue being like that.

Like lines, shapes are also associated by the human mind with different movements. For example, circles are associated with movement and nature, while squares are often seen as structured, basic designs. Just like with the lines, the color, style, background or texture of a shape can totally change the viewer’s perception.

Fred Maya's portfolio uses shapes to emphasize the logo and the previous work.

3. Textures

The textures were not very popular a couple of years ago, but they tend to become more and more used. They replaced (or compete with, if we can call it a competition) the single-colored backgrounds. Textures can look similar to solid background colors, but if they are analyzed closer, small but effective differences can be noticed.

Texture styles include paper, stone, concrete, brick, fabric and natural elements, among flat or smooth colors. Textures can also be subtle or pronounced and can be used sparingly or liberally. They work with pretty much everything. Even if they do not seem important, the textures can totally change a website and offer a totally different visual impact.

Jason Julien's portfolio uses a grunge texture.

This webpage uses a different texture than the first example, looking like a math notebook.

4. Color

The color may even be the most important element of a design, because it offers the most powerful visual impact at a single glance. Color is obvious and does not need basic graphic skills to be noticed. While lines and shapes mean the same thing as in the reality, only at a little more profound level, the color means exactly the same thing as in the nature. Color creates emotions – red is passionate, blue is calm, green is natural. Even if you don’t realize this, colors have a clear effect on your mind.

Studies have been done and a person who lives in a red environment has a higher heartbeat and pulse than a person living in a blue environment. The human brain sees this and influences the rest of the body.

Therefore color theory is very important to know, because not many designers can call themselves experts in this field. Being a master of colors might make the difference between a good design and a stunning one.

I am not saying you have to know all of them, but knowing how hue, saturation, shade, tint, tone or chroma work together is crucial for a graphic designer.

Feed Fever uses different colors for text, trying to emphasize the importance of each line with a different nuance.

5. Value

I did not specify value above, even if it is closely related to color, because value is more general and represents how dark or light a design is. Value has a lot to do with mood too, only at a more profound level. Understanding colors will take you close to perfection, but knowing how value works will take you beyond this. Lighter designs offer a different impact and feeling than the dark ones and you need an expert eye to notice differences and decide which one is the best.

6. Space

The space and how it is used is crucially important in design. Lately the “white space” (also called negative space) became used widely because it allows the human eye to read easier. For whoever is not familiar with the term “white space”, it does not mean precisely space filled with white, but every area of the design which is only filled with the background color. You can see several examples below to better understand the concept.

If there is a lot of negative space in your web design, it offers light and an open feeling. The lack of white space will turn your design into an old-fashioned, cluttered one. The space has also a lot to do with how the design is perceived by the human eye.

Even if I said the color is maybe the most important element of a design, the space is definitely present in the top, because it is also very easy to notice by the untrained eye. It can turn a design to your advantage and get the best out of your layout.

Google is the best example on how the negative space can be maximized.

Site Inspire also uses the negative space on the sides and combines it with a well-suited typography.

Conclusion

These are the basic elements a beginner graphic designer should know about. Having this knowledge will allow you to think more user-focused and design with a better style. However, this is not everything. A couple of more articles will complete this series and the following one, due to come very soon, will talk about the principles of design.

Further reading

This article was just a list of the basic elements of a graphic designer. If you wish to learn more about them, I’ve gathered the following sources for you from the internet. Reading them entirely (and maybe more times) will give you a better understanding of the basic design process.

How to Actually Use Negative Space as a Design Element on 1stwebdesigner.com

The Meaning of Lines on Van SEO Design

The Meaning of Shapes on Van SEO Design

Shape – Basic Element of a Design on About.com

Basic Color Theory on Color Matters

Color Theory on Wikipedia

A Guide to CSS Colors in Web Design on Six Revisions

comments

Stay Organized and Stay Ahead of Your Competition

The web is a super highway of information! With the phenomenal growth of the network, and the advancement of technologies, the growing number of netizens are left with a bombardment of choices online, be it spending time on their favorite social networking site, browsing through the ocean of links, or be it just idling around, between tweets born every milliseconds.

As design professionals, the most vital resource that we all have to manage well is just one single thing – TIME! Yes, time forms the basic unit of all our efforts and the productivity and the efficiency of a design professional is directly proportional to the time he spends on useful and productive things. Nowadays, with plenty of distractions available online, it has become really hard to get some quality time to be productive. With your FB page and a Twitter client opened in a browser tab, and mail coming every now and then to your inbox, it’s a challenge to get work done. Now is the time to keep all those distractions at bay and find out what part of the day you’re the most productive and capitalize on those times to get work done.

The best and successful are the ones who have learned the skill of mastering their available time and managing it to bring out some ultra productive hours at the end of the day, everyday. Here are some tips and ideas to keep those precious hours from being wasted.

  1. Keep a tab on Social networking (procrastination)
  2. Acquiring knowledge is good – but there is a limit
  3. Own an awesomely organized bookmark list
  4. Reuse / Build your repository
  5. Be a tech-savvy designer
  6. Organize your mailbox and folder structure
  7. Start Whiteboarding
  8. Start using Dropbox
  9. Don’t run out of inspiration

Keep a tab on Social networking (procrastination)

We are in the age of Facebook and Twitter, and we have just witnessed a Hollywood movie being built around the concept of social networking. With this tumor like growth that keeps on consuming our precious and leisure time alike, it is now time to give serious thought on keeping a tab on the quality time spent poking friends or re-tweeting those contest tweets to your friends.

Here are some tools, which can help you to keep tab on your social networking procrastination and worries:

  1. Writemonkey
  2. Writeroom (for Mac lovers)
  3. Dark room
  4. Think (for mac lovers)
  5. Rescue Time
  6. Freedom ( for Mac lovers)
  7. Focus Booster
  8. Isolater

Acquiring knowledge is good – but there is a limit

Reading and being updated about new trends and topics are vital for a designer’s survival. But with hundreds of articles born every minute, and plagiarism being wide-spread, it’s not a good idea to spend too much time reading articles, especially when you are on the lookout for something that is really vital to complete your latest project. A good title can suck us into an article and we may lose focus and get immersed into it at a time when you wanted to give your 100% into some other important work.

This has been worrying me for sometime, and I have found some solutions for this.

Use Feed readers: Organize the best blogs / sites that you think generate the best content consistently, into a feed reader, and organize them into logically sensible sections (I organize feeds under the captions: Usability, Front-end engineering, Visual design, Trends and News, Wireframing and UX, Personal, Official etc…). Here are some feed readers I feel would be useful and handy. If you are using a mobile device and are constantly on the move, look for readers which can sync the web-based bookmarks to their mobile app list.

  1. Netvibes
  2. Feedly
  3. Google Reader
  4. Bloglines
  5. Newsgator
  6. RSSOwl

Also make sure you organize the feeds well, or else it will be pain to dig out those latest posts which you wanted to read yesterday, but didn’t get time to

Schedule time reserved for reading: Often in your ultra busy days, you may miss out on the latest news and trends, with no time to spend on reading and updating yourself. Or, you may end up losing your focus digging deep into links on an article and feel like you are heading nowhere. Scheduling a reserved time for reading and updating is a probable solution for this problem. Stick to the time and make sure you don’t diverge to those articles amidst work, unless it’s really necessary.

Schedule for later reading: Often you may stumble upon interesting links and articles, and may feel bad for not being able to read it due to a time crunch, or out of the fear that you may be diverting from the current activity. Such scenarios should be tackled by scheduling those items for later reading. One technique I use, is to bookmark those links in my delicious account under a tag “toread”, and later on when I get time, I can easily retrieve them and delete the tag upon completion smile. Apart from that, there are some reminder services, that send you emails reminding you about those ‘unread’ articles, at intervals you determine. Tookmark.com, is one such service.

Own an awesomely organized bookmark list

With the burgeoning rate in which new pieces of information are made available to the netizens, it’s literally impossible to retrieve the best match for the information that you are searching for, without a bookmarking service. And even more, it’ll be far more complex to dig up that link you bookmarked months ago, if you are not organizing those bookmarks well! Organizing a bookmark is as equally important as maintaining a bookmark list.

Following are some leading bookmark services

  1. Delicious
  2. Yahoo Bookmarks
  3. Inslices
  4. Stumbleupon
  5. Digg
  6. Reddit
  7. Faves

Alltop.com is a service which has some predefined set of lists for various topics. You may try it too, as a comprehensive resource.

Tips to organize your bookmarks I am a fan of delicious and have a pretty well-organized repository of links, and have been using this awesome service for more than 5 years (delicious.com/mysticpixels). Over the years, my tags and bundles have undergone numerous rounds of organizing exercises, and my strategy of organizing the bookmarks are taking a complete shape with time. Here are some tips I would like to share, to help you organize your bookmarks, based on my delicious experience.

  1. Create high-level meaningful tags to differentiate the sections in a very high level. E.g. front end engineering, visual design, usability
  2. Always make your tags short and sweet. E.g. best, jQuery, js, inspiration. Short tags help us to retrieve a link faster by searching for the combination of tags its being tagged with
  3. Follow a consistent pattern in character casing. I.e., stick to all lowercase, or else uppercase, not a combination of both
  4. Remember to give a meaningful note to a link, while bookmarking. A good note will help you to easily recall the importance of the link in the future
  5. Install add-ons (for delicious, install Firefox add-ons), for faster access, and retrieval
  6. Finally, watch the experts in the fields! Watch those exceptionally cool designers in delicious and add them to your network, and try to learn from the way they organize their links, as tags are the most important attribute of a bookmark, which decides the easiness of its retrieval.

Reuse / Build your repository

The productivity of a designer depends on how fast he can get a grip on all the basic elements needed to kick-start the new project.

Over time, you would have come across some common elements / resources that you use every time in the beginning of a new project. E.g. CSS reset, Markup for a carousel, CSS code for a sliding door button, your favorite Photoshop brushes to create that trademark effect of yours, and much more. It’ll be an invaluable asset, if you can start building on those reusable snippets of code / resources that help you to give that nitro booster, to cruise through a new design project.

Some practical examples are:

  1. Creating a HTML/CSS snippet repository in your favorite IDE for those UI components like carousel, accordion, list of items, multi column layouts, sliding door buttons, clearfix, CSS reset
  2. A repository of elements that you may have created over time, in Photoshop, like buttons, styles, gradients, patterns etc
  3. Refer to some pattern collection sites, to keep in touch with the latest UI pattern trends and applications. Some sites that host a formidable collection of UI patterns are

Be a tech-savvy designer

Be a tech savvy designer! With the marathon list of add-ons and tools available, saving our precious time is just a right decision away. Decide on the best tool available, by understanding your limitation, and try to capitalize on the area where you need to save more time on.

  1. Start using an email client like Sparrow (for Mac), and save yourself the time taken in opening up the web interface of your email service provider
  2. Use some task management tools like Wunderlist (for Mac), Things (for Mac), Google Calendar, Remember the milk, etc for effectively track and take tasks to completion
  3. You may be weak in choosing the perfect color palette for the VD of the new layout that you are designing, but an expert in creating awesome illustrations – go for a color theme generator, get some cool color palettes in no time, from adobe’s ‘Kuler’.
  4. You may be a smart JS coder, but may take your time in cleaning up the CSS code in terms of formatting – use styleneat.com for organizing your CSS code.
  5. Save your time in coding those lengthy HTML markups by adopting the state of the art coding techniques like ‘zen coding’.
  6. Check the contrast of the latest design done by you using ‘color contrast analyzer’.
  7. Use various UX tools and extensions to add to the quality of your latest work.
  8. Use Firefox extensions to supercharge Firebug.
  9. Convert the pixel font sizes to em sizes (http://pxtoem.com/).
  10. Check broken links in your newly coded website.
  11. Check out the various browser testing tools for a flawlessly rendering interface in all browsers.
  12. Use some efficient tools to Monitor your website.

And much more from my delicious account under the tag – “tools”. Isn’t it a short and sweet tag?

Organize your mailbox and folder structure

Every work day, for most of us, starts with checking new emails. It’s very important to have control over your inbox, as having too many unread mails and a disorganized inbox can take too much of your time when you are in much need of digging out some mails.

Here are some tips to make your mailbox clean and organized

  1. Label important mails efficiently
  2. Maintain multiple accounts, for family, for clients and for other promotional stuff, and make it easier to track emails later
  3. Use an email client like Sparrow (for mac) for better organization and access
  4. Maintain an effective list of ‘Labels’ (‘Folders’ in case of Yahoo! Mail)

The same is the case with the folder structure too. Maintaining a highly organized folder structure and file naming convention can help you in the long run. Especially for designers who often work with a huge number of files, from clients, download, reference, and outputs, it is really important to organize them under logical folder structure, which makes things easier for retrieval.

I differentiate all the files at a very high-level first by putting them in to separate folders (e.g. Projects, Private, Resources, Others, Workplace etc). The ‘projects’ folder is the most important for me with all the work related files in it. So I spent some extra time in organizing it better. I generally have the following folders within each project folders

  • Client input (all the inputs from the client)
  • Src (all source files)
  • Inspiration (all reference materials and inspirational links)
  • HTML (in case of a web development project)

Folder naming is another challenge to overcome. Sticking to one consistent naming style is very important in organizing your files. It makes it possible to guess the path of a file, and doesn’t require you to spend too much of time in digging out something that you worked years before!

Start Whiteboarding

A whiteboard can be a close ally of a designer. It gives you a broader canvas to experiment on, and you get a sense of freedom to express your ideas. I rely on white boarding for brainstorming and the initial wireframing process. The fact that it’s erasable gives our mind the liberty to express raw ideas. Believe me, it can bring out some really crazy improvement in your design process.

So start using one now!

Start using Dropbox

Working with a team means multiple versions of artifacts and collaboration. This makes it really important to have a central repository, where team members can access and update instances of artifacts into. Dropbox is the latest and best to date collaborative and file sharing tool. The way it works makes it the most used tool available for file sharing, and the highlight is its ability to sync between multiple devices, be in your Mac or your iPhone or any other mobile device like an iPad.

Dont run out of Inspiration

As designers, this is the first and foremost thing that keeps us ticking. Never run out of it! Getting inspired doesn’t really mean keeping glued to those CSS galleries and designs. Inspiration is a far wider topic and in fact, it comes from a wide variety of things than CSS galleries.

  • Nature – the first and foremost powerhouse of unlimited inspiration
  • Conversation – it’s mind-blowing to know how ideas are generated from conversations no matter how short they are
  • Music – Listen to some music, which takes you to another world of inspiration. Visualizing something while listening to music can turn out to be a really rewarding and fulfilling experience!
  • Flora and Fauna – The amazing variety and richness, each life form brings, is unbelievable. Spend some time admiring and watching them in their natural habitat. U will feel revived and fresh for more

There are loads of other things too that you need to take care of, in order to be organized and ultra-productive. Lets have a healthy discussion going on and explore the options available.

comments

A New and Growing Freelance Industry: Wedding Videographer

You may have had an experience with videography or two, albeit non-professionally. Maybe you have a friend or relative who asked you to shoot their wedding. You did well, and now more friends are asking you to shoot theirs as well. You find that there’s actually a big market for you in the industry. In the photography industry where it’s already full of competition, going into the new and growing freelance wedding videography industry might be a good idea.

Yes, venturing into wedding videography is a smart choice for enterprising creative people. But there are several things you need to research before you put a price for your services. You need to invest in a lot of time for research, preparation and experience. Obviously, you need a few things to get you started.

 

The Right Equipment

There’s both good news and bad news already for those who want to enter the field of wedding videography. Good news is, video equipment is now very affordable and accessible to everyone. It’s easier to get into the industry than it was five or ten years ago. Bad news is, technology advances so fast that your video equipment can become obsolete fast. Thus, nowadays you will need more research to know which video equipment to invest in.

First off, you have to decide whether you want your videos to be cinematic or documentary with the final output. The cinematic look means you shoot it in widescreen, 16:9 ratio, rich colors, dramatic effects, steady, professional shots. Documentary wedding videos, on the other hand, offers a grittier, more amateur-ish effect, but doesn’t require all the expensive and bulky equipment you need to shoot cinematic wedding videos.

Nowadays, you no longer need the bulky HD professional camera equipment to produce high quality wedding videos. Here is the list of the equipment you’ll need to start videography:

1. Digital SLR Camera with Video Capabilities

Most videographers, film makers and even movie studios now employ SLR cameras with video capabilities to record footage. The best option is the Canon 5D Mark II.

You need at least two or three cameras in order to capture all the important video footage during the wedding. Of course, this does not mean that it is impossible to make a wedding video with one camera only. But this means you will only have limited footage to work with. For example, during the dress up of the bride and groom, you cannot shoot the dress up of the bride without compromising the opportunity to shoot of the groom because these events often take place simultaneously.

2. Appropriate Lens

Of course you need the appropriate lens to be able to capture all the right shots. You will need the following:

First, macro lens to capture close up shots of important wedding objects and symbols like the wedding rings, shoes, bouquet, just to name a few. Secondly, you need a wide angle lens to shoot wide shots like the reception venue, the cathedral, etc. Thirdly, you need mid-range lens to shoot the whole event. Make sure the lens can handle well with low light or indoor situations.

Stated above are the main purposes for these lens. As much as possible, do not use wide angle lens to shoot mid-range shots, or macro lens to shoot wide shots, and so on. However, among the best lens for videographers is the Canon 24-105 mm f/4. It can serve both wide, telephoto and mid-range purposes. You can shoot a wide scene as an establishing shot, and also zoom in to the bride and groom to capture the moment. The lens performs well in daylight situations, but also does pretty good in low light and nighttime situations with its wide aperture of 4.

3. Equipment for Stability

Of course you need equipment to deliver steady and professional-looking videos. With this you need a monopod and tripod to support the camera while video recording.

Other equipment you will need is the Glidecam. Monopods and tripods are great for steady shots, but you need the Glidecam to deliver a smooth and steady performance for moving shots, such as back and forth, side to side, or up and down.

4. Audio Equipment

Have a microphone and audio recorder to get the necessary audio for your wedding video. Of course, it is possible to make a wedding video without a mic and audio recorder– by simply overlapping the whole video with background music. The end result, however, is more of a music video than convey a story on what happened on the wedding day. Remember that the vows, candid comments, priest’s sermons or the best man’s toast add spice and interest to the viewers.

5. Lighting

During nighttime situations, it helps to have decent lighting equipment. Be sure to know what equipment to use though, as there are pros and cons when you use lighting for the occasion. Obviously having lighting provides a brighter and clearer shot, but may also blacken out the background. Another is that it can cause eye discomfort to guests and can heat up the room. Shooting without lighting can be beautiful, as it provides more candid and deliver a more natural ambiance. Just make sure to bring lighting when needed, but more often than not it’s better to rely on whatever lighting is provided at the event.

The Right Footage 

 

Image by Bridal Cookie

Be sure to be able to record the most important scenes or events of the wedding. Here is your checklist to make sure you have recorded all the right footage:

  • Bride, bridesmaids, groom, groomsmen dress up
  • Establishing shot of the church and the reception venue
  • Entourage arriving and the bride’s entrance
  • The whole ceremony, plus reaction shots of the family and guests
  • Vows and most importantly, ‘the kiss’
  • Leaving the church
  • Arriving at the reception
  • First dance, Dad’s dance with bride
  • Throwing of the cake, best man’s toast, cutting of the cake
  • Giveaways, decor, cake, etc.
  • Guests saying their wishes and goodbyes

Master Different Types of Shots

Know the different kinds of camera shots.

Fast Editing to Meet Demanding Deadlines

In most cases you need to produce a short video of the events that happened on that day to show at the reception. This means you only have, more or less, five to six hours to edit everything. You have to think fast and edit on the spot. Thus, you will need a fast computer, preferably a laptop so that you can take it with you anywhere. The preferred choice of most photographers and videographers is the Macbook Pro, because its features are accessible for editing. The Mac OSX is also said to be more stable than its Windows counterpart.

There are several editing programs you can use to edit your footage, but the most popular for professionals are: Adobe Premiere Pro, Sony Vegas and Final Cut for Mac.

 

Image by DV Info

Inspiration

Finally, every wedding videographer needs to find inspiration. Look for inspiring, creative and one-of-a-kind wedding videos found online. You do not want to give the same video outputs and ideas all the time–a wedding videographer needs to play it up a bit. Play with the scenes, and the concept to make the video more fun and meaningful. Showing your wide range of portfolio shows that you are a multi-faceted and creative videographer.

Here are a few great wedding videos as inspiration:

Not exactly a wedding video, but this is a prenup video, or a ‘Save the Date’ video. Creative scenes, unique concept and racy subject, the video caused quite a stir in the Philippines when it first came out.


comments

Convert 1st Ideas from PSD to HTML [Very Detailed]

In this article you will learn how to convert 1st Ideas: Stylish Design Agency Website from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout using CSS styles, some CSS3 styles and JavaScript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

Here’s what we’ll be creating (Click on image to view a full working demo).

You can also download this tutorial’s source files here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this landing page you probably noticed that Michael mentioned that he didn’t use the 960 grid system for guidelines, so I will be not be using the 960 grid system in converting this layout to show you how you can create layouts without using frameworks.

You will also need a code editor; you can use a plain text editor such as Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know, not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 4, Chrome 8, IE8 and IE9.

Step 2 – Getting Your Files Ready

The first thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file and any other JavaScript files. The HTML file goes in the root directory.

Now if you aren’t using a framework to create your layout, you’ll need to use a CSS Reset. We use CSS Reset to avoid browser inconsistencies, or in other words to start fresh. In CSS Reset you simply set the styles of all elements to a baseline value and we avoid all browser’s defaults. You can find many CSS Reset codes on the web here’s the one I use.

Now, you need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory, you need also to create a new file called reset.css in /styles/ directory and paste the CSS Reset code inside it.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you’ll find the images I created.

Step 3 – Simple Starter Layout

We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

  1. The layout has a background image that repeats horizontally and another background image on top of it which represents the lines and it is aligned to the left.
  2. The layout has a 960px fixed width aligned to center horizontally.
  3. The layout has a header section that contains the logo, social icons, sign up and login buttons, the main menu and the search text box.
  4. The layout has two sliders one displaying services and we’ll call it featured slider, the other has the latest portfolio items and we’ll call it portfolio slider.
  5. The content section contains about, blog updates, testimonials and services.
  6. Finally, the layout has a footer section with links, logo, social icons and copyright text.

Now, based on these notes we create the following HTML layout.

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <span class="hiddenSpellError" pre="">1stIdeas</span>: Stylish Design Agency Website
    css" href="styles/reset.css" rel="stylesheet" media="all" />
    css" href="styles/tutorial.css" rel="stylesheet" media="all" />
</head>
<body>
    <div class="container header">
        header content goes here.
    </div>
    <div id="featured_slider" class="container featured_slider">
        featured slider content goes here.
    </div>
    <div class="container portfolio">
        portfolio slider content goes here.
    </div>
    <div class="container content">
        main content goes here.
    </div>
    <div class="footer">
        <div class="container">
            footer content goes here.
        </div>
    </div>
</body>
</html>

Here I’ve linked the style files in the header of the HTML file. I’ve also created five divisions inside body, each with either a class container or contains a division with this class which allows us to style this section with the layout’s fixed width and alignment. Each division has a unique class name to allow custom styling of each section. Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
    color: #fff;
    font-size: 13px;
    font-family: Arial;
    background: #2c3e4c url(../images/bg.jpg) repeat-x top;
}

    body:before {
        content: "";
        display: block;
        width: 485px;
        height: 697px;
        position: absolute;
        z-index: -2;
        top: 10px;
        left: 0px;
        background: url(../images/bg_effect.png) top left;
    }

a, a:link, a:active, a:focus {
    outline: 0 none;
    color: #fceba3;
}

a:hover {
    background: #fceba3;
    color: #1c2730;
    text-decoration: none;
}

p {
    font-family: Myriad Pro;
    font-size: 13px;
    padding: 0;
    margin: 0;
}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both}.clearfix{zoom:1}

.container {
    width: 960px;
    margin: 0 auto;
}

.container.header {
    height: 190px;
}

.container.featured_slider {
    position: relative;
}

.container.portfolio {
    height: 255px;
    width: 963px;
    overflow: hidden;
    position: relative;
    background: url(../images/portfolio_slider_bg.png) no-repeat bottom center;
    margin-top: 40px;
}

.container.content {
    margin-top: 36px;
    background: url(../images/content_light.png) no-repeat;
    background-position: 473px -20px;
    overflow: hidden;
}

.footer {
    width: 100%;
    height: 300px;
    background: #151d23;
    overflow: hidden;
    margin: 50px 0 0 0;
    padding: 35px 0 0 0;
    font-family: Tahoma;
    font-size: 12px;
    line-height: 18px;
    border-top: 3px solid #0e1418;
    -moz-box-shadow: inset -1px 0px 0px #2c3339;
    -webkit-box-shadow: inset -1px 0px 0px #2c3339;
    box-shadow: inset 0px 1px 0px #2c3339;
}

In the CSS code above I styled the body element with white text color, a fixed font size and font weight, a background color and image that repeats horizontally. You’ll notice that there’s a style “body:before” this CSS selector is used to allow us to add content before any element, so we set content to nothing, display to block, a fixed width and height that matches the dimensions of the lines background image, set position to absolute so we can set where this will be displayed relative to browser’s edges, set z-index to -2 to make this display under any other content, then I set it 10px from the top, 0px from the left and finally set the background image with no-repeat.

Now, we set the style for the links and paragraphs to match what we have in the layout. There’s also a style added called “.clear” and “.clearfix” and we use these two classes to clear any floated elements. Now we style the container class with 960px fixed width and margin to “0 auto” to align it to center horizontally. The header class is styled with a custom height. The featured slider class is styled with relative position which will allow absolute positioning of elements inside it to its edges. The portfolio class is styled with fixed height and width, overflow is set to hidden, position to relative, a background image with no-repeat and a fixed top margin. The content class is styled with a fixed top margin, a background image with no-repeat which will be representing the light behind the blog updates section and overflow to hidden.

Finally, we style the footer class with 100% width to take all the browsers width area, a fixed height, a background color, overflow is set to hidden, zero margins except from top, zero padding except from top, font set to Tahoma, a fixed font size and line height, a top solid border of 3px and an inset box shadow which is a CSS3 feature and it will represent the footer inner glow. The result should be the same as the image below.

Step 4 – Adding Content to Header

Now we need to add the logo, social icons, sign up and login buttons, menu items and search text box. Here’s the HTML for the header section.

<div class="container header">
    <h1><a title="1stIdeas" href="#">1stIdeas</a>
    <div>
        <ul class="social_icons">
            <li class="facebook"><a href="#" title="Facebook">Facebook</a></li>
            <li class="twitter"><a href="#" title="Twitter">Twitter</a></li>
            <li class="rss"><a href="#" title="RSS Feed">RSS Feed</a></li>
        <!--<span class="hiddenSpellError" pre=""-->ul>
        <ul class="header_links">
            <li><a href="#" title="Sign Up Today" class="selected">Sign Up Today</a></li>
            <li><a href="#" title="Client Login">Client Login</a></li>
        <!--<span class="hiddenSpellError" pre=""-->ul>
    </div>
    <div class="main_menu">
        <ul>
            <li><a href="#" title="Home" class="selected">Home</a></li>
            <li><a href="#" title="Services">Services</a></li>
            <li><a href="#" title="About Us">About Us</a></li>
            <li><a href="#" title="Blog">Blog</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
        </ul>
        <div class="search">
            <input type="text" value="Search for something" />
        </div>
    </div>
    <div class="slider_shadow"></div>
</div>

I’ve added an <h1> with a link inside it to represent the logo. I also added three main divisions: one for the social icons and sign up and login buttons, one for the main menu and search text box and a third one to hold the featured slider background shadow image. Now lets add the CSS for the header content.

.container.header {
    height: 190px;
}

    .header .slider_shadow {
        position: absolute;
        margin: 0 auto;
        margin-left: -20px;
        width: 1000px;
        height: 410px;
        background: url(../images/slider_shadow.png) bottom center;
        top: 100px;
        z-index: -1;
    }

    .header h1 {
        float: left;
        margin: 40px 0 0 0;
    }

        .header h1 a {
            display: block;
            width: 164px;
            height: 68px;
            background: url(../images/header_images.png) no-repeat;
            background-position: 0 0;
            text-indent: -10000px;
            overflow: hidden;
        }

    .header div {
        float: right;
        width: 260px;
        margin: 36px 20px 0 0;
    }

    ul.social_icons {
        margin: 0 0 0 0;
        float: right;
        clear: both;
    }

        ul.social_icons li {
            list-style: none;
            display: block;
            float: left;
            text-indent: -10000px;
            margin: 0 0 0 5px;
            background: url(../images/header_images.png) no-repeat;
        }

            ul.social_icons li a {
                display: block;
                width: 32px;
                height: 32px;
                background: transparent;
            }

            ul.social_icons li.facebook {
                background-position: -166px 0;
            }

            ul.social_icons li.twitter {
                background-position: -204px 0;
            }

            ul.social_icons li.rss {
                background-position: -240px 0;
            }

    .header ul.header_links {
        margin: 36px 0 0 0;
        float: right;
    }

        .header ul.header_links li {
            list-style: none;
            display: block;
            float: left;
            margin: 0 0 0 5px;
            font-family: Segoe UI;
            font-size: 12px;
            line-height: 33px;
            text-align: center;
            text-transform: uppercase;
        }

            .header ul.header_links li a {
                display: block;
                color: #fff;
                text-decoration: none;
                text-shadow: 0 -1px 0 #1c2730;
                padding: 0 20px;
                border: 1px solid #2b3b48;
                border-bottom: 0px none;
                background: url(../images/header_button.jpg) repeat-x top;
                -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                                inset -1px 0 0 rgba(255,255,255,0.1);
                -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                                    inset -1px 0 0 rgba(255,255,255,0.1);
                box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                            inset -1px 0 0 rgba(255,255,255,0.1);
            }

            .header ul.header_links li a:hover, .header ul.header_links li a.selected {
                text-shadow: 0 -1px 0 #b58742;
                background: url(../images/header_button_h.jpg) repeat-x top;
                border-color: #ba8537;
                -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                                inset -1px 0 0 rgba(255,255,255,0.1);
                -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                                    inset -1px 0 0 rgba(255,255,255,0.1);
                box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                            inset -1px 0 0 rgba(255,255,255,0.1);
            }

    .header .main_menu {
        width: 958px;
        height: 52px;
        display: block;
        overflow: hidden;
        margin: 0;
        background: url(../images/main_menu.jpg) repeat-x;
        border-left: 1px solid #2b3b48;
        border-right: 1px solid #2b3b48;
        position: relative;
        -moz-box-shadow: inset -1px 0 0 rgba(255,255,255,0.1);
        -webkit-box-shadow: inset -1px 0 0 rgba(255,255,255,0.1);
        box-shadow: inset -1px 0 0 rgba(255,255,255,0.1);
    }

        .header .main_menu:before {
            content: "";
            position: absolute;
            background: url(../images/main_menu_highlight.png) no-repeat;
            background-position: 0 1px;
            top: 0;
            left: 0;
            width: 958px;
            height: 27px;
            z-index: 0;
        }

        .header .main_menu ul {
            float: left;
            margin: 0;
            position: relative;
            z-index: 1;
        }

            .header .main_menu ul li {
                list-style: none;
                margin: 1px 0 0 0;
                float: left;
                font-family: Segoe UI;
                font-size: 16px;
                line-height: 45px;
                text-align: center;
                border-right: 1px solid #2b3b48;
                border-left: 1px solid #485d6c;
            }

                .header .main_menu ul li a {
                    color: #fff;
                    display: block;
                    padding: 0 20px;
                    text-decoration: none;
                    text-shadow: 0 -1px 0 #1c2730;
                }

                    .header .main_menu ul li a:hover,
                    .header .main_menu ul li a.selected {
                        color: #afdfff;
                        background: url(../images/main_menu_h.png) repeat-x top;
                    }

        .header .main_menu .search {
            float: right;
            margin: 10px 11px 0 0;
            position: relative;
            z-index: 1;
        }

            .header .main_menu .search:before {
                content: "";
                position: absolute;
                z-index: 2;
                width: 21px;
                height: 30px;
                background: url(../images/search_icon.png) no-repeat center center;
                left: 10px;
            }

            .header .main_menu .search input[type=text] {
                background: transparent url(../images/search_bg.jpg) repeat-x top;
                border: 0 none;
                border-left: 1px solid #2c3d4a;
                border-right: 1px solid #2c3d4a;
                color: #ccc;
                float: left;
                width: 210px;
                height: 30px;
                line-height: 30px;
                font-family: Myriad Pro;
                font-size: 12px;
                font-style: italic;
                padding: 0 0 0 40px;
                -moz-box-shadow: 1px 1px 0 #5f6f79; /* FF3.5+ */
                -webkit-box-shadow: 1px 1px 0 #5f6f79; /* Saf3.0+, Chrome */
                box-shadow: 1px 1px 0 #5f6f79;
            }

I started by styling the slider shadow division to be absolutely positioned, margin set to “0 auto” to center horizontally, a negative left margin to position it perfectly, a fixed width and height, a non repeating background image, 100px from top and z-index set to be under the content but above the background. I styled the logo’s h1 to some basic settings with a background image for the logo and hidden text using text-indent value of -10000px which will hide the text when viewed only in browser and this has some SEO benefits.

Now, I styled the division holding the social icons, sign up and login buttons to float to the right with a fixed width, a top and right margins. The social icons unordered list is styled to have no list style, to be floated to the right, with floated list elements to the left, with hidden list element text and a background image using CSS Sprites technique to position the background for each link separately. I styled the header links division to float to the right and with a top margin. Now, list items inside the header links division is styled with no list style, float to the left, a left margin to act as a separator between links, font family to Segoe UI, a fixed font size, a fixed line height value that equals background height to center text vertically, text align to center and transform text to uppercase. The link inside each list item from header_links is styled with white text color, no text decoration, a text shadow which is a CSS3 feature, a fixed left and right padding, solid fixed border except on bottom, a horizontally repeating background image and finally an inset box shadow from left and right to represent left and right 1px glow. The hover and selected states of the link has a different text shadow color, background image, border color and inset box shadows colors.

The main menu division is styled with fixed width and height, hidden overflow, no margins, a horizontally repeating background image, left and right solid border, relative position to allow absolutely positioned child elements to its edges and an inset box shadow. We also created a rule for main menu before selector with no content, position set to absolute, a non repeating background image for the main menu effect, 0px from top and left, a fixed height and width and z-index set to 0 to be under main menu items. The main menu list is floated to left, position is set to absolute, no margins and z-index to 1 to be on top of main menu’s before selector. Main menu list items and links is styled with no list style, floated to left, custom font family and font size, center text alignment, left and right borders, text shadow and finally the hover and selected states is styled with a horizontally repeating background image and a different text color. The result should be as the image below.

Step 5 – Adding Featured Slider Content, Style and JavaScript

Now, we are going to add the slider and for this I am going to use an already implemented script, which is Slidesjs. Slidejs. will be used for this slider and for the portfolio slider. I modified the script to make it suit our layout and now here’s the HTML for the featured slider content.

<div id="featured_slider" class="container featured_slider">
	<div class="slides_container">
		<div>
            <img src="images/image.jpg" alt="" />
			<div class="slide_text">
                <h4>Design Portfolio</h4>
                <p>
                    Suspendisse vitae nunc mi, sit amet scelerisque nulla. Pellentesque auctor ante in elit tristique imperdiet.
                </p>
            </div>
		</div>
		<div>
            <img src="images/image.jpg" alt="" />
			<div class="slide_text">
                <h4>Design Portfolio</h4>
                <p>
                    Suspendisse vitae nunc mi, sit amet scelerisque nulla. Pellentesque auctor ante in elit tristique imperdiet.
                </p>
            </div>
		</div>
		<div>
            <img src="images/image.jpg" alt="" />
			<div class="slide_text">
                <h4>Design Portfolio</h4>
                <p>
                    Suspendisse vitae nunc mi, sit amet scelerisque nulla. Pellentesque auctor ante in elit tristique imperdiet.
                </p>
            </div>
		</div>
	</div>
</div>

Now, by looking at the code you will see that there’s the main division with id “featured_slider” which contains another division with class name “slides_container” that will hold all the slides. Finally, there’s three similar divisions with an image, an <h4> and paragraph inside a division with class name “slider_text”. Now let’s add the CSS style for the slider content and script.

.container.featured_slider {
    position: relative;
}

    .featured_slider .slides_container {
	    width: 960px;
	    display: none;
    }

        .featured_slider .slides_container div {
	        width: 660px;
	        height: 300px;
	        display: block;
        }

        .featured_slider .slides_container .slide_text {
            position: absolute;
            bottom: 0;
            right: 0;
            height: 80px;
            background: url(../images/slider_text_bg.png) repeat-y left;
        }

            .featured_slider .slides_container .slide_text h4 {
                font-family: Segoe UI;
                font-size: 16px;
                font-weight: normal;
                line-height: 20px;
                color: #fff;
                margin: 10px 0 6px 20px;
            }

            .featured_slider .slides_container .slide_text p {
                font-family: Myriad Pro;
                font-size: 13px;
                line-height: 15px;
                color: #ccc;
                margin: 0 0 0 20px;
                padding: 0;
                max-width: 400px;
            }

    .featured_slider .pagination {
	    list-style: none;
	    margin: 0;
	    padding: 0;
        position: absolute;
        top: 0;
        right: 0;
    }

        .featured_slider .pagination li a {
            width: 300px;
            height: 100px;
            display: block;
            text-indent: -10000px;
            overflow: hidden;
            background: url(../images/featured_slider_nav.jpg) no-repeat;
        }

                .featured_slider .pagination li a[href="#0"]:hover,
                .featured_slider .pagination li.current a[href="#0"] {
                    background-position: -300px 0;
                }

            .featured_slider .pagination li a[href="#1"] {
                background-position: 0 -100px;
            }

                .featured_slider .pagination li a[href="#1"]:hover,
                .featured_slider .pagination li.current a[href="#1"] {
                    background-position: -300px -100px;
                }

            .featured_slider .pagination li a[href="#2"] {
                background-position: 0 -200px;
            }

                .featured_slider .pagination li a[href="#2"]:hover,
                .featured_slider .pagination li.current a[href="#2"] {
                    background-position: -300px -200px;
                }

The slides_container has a fixed width with display set to none, which is required by the script. Now, each slide division inside the slides_container is styled with a fixed width and height and display is set to block. The slide_text division is styled with absolute position so we can place it absolutely to the featured_slider division, 0px from bottom and right, a fixed height with a vertically repeating background image to act as a transparent overlay behind the text. The h4 is styled with font family set to Segoe UI, a fixed font size and line height, a normal font weight, white text color and some margins for spacing. The paragraph is styled with a different font family, font size, line height, with text color set to #ccc, a left margin, zero padding and a maximum width of 400px.

Now the rest of this code is to style the pagination which is automatically generated by the script. The pagination container is styled with no list item because it is assigned to a ul tag, no margin and padding, absolute position and 0px from top and right. The links inside each pagination list item is styled with fixed width and height, text indent set to -10000px to hide text in the browser, overflow to hidden and a CSS sprites background image. Now to style each list item number separately we use CSS Selectors, and in each one we match the href attribute to set a custom background position for normal, hover and current states.

Now let’s add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this (which will be also used by the portfolio slider).

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>1stIdeas: Stylish Design Agency Website</title>
    css" href="styles/reset.css" rel="stylesheet" media="all" />
    css" href="styles/tutorial.css" rel="stylesheet" media="all" />
    <script type="text/<span class="><!--mce:0--></script>
    <script type="text/<span class="><!--mce:1--></script>
</head>

Finally, we need to add the JavaScript code that will allow the slider to work in our layout. You should add this script just before the closing tag of the body. Here’s the JavaScript.

<script type="text/javascript">
    $(function () {
        $('#featured_slider').slides({
            preload: true,
            effect: 'fade'
        });
    });
</script>

Now our layout should look like this.

Step 6 – Adding Portfolio Slider Content, Style and JavaScript

Here’s the HTML for the portfolio slider content.

    <div class="container portfolio">
        <h2>
            Featured Project</h2>
        <div id="portfolio_slides">
            <div class="slides_container">
                <div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_1.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_2.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_3.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_4.jpg" alt="" />
                    </div>
                </div>
                <div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_1.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_2.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_3.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_4.jpg" alt="" />
                    </div>
                </div>
                <div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_1.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_2.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_3.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_4.jpg" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </div>

It has almost the same structure as the featured slider, we have a main container and inside it is a division with a unique id for the portfolio slider and inside it is the slides container. The main difference here is that each slide has four divisions each with class name item, a link and an image inside it. Now let’s add the CSS style for the slider content and script.

.container.portfolio {
    height: 255px;
    width: 963px;
    overflow: hidden;
    position: relative;
    background: url(../images/portfolio_slider_bg.png) no-repeat bottom center;
    margin-top: 40px;
}

    .portfolio h2 {
        position: absolute;
        bottom: 50px;
        left: 45px;
        height: 16px;
        width: 161px;
        background: url(../images/headers_text.png) no-repeat;
        background-position: 0px 0px;
        text-indent: -10000px;
        z-index: 10;
    }

    .portfolio .slides_container {
	    width: 960px;
	    display: none;
    }

        .portfolio .slides_container div {
	    width: 960px;
            height: 255px;
	    display: block;
            overflow: hidden;
        }

        .portfolio .slides_container div.item {
            float: left;
            width: 150px;
            height: 166px;
            margin: 0 45px;
            overflow: hidden;
        }

            .portfolio .slides_container div.item a {
                height: 155px;
                display: block;
                background: url(../images/portfolio_shadow.png) no-repeat;
                background-position: center -4px;
            }

    .portfolio .pagination {
        list-style: none;
	margin: 0;
	padding: 0;
        position: absolute;
        z-index: 100;
        top: 190px;
        right: 45px;
    }
        .portfolio .pagination li {
            float: left;
            margin: 0;
            padding: 0;
        }

            .portfolio .pagination li a {
                width: 20px;
                height: 20px;
                display: block;
                margin: 0 0 0 10px;
                text-indent: -10000px;
                background: url(../images/portfolio_bullets.png) no-repeat;
                background-position: -70px -9px;
            }

                .portfolio .pagination li a:hover {
                    background-position: -39px -9px;
                }

                .portfolio .pagination li.current a {
                    background-position: 0px 0px;
                    height: 37px;
                    width: 37px;
                    margin: -9px -7px 0 1px;
                }

First, we style h2 with absolute position, 50px from bottom, 45px from left, fixed height and width, a negative text indent to hide text, z-index set to 10 to be on top of all content and finally a background image from a CSS sprites which contains all the headers images. Now the slides_container and the slide division is the same as in the featured slider.

Now each item inside the slide has a fixed height and width, floating to left, a left and right margins and overflow set to hidden. The link inside each item has a fixed height and a background image to represent the shadow under each portfolio image. The pagination container is styled with no list style, zero margin and padding, absolute position, z-index set to 100, 190px from top and 45px from right. The list item is styled to float to the left with zero margin and padding. Finally, the link is styled with fixed height and width, a left margin, a negative text indent, a background CSS sprite image with a background position. The hover and current states have some different styles to display the part we want form the CSS sprite.

Finally, we need to add the JavaScript code that will allow the slider to work on our layout. You should add this script just before the closing tag of the body underneath the script we added for the featured slider. Here’s the JavaScript.

$(function () {
    $('#portfolio_slides').slides({
        preload: true
    });
});

Now our layout should look like this.

Step 7 – Adding Main Content and Style

Now, let’s add the HTML content for “About 1stIdeas”, “Blog Updates”, “Client Testimonials” and “Our Services”.

<div class="container content">
    <div class="left">
        <h2>
            About 1stIdeas</h2>
        <p>
            Fusce pretium dictum massa malesuada eleifend. Mauris ac hendrerit sem. In eros
            erat, adipiscing a congue eu, placerat a enim. Morbi eu leo odio. Nam placerat aliquet
            nibh, eu varius enim pellentesque in. Pellentesque fermentum vestibulum justo, at
            feugiat velit varius et. <a href="#">read more</a>
        </p>
        <div class="clear">
        </div>
        <div class="testimonials">
            <h2>
                Client Testimonials</h2>
            <div class="testimonial">
                <h4>
                    <img src="images/image_1.jpg" alt="" />
                    Michael John O. Burns <a href="#">www.burnstudio.deviantart.com</a>
                </h4>
                <p>
                    Morbi eu leo odio. Nam placerat aliquet nibh, eu varius enim pellentesque in. Pellentesque
                    fermentum vestibulum justo, at feugiat velit varius et. <a href="#">read more</a>
                </p>
                <div class="shadow">
                </div>
            </div>
        </div>
        <div class="services">
            <h2>
                Our Services</h2>
            <ul>
                <li>WebDesign<br />
                    Sed fermentum rutrum odio secleio
                <li class="second">XHTML - CSS<br />
                    Sed fermentum rutrum odio secleio
                <li class="third">Vector Art<br />
                    Sed fermentum rutrum odio secleio
            </ul>
        </div>
    </div>
    <div class="right">
        <h2>
            Blog Updates</h2>
        <div class="posts">
            <p>
                <img src="images/image_2.jpg" alt="" />
                <a class="title" href="#">Vivamus dignissim risus</a> <span class="date">March 31, 2011</span>
                non dolor convallis nec lacinia purus tempor. Cras auctor felis Nulla quam urna,
                mattis vitae hendrerit vitae, tincidunt non lectus. Duis consequat augue tortor,
                et facilisis tortor.

                <a href="#" title="Read More" class="read_more">Read More</a>
            </p>
            <p>
                <img src="images/image_2.jpg" alt="" />
                <a class="title" href="#">Vivamus dignissim risus</a> <span class="date">March 31, 2011</span>
                non dolor convallis nec lacinia purus tempor. Cras auctor felis Nulla quam urna,
                mattis vitae hendrerit vitae, tincidunt non lectus. Duis consequat augue tortor,
                et facilisis tortor.

                <a href="#" title="Read More" class="read_more">Read More</a>
            </p>
            <div class="shadow">
            </div>
        </div>
    </div>
</div>

I divided the content with two divisions one with a class name “left” which will contain “About”, “Testimonials” and “Services”. The other with class name “right” which will contain “Blog Updates.” The about content has an h2 and a paragraph, the testimonials section has a containing division with an h2 and a main division with class name “testimonial” which contains an h4 and a paragraph and then a division for the shadow. The services content has an h2 and an unordered list. Finally, the right division has an h2 and a main division with class name “posts” which contains paragaph with image, text and links. Now let’s add the CSS style for the content.

.container.content {
    margin-top: 36px;
    background: url(../images/content_light.png) no-repeat;
    background-position: 473px -20px;
    overflow: hidden;
}

    .content h2 {
        height: 15px;
        background: url(../images/headers_text.png) no-repeat;
        text-indent: -10000px;
        margin: 0 0 20px 0;
    }

        .content p a {
            font-size: 12px;
            font-style: italic;
            padding: 0 3px;
        }

    .content .left {
        float: left;
        width: 600px;
        margin: 0 0 0 20px;
    }

        .content .left h2 {
            background-position: 0px -17px;
            width: 141px;
            margin-bottom: 30px;
        }

        .content .left p {
            line-height: 24px;
        }

            .content .left .testimonials {
                margin: 60px 0 0 0;
                float: left;
                width: 290px;
            }

                .content .left .testimonials h2 {
                    background-position: 0 -49px;
                    width: 183px;
                    margin-bottom: 25px;
                }

                .content .left .testimonials .testimonial {
                    position: relative;
                    min-height: 199px;
                    padding: 20px;
                    margin-bottom: 18px;
                    background: #34abe1;
                    background: -moz-linear-gradient(left, #34abe1 0%, #2792c3 100%);
                    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#34abe1), color-stop(100%,#2792c3));
                    background: -webkit-linear-gradient(left, #34abe1 0%,#2792c3 100%);
                    background: -o-linear-gradient(left, #34abe1 0%,#2792c3 100%);
                    background: -ms-linear-gradient(left, #34abe1 0%,#2792c3 100%);
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34ABE1', endColorstr='#2792C3',GradientType=1 );
                    background: linear-gradient(left, #34abe1 0%,#2792c3 100%);
                }

                    .content .left .testimonials .testimonial h4 {
                        font-family: Myriad Pro;
                        font-size: 13px;
                        font-weight: normal;
                        text-transform: uppercase;
                        height: 50px;
                        overflow: hidden;
                    }

                        .content .left .testimonials .testimonial h4 img {
                            float: left;
                            margin: 0 18px 0 0;
                        }

                        .content .left .testimonials .testimonial h4 a {
                            text-transform: lowercase;
                        }

                    .content .left .testimonials .testimonial p {
                        font-style: italic;
                        text-align: justify;
                    }

                    .content .shadow {
                        background: url(../images/box_shadow.png) no-repeat right bottom;
                        width: 290px;
                        height: 18px;
                        position: absolute;
                        bottom: -18px;
                        right: 0px;
                        z-index: -1;
                    }

            .content .left .services {
                float: left;
                width: 290px;
                margin: 60px 0 0 20px;
            }

                .content .left .services h2 {
                    background-position: 0 -65px;
                    width: 119px;
                    margin-bottom: 25px;
                }

                .content .left .services ul {
                    margin: 0;
                    border-bottom: 1px solid #455865;
                }

                    .content .left .services ul li {
                        list-style: none;
                        margin: 0;
                        display: block;
                        height: 60px;
                        padding: 18px 0 0 80px;
                        border-left: 3px solid #192229;
                        border-bottom: 1px solid #192229;
                        border-top: 1px solid #455865;
                        background: url(../images/service_icons.png) no-repeat;
                        background-position: 10px 0px;
                        font-family: Segoe UI;
                        font-size: 18px;
                        line-height: 18px;
                        text-transform: uppercase;
                    }

                        .content .left .services ul li:first-child {
                            border-top: 0 none;
                        }

                        .content .left .services ul li span {
                            color: #fceba3;
                            font-family: Myriad Pro;
                            font-size: 12px;
                            line-height: 15px;
                            text-transform: none;
                        }

                    .content .left .services ul li.second {
                        background-position: 10px -80px;
                    }

                    .content .left .services ul li.third {
                        background-position: 10px -160px;
                    }

    .content .right {
        float: left;
        width: 320px;
        margin: 0 0 0 20px;
    }

        .content .right h2 {
            background-position: 0px -33px;
            width: 126px;
            margin-bottom: 17px;
        }

        .content .right .posts {
            background: #151d23;
            padding: 30px 25px 22px 20px;
            font-family: Myriad Pro;
            position: relative;
        }

            .content .right .posts p {
                font-size: 12px;
                line-height: 18px;
                text-align: justify;
                overflow: hidden;
            }

                .content .right .posts p:first-child {
                    margin: 0 0 25px 0;
                }

                .content .right .posts p img {
                    float: left;
                    margin: 0 12px 0px 0;
                }

                .content .right .posts p a.title {
                    color: #afdfff;
                    text-transform: uppercase;
                    font-size: 13px;
                    font-style: normal;
                    line-height: 13px;
                    text-decoration: none;
                    margin: 0 0 6px 0;
                    display: block;
                }

                    .content .right .posts p a.title:hover {
                        background: transparent;
                        color: #afdfff;
                        text-decoration: underline;
                    }

                .content .right .posts p span.date {
                    color: #6d6c6c;
                    font-style: normal;
                    line-height: 12px;
                    margin: 0 0 8px 0;
                    display: block;
                }

                .content .right .posts p a.read_more {
                    float: left;
                    clear: both;
                    font-size: 11px;
                    line-height: 11px;
                    color: #fff;
                    text-transform: uppercase;
                    text-decoration: none;
                    font-style: normal;
                    margin: 20px 0 0 0;
                    padding: 7px 13px;
                    background: #2792c3;
                    background: -moz-linear-gradient(top, #2792c3 0%, #34abe1 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2792c3), color-stop(100%,#34abe1));
                    background: -webkit-linear-gradient(top, #2792c3 0%,#34abe1 100%);
                    background: -o-linear-gradient(top, #2792c3 0%,#34abe1 100%);
                    background: -ms-linear-gradient(top, #2792c3 0%,#34abe1 100%);
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2792C3', endColorstr='#34ABE1',GradientType=0 );
                    background: linear-gradient(top, #2792c3 0%,#34abe1 100%);
                }

The CSS code may seem very long and difficult but when you look closely you’ll soon see that it’s only positioning and alignment. I am going to walk you through this code.

I started by setting the style for all h2 elements with a fixed height, a background CSS sprite image, a negative text indent and a bottom margin, now all other styles for h2 elements is written to change background position, width and margins. Next, I set the style for all the links inside any paragraph with fixed font size, an italic style and a left and right padding.

Now, the CSS style for the left division starts by first styling the left division with a left margin, a fixed width and floating to left. The testimonials division style is set with top margin, floating to left and a fixed width. The testimonial division inside the testimonials has a relative position, with a fixed min-height to make it look nice, a 20px padding, a bottom margin that matches the shadow image height, a gradient background and you can use this CSS Gradient generator to help you create this. Then, we style the h4 element with font family, font size and normal font weight, text transform to uppercase, a fixed height and overflow set to hidden. Then we style the image and the link inside the h4 element and the paragraph with simple styles.

Now, you notice that the shadow class name is styled inside the content class name directly and that’s because it will be used for both the testimonial shadow and the blog updates shadow. Now the services division is floated to left with a fixed width and a margin from top and left. The unordered list is styled with zero margins and a solid 1px bottom border. List items is styled with no list style, zero margins, fixed height, a top and left padding to make room for the background image, borders from left bottom and top, a CSS sprites background image which is positioned  using unique classes added to list items, a font family and fixed font size and line height with text transform set to uppercase. The first child of list items has no border from the top.

Next, we style the right division with float to left, fixed width and a left margin. The posts division is styled with a background color, padding, font family and relative position. The paragraphs have a simple styling to set font size, line height and text alignment. The same for the images. Next, we style the links with class name title with custom color, uppercase text transform, font size and normal style, fixed line height with no text decoration and a bottom margin. The hover state is styled with different color and an underline text decoration. The date class name is simply styled with color, font style, line height and margin. Finally, read more link is styled with gradient background, left floating, fixed font size and line height, white text color, uppercase text transformation, no text decoration, normal style and some margins and padding.

Now our layout should look like this.

Step 8 – Adding Footer Content and Style

Now let’s add the content for the footer, here’s the HTML for the footer.

<div class="footer">
    <div class="container">
        <div class="links">
            <ul>
                <li class="title">Quick Links</li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
            <ul>
                <li class="title">Testimonials</li>
                <li><a href="#">Client Testimonials</a></li>
                <li><a href="#">Other Testimonials</a></li>
                <li class="title">Login</li>
                <li><a href="#">Client Login</a></li>
                <li><a href="#">Register</a></li>
            </ul>
            <ul>
                <li class="title">Services Offered</li>

	<li><a href="#">Web / Grahpic Design</a></li>
                <li><a href="#">PSD - CSS Conversion</a></li>
                <li><a href="#">Vector Art</a></li>
                <li><a href="#">Packaging</a></li>
                <li><a href="#">Branding</a></li>
            </ul>
            <ul>
                <li class="title">What New On Blog</li>

	<li><a href="#">Web / Grahpic Design</a></li>
                <li><a href="#">PSD - CSS Conversion</a></li>
                <li><a href="#">Vector Art</a></li>
                <li><a href="#">Packaging</a></li>
                <li><a href="#">Branding</a></li>
            </ul>
            <ul class="last">
                <li class="title">Social</li>
                <li class="twitter"><a href="#" title="Twitter">Twitter</a></li>
                <li class="facebook"><a href="#" title="Facebook">Facebook</a></li>
                <li class="rss"><a href="#" title="RSS">RSS</a></li>
            </ul>
        </div>
        <div class="footer_logo">
            <img src="images/footer_logo.png" alt="" />
            <ul class="social_icons">
                <li class="facebook"><a href="#" title="Facebook">Facebook</a></li>
                <li class="twitter"><a href="#" title="Twitter">Twitter</a></li>
                <li class="rss"><a href="#" title="RSS Feed">RSS Feed</a></li>
            </ul>
        </div>
        <div class="clear"></div>
        <div class="copyright">
            © 2010 - 2011 1stIdeas. All rights reserved.
        </div>
    </div>
</div>

The footer has three main divisions one with class name “links” the other with class name “footer_logo” and the last one with class name “copyright”. The links division has unordered lists with normal list items and some list items with class name “title.” The footer logo division has an image and a unordered list item for social icons that is exactly similar to the one in the header both in HTML and CSS style. Now let’s add the CSS style for the footer content.

.footer {
    width: 100%;
    height: 300px;
    background: #151d23;
    overflow: hidden;
    margin: 50px 0 0 0;
    padding: 35px 0 0 0;
    font-family: Tahoma;
    font-size: 12px;
    line-height: 18px;
    border-top: 3px solid #0e1418;
    -moz-box-shadow: inset -1px 0px 0px #2c3339;
    -webkit-box-shadow: inset -1px 0px 0px #2c3339;
    box-shadow: inset 0px 1px 0px #2c3339;
}

    .footer a {
        color: #cccccc;
        text-decoration: none;
    }

        .footer a:hover {
            background: transparent;
            text-decoration: underline;
        }

    .footer .container .links {
        float: left;
        width: 760px;
    }

        .footer .container .links ul {
            float: left;
            margin: 0;
            padding: 0 35px 0 0;
            border-right: 1px solid #486277;
            min-height: 155px;
            list-style: none;
        }

            .footer .container .links ul.last {
                border: 0 none;
                padding: 0;
            }

            .footer .container .links ul:first-child li {
                margin-left: 0;
            }

            .footer .container .links ul li {
                margin-left: 30px;
            }

            .footer .container .links ul li.title {
                font-size: 13px;
                font-weight: bold;
                color: #afdfff;
                line-height: normal;
                margin-top: 25px;
                margin-bottom: 12px;
            }

            .footer .container .links ul li.title:first-child {
                margin-top: 0;
            }

    .footer .container .footer_logo {
        float: right;
        width: 125px;
    }

        .footer .container .footer_logo img {
            float: left;
            margin: 0 0 20px 0;
        }

    .footer .container .copyright {
        color: #afdfff;
        font-weight: bold;
        margin: 30px 0 0 0;
    }

The links inside the footer are styled with custom color and no text decoration, with a hover state that has a transparent background and underline text decoration. The links division is floated to left with a fixed width. The unordered lists is styled with floating to left, zero margin, right margin, solid 1px right border, a min-height to make it look even in heights and no list style. The unordered list with class last has no border and zero padding.  The list items has 30px left margin. The list items class name title is styled with bigger font size, bold font weight, custom text color, normal line height, top and bottom margin. The first child has no top margin.

The footer logo division is floated to right with fixed width. The image is styled with left floating and bottom margin. Finally, the copyright division is styled with custom color, bold font and top margin.

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.

Conclusion

So that’s it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don’t forget to validate and check for browser compatibility (the layout will not validate because of JavaScript & CSS3 styles, remove both to validate properly). If there is a part of this tutorial you didn’t understand, or you have a better technique, feel free to share with everyone by commenting below.

comments

Coca-Cola Advertising Through the Years

Coca-Cola is one of the most persistent and well-loved brands in history. It is one of the longest surviving brands, and thus considered among the most successful companies ever. The reason in part of this, is their strong advertising and marketing. Coca-Cola has always relied in advertising to promote and market their brand, and this is why they are always on top of their game, after having been in the market for more than a century!  Coca-Cola advertising has indeed greatly affected American pop culture, and even the whole world.

Here is a collection of the best Coca-Cola Advertising from its early days in the 1880′s up until now. Enjoy!

 

1800′s

It was the eventful date of May 8, 1886, where it all started. John Pemberton sold his first Coca-Cola drink at a soda fountain in Jacob’s Pharmacy, Atlanta. Subsequently he published the first Coca-Cola advertisement in the Atlanta Journal.

Image by Georgia Info

There is little creativity found in the first ad, just some text. No artsy fonts, no images, no gimmicks. The first newspaper ad showed the company’s first (and definitely the last) tagline: ‘Delicious! Refreshing! Exhilarating! Invigorating!’

Soon afterwards, John Pemberton ran a longer and more persuasive newspaper ad. It still promoted the drink as a ‘delicious, exhilarating, refreshing and invigorating’ drink, but added more promises that the drink is an ‘intellectual beverage’, ‘temperance drink’, ‘brain tonic’, and it even claims to be able to cure ‘headache, neuralgia, hysteria, melancholy’ and more.

Photo by Georgia Info

Of course, these claims are not plausible, but a hundred years before there were no organizations that regulated advertising and the false advertising laws were pretty much non-existent. Newspapers during this era were full of fraudulent advertising by quack doctors and scam artists.

Early 1900′s

Coca-Cola advertising during the early 1900′s relied on young women as their spokespersons. The first spokesperson of Coca Cola is model Hilda Clark.

1930′s to 1960′s

Coca-Cola is often credited for creating the image of the modern Santa Claus as an old, jolly and fat man in a red and white suit. Coca-Cola did invent the red-and-white jolly Santa during the 1930′s, the illustration done by Haddon Sundblom. Before Santa, pretty young women were used to endorse Coca-Cola.

Photo by The Coca-Cola Company

The image of Coca-Cola Santa Claus appeared through their advertisements for three decades. Because of Coca-Cola advertising, the Santa Claus we all know and love today came into being. Before Coca-Cola’s Santa, the image of Santa is somewhat varied, he can be big, small, fat, elf-like, lovable, old, young, etc. He has worn all kinds of suits, even donning a priest’s robe or even huntsman animal skin.

Photo by The Coca-Cola Company

End of 1960′s

Until the 1970′s most people enjoyed cola in ice cream parlors or the local soda fountain. The soda fountain counter was a place for socializing with other people. However, at this point in time the fountain was already declining in popularity as bottled drinks and commercialized fast food quickly rose to popularity. As you can see previously, until the 1960′s Coca-Cola advertising shows people holding their drink in a glass rather than the iconic bottle.

Photo by Dir Journal

Photo by DIR Journal

In 1969, They released their new advertising slogan ‘It’s the real thing.’ The campaign now centers on the Coca-Cola bottle itself.

1960-1980

It was during this era that Coca-Cola went global. The company has now spread to 163 countries worldwide. Year after year, it has captured new markets such as Macau, Turkey, Paraguay, the Philippines, to name a few. Not only this, Coca-Cola has expanded into many different flavors such as Fanta and Sprite.

With the swift expansion, Coca-Cola went with a massive advertising campaign. Coca-Cola always believed in advertising. The international appeal of Coke was shared in their advertising with the slogan: ‘I’d Like to Buy the World a Coke’.

The advertisement appeared in 1971 and later became the basis of the song ‘I’d Like to Teach the World to Sing’ by the New Seekers. The advertisement was considered one of the most loved and influential TV ads in history.

1980′s

This decade marked the birth of the diet Coke.

This decade also marked the introduction of the  New Coke. It was a desperate effort after Coca-Cola saw a drastic decline in sales and the increased competition from Pepsi. The company execs responded by changing the formula of Coke. On tests, people favored the new taste. But in reality, people hated it. People missed the classic taste of Coke, and there were 8,000 calls,  complaints and constant angry letters everyday.

New Coke is considered to be one of the company’s biggest blunder in history. The problem was not the taste, but maybe because it broke tradition. Many Coke lovers were attached to the familiar and well-loved taste that was Coke. Thus, Coke admitted their mistake and announced that it will be using its former recipe again.

Photo by SA Steve

1993

Aside from Santa Claus, one of Coca-Cola’s most memorable symbols of the company,is the animated Polar Bear. It came from the Northern Lights advertising campaign. The first ad featured polar bears watching a ‘movie’, a play of aurora borealis while drinking Coca-Cola.

Photo by Presidia Creative

2000 – Present

The Coke Side of Life

The ad campaign was launched in 2006 and it’s main theme centers around people drinking Coke and feeling happy and positive. You drink Coke, you feel good. The campaign has optimistic and positive vibes, and it captures the very essence of life. It encourages people to love spontaneity and to see the world in full color.

Photo by Coca-Cola Art

The Happiness Truck and the Happiness Machine

Among Coke’s most successful endeavors of today is the ‘Happiness Machine’, or in some countries, the ‘Happiness Truck’. Coca-Cola is grounded in its heritage, at the same time, showed that it can keep up with the times. The Happiness machine uses elements of both guerilla marketing and viral advertising by using ‘YouTube’.

Coca-Cola decided to own a word, and that word is ‘Happiness’. Here are some clips of the ad that appeared online:




Coca-Cola implemented the Happiness Machine in various places and campuses including London, India, Germany, Hungary, Hong Kong and more. The Happiness Truck appeared in various countries like Rio de Janeiro and the Philippines. You can see in the videos the authentic happiness the people get when they receive their Coke surprise.

A Coca-Cola Happy Ending

Two centuries ago in 1886, Coca-Cola was born in a tiny pharmacy in 1886. Now, Coca-Cola still continues to provide magic to everyone who drinks Coke. It has expanded globally to the most far-reaching places, offering 500 brands and products to the world. Coca-Cola is one of the most well-loved brand today, and it continues to serve more than 1.7 billion servings in one day.

Coke has now more than a dozen flavors including Diet Cola, Coke Zero, Coke Cherry, Vanilla, Citra and so much more . Products by Coca-Cola are now over 3,500 including A&W, Dr. Pepper, Real Gold, Royal Tru, Lift, Ponkana, Minute Maid, Fanta, Earth and Sky and Eight O’Clock. What is next for Coca-Cola? Who knows.

comments