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

April 21 2012


1WD’s Super Collection of Web Design Posts

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

Nearly three and a half years ago in 2008 an idea was born. An idea based on love and passion about design. Couple of mockups, sleepless nights and cups of coffee and a blog was about to come to light. Little by little with hard work and ambition the blog grew bigger and bigger and attracted more and more designers from all over the world. Yes, that’s the story of 1stwebdesigner. Now being the third largest design blog and attracting over 3 million monthly visitors we can truly be proud of the success we gained.

A couple weeks ago we reached our thousandth post. One thousand, really? Can you imagine a pile of a thousand books, a thousand ideas running through your mind for a thousand nights? We’ve managed to achieve that amount of articles in three years. Ideas come and go, trends and technology change, but there are still some articles that have been, and will, stick around. With this post we’d like to start a new series of articles – 1stwebdesigner’s unique pages. We will gather the very best content from 1stwebdesigner reaching as far as the beginning. The series will cover all the major and popular themes such as web design, tutorials, WordPress, jQuery, freelancing, inspiration and many more. We’ve gone through dozens of pages, reviewed your comments and choices so these series are basically chosen by you, our dear reader.

For the first article of the series we’ve chosen an important topic. The beginning web designer’s guide to a successful career. This blog has helped many designers with insightful articles, useful tips and brilliant tutorials. Thus, we decided to compile the best of the best. This article contains all the basics you need to know about web design and also some basic development stuff since knowing that will just make your work a lot easier. The article is divided into sections so you can start from the very beginning and gradually move up. Good luck with the learning and stay tuned for more articles.


I will have to sadden you if you thought that you’d open Photoshop and start creating stunning websites from the get go. Before diving into the intricate and advanced aspects of web design you need to learn the fundamentals of it. Starting with history and moving up to some basic tips. If you’re absolutely new to web design this is where you should start. This section contains some of our best beginner and explanatory articles on fundamentals and basics of web design. Study the history, get to know the modern trends and learn from examples.

1. 11 Essential Tips Every Designer Should Be Aware Of


Almost every profession requires never-ending learning and self educating, but especially it’s important in design field – new software, websites, tools come out every day, it’s your task to keep up, evolve your view and find the best ways to do specific tasks. This article contains some essential things every growing designer and not only should keep in mind.

2. 20 Reasons Why Your Website Design Sucks Part 1


No matter how good or bad personal style is, the truth is that everyone has one. However, when design conventions are left out of a project, the result will be a bad or uninteresting design. That is exactly what happens with those terrible clients, when they try to implement their personal style without knowing anything about design conventions. This post will cover 10 common beginner pitfalls in web design and how to avoid them.

3. 10 Basic Visual Web Design Mistakes


No doubt, all of you has so many experiences of seeing so many web design when surfing in internet. It often happens that you see more bad web design layout than a good one. This article covers 10 basic visual web design mistakes and tips to avoid them.

4. Ancient Website Design Practices That Beginners Should Avoid Part 1


This article is intended for beginners in the field of web design and development. It talks about old design practices that have died off several years ago, but up to now some are still being used. The goal is to discuss why these practices are bad and to instill in the minds of budding designers and developers that doing the right thing even if it’s hard to do and hard to learn will greatly pay off in the future.

5. Ancient Web Design Practices that Beginners Should Avoid Part 2


Part one mostly talked about the errors designers and developers make, here in part two you will also have the chance to read about the problem with what “webmasters” or website owners do to sully their names. Also be sure to read the comments because, very often, the gems are hidden there.

6. Things Web Designers Do That People Love


Web designers and web developers often wonder what kind of things they should do so that their audience will love them. This article will talk about those little things that create a big impact on people throughout the internet.

7. Web Design History: From The Beginning


The history of the internet is short, but so much has changed within that time. It has radically changed how we live our lives. More importantly, the internet has created thousands of jobs that did not exist a decade ago. These include jobs in SEO marketing, online telemarketing, freelance writing, blogging and of course, in web design. In this article you’ll find out how everything evolved and turned out the way it is now.

8. The Elements of Design in Modern Web Design


The elements of design are pivotal in creating an eye-catching, harmonious design that speaks to your audience and shouldn’t be overlooked. They are the fundamental elements of design which can be called upon when you reach a tough part of the design process. Becoming familiar with these elements means you have the knowledge to make sound decisions in regards putting a design together.

9. Future of Web Design – Facts and Thoughts


Web design has changed tremendously in the last few years and it’s still changing. More than changing, web design is evolving and evolution is bounded with complexity. Although the industry is not in danger some web designers are. Sounds contradictory right? Not really. The truth is that the web design industry is healthy and growing, new jobs are being added, more clients are emerging and consequently more agencies and companies related to the business.

10. 20 Reasons Why Your Website Design Sucks Part 2


Like the previous article, this one’s focusing on another 10 mistakes that can transform your website design into an unpleasant place to be. However, this time you won’t see extremely bad layouts that make you laugh, instead you’re going next level and will focus on bigger mistakes that good designers make.

Design tutorials

Photoshop still is designer’s tool of the trade number one. You have given it a try but aren’t quite sure about the results and some commands still confuse you? In this section you’ll find some of our most successful and instructive tutorials that will teach you how to be a solid web designer.

1. 1st Photoshop Web Design Professional Layout Tutorial


This tutorial will guide you through the process of creating a beautiful, clean and professional business type web design.

2. Learn How To Create A Clean Layout In Photoshop [Very Detailed]


In this Photoshop tutorial you’ll learn how to create a clean looking website layout, you’ll also be using 960s grid system to keep everything aligned. This is very detailed tutorial, so if you have basic knowledge about Photoshop you should be able to easily keep up and let the tutorial guide you through this layout creation process.

3. GD Auto Service: Learn How to Create an Awesome Landing Page in Photoshop


In this tutorial tutorial you are going to create an awesome landing page for GD Auto Service as an example. The template will have a cool logo, search bar, navigation, slider gallery, login panel, blog, services, testimonials and footer.

4. Burnstudio: Create An Amazing Personal Website From Scratch Using Photoshop


Have you ever had a hard time designing your own personal website? Thinking of what elements, shapes, font styles will suit your design? This tutorial wil guide you in creating a stylish personal website. You will be using mostly shapes, layer styles, and fonts to create a new personal website.

5. 9 Etiquettes And Tips of a Photoshop Rockstar Designer


With the abundance of online resources, tutorials, blogs and articles which keep on excavating the trade of photoshoping, anybody with passion and readiness to work hard can become a pro over time. But what does it take to transition from just a pro, to ‘the best’? Why are there some designers who are always the best? Check out this article to find what it takes to be a rockstar designer.

6. 1st Ideas: Create a Stylish Design Agency Website [Very Detailed]


In this tutorial you’re going to be showed how to create a stylish agency website. This tutorial will be quite long, yet don’t be afraid. The techniques and tricks learned will be invaluable. You will be using tools gradients mostly, combination of light and dark colors.

Development tutorials

The title says this is web designer’s guide however as already mentioned in the introduction if you want to be a rockstar web designer you do have to know some basics of this. Knowing how to slice your design into a functional HTML/CSS will just make your work a lot easier. This section is just right for those who already are a bit familiar with the designing process yet are willing to bring their designs to the life. you. Below you’ll find some of our best basic coding tutorials to get you going.

1. How to Create a Minimalist and Typographic Blog Layout From Scratch


Typography is probably one the most important and powerful design element ever, so in this you will learn how to create this minimalist theme scratch including XHTML, CSS and WordPress.

2. 9 Inspirational Website Effects Deconstructed


As you may know, there are lots of great tutorials out there which can definitely help you practice, learn and achieve amazing results. The good thing about having so many tutorials to learn from is precisely that – you have a large variety of sources to choose from. Sometimes though, the tutorials aren’t clear, or difficult to understand or you just can’t apply it in the real world. The purpose of this article is to provide you with resources and insights about how you can learn from your favourite websites, learning and taking advantage from real implemented effects and functionalities.

3. 17 CSS/HTML Effects with Cross-Browsing Alternatives


We surely have a lot of different ways to achieve similar effects and with CSS the hardest part is to make it look good in almost every browser. You don’t need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don’t need to reinvent it every time you need a simple round corner, right? Thus, the point here is to collect some cool CSS effects that you should be using.

4. How to Create an Awesome Blurry Menu Using CSS


Today you will get a perfect and simple blurry menu effect via CSS. In addition to it, you will get a useful multiple borders effect. To achieve this effect you will need to have a basic understanding of HTML and CSS. You will work with IE filters and text-shadow, but there is no reason to worry if you have never used it, they’re all well and simply explained.

5. Convert Burnstudio from PSD to HTML [Very Detailed]


In this article you will learn how to convert Burnstudio Personal Website from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and JavaScript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout.


Inspiration is an inalienable part of every type of art. Web design is not an exception. While working you’ll often find yourself in situations where you’ll want to look how others have resolved this or that problem. Having a lot of inspiration sources will lighten your creative work and help to find your own uniqe style. In this section you’ll find some neat and inspirational articles to keep your creative flame buning. Also be sure to check out our Inspiration section out to find some fantastic things.

1. Web Galleries as a Source of Inspiration for Designers


There are a number of web galleries that feature inspirational web designs. These web galleries serve a purpose, and that is to update people on new trends and showcase sites that are pushing the boundaries. It is important, as a designer, that you know what the latest trends are and see how other people are pushing the boundaries. In this article, you will find some of the best web galleries that you can reference for inspiration.

2. Inspiring Videos For Designers & Developers


Whether you’re a motion designer, front-end developer or economy student – you have to keep up with the times and constantly increase your knowledge and broaden your professional viewpoint. One of the best ways to do that is by watching videos from professionals and experts in your field. Videos don’t have to be strictly instructive. A good and gripping video can inspire you for the rest of the day. In this article you’ll find a compilation of 40 awesome, inspiring and valuable videos varying from entrepreneurship to web design and self-motivation which will help you to develop new skills, gain a bunch of inspiration and simply look at things from a different perspective.

3. 30 Sources To Get Your Web Design Inspiration


If You are developing web designs, then you know there is times when you struggle without any ideas. That’s the time when these web sites becomes handy. This post contains a nice list with some of the most known web gallery sites showcasing and listing well design sites into different categories, letting you to promote and demote all designs.

4. Great Art Movements That Inspired Modern Web Designers


The first modern designers are, of course, inspired by traditional and classical art. We designers, as a whole, get our ideas of beauty and aesthetics from by viewing paintings, sculptures and artworks from the most powerful art movements in history. Here are among the top art movements in the 20th century that helped shape how we view art and beauty.

5. 33 Excellent “OUT OF THE BOX” Ways for Creatives to find Inspiration


Feeling uninspired? Running dry on inspiration is normal. We all get there at some point and none of us feel very comfortable being there. Every one gets tensed when having no inspiration. This article shares some great tips to get back to the creative corner. Some tips may seem funny but seriously give them a try and you will love them.


Resources and assets are on of the most important things in web design. Learning how to use premade resources and enhancing your workflow is a huge part of being a web designer. Sometimes finding these resources may be quite time-consuming but that’s where blogs like this come to aid. In this section you’ll find almost every resource you’ll need when starting off.

1. 45 Online Generators For Designers And Developers To Do The Job Faster!


Online generators can be extremely handy for creating small details or saving time writing code. Whether it’s a striped background, a pattern or an advanced CSS3 text effect, online generators can surely make your workflow go smoother. This post presents 45 of the best and latest online generators for designers and developers. The emphasis has been put on CSS3 generators since CSS3 is quickly becoming the new progressive web standard.

2. 50 Superb & Free PSD Files From Dribbble To Learn From The Best


Either for self-promotion or simply for goodwill and to help others, the truth is that finding free resources and inspiration can be a really easy task. If you are an experienced designer, you know the best way to learn is by just looking and studying other people’s work. PSD files can be a powerful way to learn and fulfill your work expectations. This collection includes some fantastic UI kits, a lot of assets for web and graphic design, as well as a few cool icons. These PSDs are as perfect for learning as they are for your future projects.

3. 30+ Best Websites to Download Free PSD Files


PSD files are very useful resources for learning purpose because you can see all the layers and also what techniques have been used to create the work. In this article you’ll find almost all possible websites to find free high-quality PSD files.

4. Photoshop WebDesigner Toolbox: All the Resources You’ll Ever Need


If you’re using Photoshop daily it’s essential to have an asset library. Having a pre made toolbox or asset library can be extremely handy. While you could spend countless hours making your own resources, usually there’s no need to do that. Nowadays the web is full of pre made high-quality resources. This post contains various resources, sites and tools that can considerably boost your workflow, free up some time on your agenda and simply enhance your projects.

5. Don’t Reinvent the Wheel – 100+ Links of Design Elements and Resources


Have you ever thought that every day, while you are busy doing your work, there are a lot of people doing almost the same thing as you? And they are releasing it. For free. And sometimes we just forget all this stuff and lose a lot of time doing things that just didn’t need to be done. Someone else has done it for us. Why should you start from scratch if you can get some cool things and just make them better? So, this is a post with a lot of links to resources and comments about them.

6. 18 Wireframing, Mockup And Prototyping Tools To Plan Designs


Many beginners usually forget how important it is to plan your webdesign, sitemaps, draw flowcharts,wireframes before actually starting to design a functional and beautiful design. If paper and pen ain’t for you check out this article and find some useful tools for wireframing, mockuping and prototyping.

7. 20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates


Everyone of you has heard about HTML5 and CSS3. And you probably are cognizant with the features these two offer. However, you may be asking yourself – Is is time to change? Should I forget everything I know and dive into this new world? Well, actually you don’t have to. There a lot of tools that make that transition to new and better technologies safer and smoother. Frameworks are really helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point. This article will talk a little about frameworks and other tools, like generators and templates.

8. 10 Useful Tools For Cross-Browser Compatibility Check


Something that makes a website great  is when it is compatible in multiple browsers regardless of version. Technically this is referred to as cross-browser compatibility. This can be a struggle for developers throughout the creation of their websites. If a user cannot view your website properly, he will not blame the operating system or his browser, he will blame the website itself. In this article you will find ten useful tools that you can use for your cross-browser compatibility check.

Going Further

So you’re now cognizant with all the basic stuff and it’s time to go further. How to redesign a website, what’s UX and how, for instance, your typefaces will effect it? This section will take you into the next level and discuss things like responsive web, redesigning, preparing for a project etc.

1. Beauty vs. Function: On Redesigning


The thought of producing the best possible design, either from scratch or redesigning something, gives jitters to the heart of many designers. Even professionals in the field can’t quite balance beauty and function. In this article you’ll find things to take into consideration when planning a redesign.

2. A Brief Introduction to Web 3.0


For many, Web 2.0 is characterized mainly by the ability of users to share information quickly with others, which has been developed into the phenomenon that we call social media. From Twitter to Facebook to YouTube and to all sorts of other kinds of communities, Web 2.0 is all about sharing and seeing. Now if you recall or were around during what is now known as Web 1.0, information was put up on a website and that was it–the best way of sharing it was privately through e-mails and such. There was little to no communication and if you wanted information, you had to go to the source for it. Can you imagine such a harsh internet? Now with Web 2.0 on it’s way out, the obvious question is, what in the world is Web 3.0 going to be?

3. 15 Most Influential People in Web Design


The web design industry is continuously changing and there are many people who are setting the bar higher every day with their incredible work and contribution to the web design community. Here is a list of just a few of the people who are responsible for changing the meaning of web design with their awesome work and concepts.

4. Preparing For a Web Design Project


There are several stages during the process of a web design project, and every stage is important to achieve a positive end result. In order to proceed to the research phase, you need to gather information and know what the project is about, which technology is required, the target audience, goals, content, etc. Every professional designer or developer work in different ways, however, this article’s goal is to give you good insights about how you can prepare and deal with some practical aspects of a web design project.

5. 4 Reasons Why Designers and Developers Should Learn to Write


If you are using the internet to gather and share information you really must learn this secret. What is the secret, you ask? The secret is that everyone should learn how to write in order to advance well. The days of people who focus only on one skill is numbered. Slowly, and steadily, a rise of designers, photographers, developers, and anyone who knows what a blog is are starting to write. This will be harsh for people whose desire is to focus only on their trade. People in the online community will soon eradicate specialists, the internet will be filled with Jack-of-all-trades and if you are not one you won’t get noticed. Learn why it’s good to master writing skills and how to do that.

6. Redesign Process: Taking Small Steps for a Better Website


This is an experimental article, where you will see whole redesigning process behind the scenes and read different way of thinking. In this review you will be leaded through necessary steps needed to get successful redesign.

7. A 5-Step Checklist for Mobile Website Designs


As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren’t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. This article will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website.

November 30 2011


Mouthwatering Collection Of jQuery Plugins And CSS3 Tricks

I’m sure that at one point or another you were designing a website and thought it could use a little something extra. That bit of something that adds extra functionality or enhances what it already has, making it not only easier for the user to receive the information they seek, but also present it in a neat package.

In no particular order, I give you a handpicked collection of jQuery plugins and some CSS3 tricks to top it off. Surely, with these in your designer arsenal, your creations will stand out more than ever before.


1. Fly-out menu

Excellent when using enlarged text for emphasis along with visual content.

2. Grid portfolio

A very elegant way of displaying items with the possibility of quickly previewing the content.
Suggestion: use with other resizing elements so that the user can see them rearrange.

3. Slide out contextual tips

Expanding tool tips with a smooth animation, revealing extra content only when the user wants it.
Suggestion: use with images that display several products (e.g. furniture) or when explaining the highlights of a design in your portfolio.

4. Quicksand – reorder and filter

Organise and reorder items to make it easier to find exactly what you need. Click once and just watch everything slide into place.

5. Sunday morning – translation plugin

A little old, but still awesome. It adds a simple and appealing way of translating a website or just parts of it.

6. jVectorMap

Interactive map with the possibility of expanding for other uses. Includes the world map, US, Europe and Germany.

7. Shuffle letters effect

An interesting effect that can be added to make text elements more eye-catching. Basically, it shows random characters as it reveals the actual text.
Suggestion: use sparingly so as not to make everything confusing.

8. Mosaiqy – picture shuffle

Display pictures in a simple grid that shuffles the elements in a Rubik’s cube fashion.

9. Sponsor wall flip

Although the title says “sponsor wall flip”, that’s just one of the many uses for this plugin. Show visual elements and put bite-sized information on the back.
Note: contains a little PHP.

10. Colourful jQuery clock

Add a colourful and modern clock to your design or perhaps even adapt it into a countdown for when launching a new website!

11. MopTip2

MopTip2 is a plugin that lets you add customizable tooltips to various elements. The tooltips can close automatically or be manually closed and they may also display images.

12. Grumble

Another tooltip plugin with the added bonus of being able to use virtually any CSS styles and transform them into whatever you may want.

13. jQuery Timelnr

Timelnr is a stylish timeline gallery with the option of placing it horizontally or vertically, and having it play automatically.

14. Flexible nav

By just marking certain elements in the HTML, this plugin will automatically create a navigation menu for you, acting like small bookmarks placed neatly on the side of the window.

15. Deck – HTML presentations

Ever thought PowerPoint or Keynote presentations were cumbersome? Then look no further! With Deck you can create online HTML presentations with a multitude of uses, perhaps enhancing an e-learning product.

16. Apple-like Retina effect

Enhance your content by letting users see the finer details with this Retina-like plugin.

17. jQuery pageSlide

Simple and effective, pageSlide reveals information by pushing the entire page to the side, thus not disrupting the positions of other elements.
Suggestion: it could be used to hide a vertical navigation, leaving room for full-page content.

18. jqFancyTransitions

A simple and sleek gallery with strip transitions and several formats.

19. Panning slideshow

A more interesting slideshow which pieces together the slides and pans through them with a slightly elastic effect.
Suggestion: given the effect, the slides could actually be parts of one big image for something more special.

20. jqZoom

Similar to the Retina plugin, jqZoom can be customized in more ways and has more zooming options, such as drag-zoom or through simple mouse-over.

21. 3D tag cloud

Add a little creativity to your tag cloud by turning it into a tag sphere! Just click and drag to rotate it and use the mouse wheel to zoom in and out. The plugin simply transforms all divs that have the class “tags” and contain an unordered list with links inside.
Suggestion: since all it needs is a div, why not be creative and apply it to a navigation?

22. JEffects

JEffects is a plugin containing more effects that can be applied to various elements within your website. For instance, it can be applied to input fields to create a very pleasant effect.
Note: not free.

23. PhotoShelf

PhotoShelf is an elegant gallery that allows you to scroll through a collection of images and zoom in on portions of the selected image. It can also add separators in the stack to organise your items.
Note: not free.

24. Grid accordion

A double accordion, if you will. It smoothly expands to an easier to read width and makes room for subcategories, also displayed inside an accordion.

25. Latest tweets tooltip

A very interesting plugin that lets you display the latest tweets about a certain topic inside a resizeable tooltip.

Bonus: a few CSS tricks

1. CSS3 Transitions, Transforms and Animations

Everything you wanted to know about CSS3, plus some tutorials on how to create some nifty enhancements.
Note: some tutorials contain some JavaScript.

2. Pure CSS Accordion

As the title implies, this simple but versatile effect is made with pure CSS transitions, taking advantage of anchors.

3. OS X dock

Create an OS X dock with CSS3 properties, including reflections to make your design stand out.

4. CSS media query

Learn how to hide and display elements according to the size of the screen. A step towards responsive web design.

5. CSS3 multi column

With just one line of code you can split a text container into columns, lending itself nicely to dynamic content.

Sponsored post

April 27 2011


How To Build Your Facebook Fan Page The Smart Way

Creating a Facebook fan page is easy, but just creating a fan page is not enough. If you’re looking for the Facebook Page to work for you or your business you need to create a page that not only provide users with information but also gives them an opportunity connect directly with the brand or business.

Social media can be related to storytelling which is one of the oldest forms of word of mouth communication and we can say Facebook marketing works on a similar principle. So let get started with some smart tips that will help you build your Facebook page.

1. Fill in Complete Profile Details

Facebook Page Profile Details

Yea, the first step begins with this, as many fan page admins often ignore filling in the basic details. The information tab is where users will find all your basic information about the different services you provide and easily get in touch with you. So fill in all details like your website url, email, services you provide, description about your company and also upload a good profile image.

Looking for creative way designing profile image check the links below

2. Create Custom Landing Page

Custom Landing Page Facebook

Almost everyone with a Fan Page uses a custom landing page. It helps your brand make a better impression by making you look more professional and also conveying an effective message to the user about how they will benefit from this page which in turn converts more users into fans. Make sure your message conveys how they can benefit from liking your page or brand.

Creating a custom landing page is simple, I have already written a tutorial on how you can make a custom landing page on 1stWebDesigner you can find it here.

3. Suggesting Your Fan Page

Suggest To FriendsFacebook removed the feature “Suggest To Friends” for page members after their new layout went live. It’s now only available to the administrator making it difficult to get more fans. Even if you use the “Suggest To Friend” feature as an administrator your friends are not going to get a direct notification, making things more difficult for you, but there are still smart ways to overcome this. Check out some ways that can you can still use to grow your fans.

Status Updates

Using the status update feature is a smart way of suggesting your Facebook page, as they will see this update directly on their wall which will make it more effective than the conventional suggest feature. Moreover you can get help from your friends to promote your fan page by getting them to make a quick update about your fan page. Also you can use the tagging feature to tag your fan page in your status updates it also works well.

Get Help From Static FBML

As I was searching through the web on making “Suggest To Friend” feature work on the fan page I came across a good tutorial which uses Static FBML to create a tab on your page from where all the members of the page can use the “Suggest To Friend” Feature.

It’s a simple nine Step tutorial which you can find by clicking the link below.

Note: You will only able to use this feature if you already have installed static FBML on your page.

Using Email

Email is another way to promote your fan page. If you have a large RSS subscriber base you can send them an email telling them to join you on your Facebook page. The other thing you can do is use your fan page link in the Email signature, as it will also have a positive impact in the growth of fan base for sure.

4. User Engagement

Image Credit

Just having fans on your Facebook Page is not enough, there must be constant interaction with the fans to make your fan page a success. Users aren’t always interested in the information you provide on your page alone, an update on your fan page should be crafted in such a way that it not only provides information, but also engages your users to connect with that update.

Basic Tips For User Engagement

  1. Post more interactive updates rather than just informative updates.
  2. Communicate with active users of the page.
  3. Include current happenings in your updates like seasonal, holiday theme, news and more.
  4. Ask for suggestions from users.
  5. Introduce some fun elements in your update
  6. Include some personal updates from you like what you’re reading and watching
  7. Post some updates/tips just for Facebook Fans Only
  8. Sometime include videos in your updates.
  9. Use images to convey your message
  10. Answer fan questions.

5. Facebook Fan Page Guidelines

Image Credit

As an administrator of a page there is some responsibility that you need to fulfill in order to manage your fan page effectively and stay out of  trouble with Facebook. As each fan page contains a link to “Report Page” which allows users to report any Facebook for their ill behavior.

So follow these simple steps to stay out of trouble.

  1. Never post abusive content.
  2. Don’t post illegal content updates.
  3. Don’t unnecessarily tag people in images and updates.
  4. Don’t completely automate your updates.
  5. Manage your frequency of update, don’t update too frequently.

Facebook Guidelines

6. Ideas for Growing your fans base

When I say growing your fan base, I don’t just mean increasing fans, but also improving the user interaction with the brands and getting help from them improving your brand presence online.

Below are useful things to consider for growing your fan page.

Time Management

Timing is really important, even online. To find out what timestamps give you maximum engagement with users try experimenting with different posting times and find out what works best for you.

Facebook Contest

Organizing a contest on Facebook just for fans is a good idea to grow your fan base. Also there are chances of getting your contest viral and your fan page getting some extra fans.

Reward User For Participation

Rewarding users for active participation is another way of getting constant interaction on your fan page. A simple reward like tagging or uploading their image  in your update with their contribution to the community can go a long way.

Analyze Your Engagement

With Facebook Insight you can get the necessary details about how your page is growing. You’ll get some good details about the impression and feedback your status updates have generated.

7. Useful Application to build your page

1. Fan Gate

Fan Gate - Facebook Application

Recently, Facebook discounted its famous Static FBML application and switched it with iFrames. There are many available applications, WildFire Fan Gate is the simplest to use if you want to create a default landing page. Just install Fan Gate Application on your fan page which will allow users to enter custom image and HTML code for both fan and non fan views making it easier for you to create a default landing page for Facebook.

2. Twitter

If you are more of a Twitter bird then the Twitter application is just right for you to increase your interaction level on your Facebook Page as it will connect your twitter account with your fan page, so any updates you make on your Twitter account will be available on your fan page.

3. PicBadges

 PicBadges - Facebook Application

Using badges of your brand on images is recently getting popular, with this application you can easily create a badge from your brand image and allow your fan to add a badge of your brand on their profile picture.

4. HootSuite

Many of you must have already been using Hootsuite for scheduling tweets for Twitter as it is a great tool for that. With Hootsuite you can not only update your Twitter status but also you can automate your Facebook Fan page status update. This will help you to maintain the flow of your updates.

Hope you find this post useful, if you have your own tips you want to share with us, please do so in the comment section, we would love to hear about them. Thanks

April 26 2011


Pros and Cons of Multitasking

IT individuals who have a desire to earn higher position in business are always willing to take on as many jobs as possible. It’s now quite common for almost anyone who works on a computer to have multiple windows open at the same time. Multitasking is a fairly common skill most freelancers have, or at the very least, think they have. If used correctly, all the technology we have at our finger tips can be streamlined and make the jobs easier.

Multitasking was introduced to make computers more productive, operating systems perform multiple tasks by scheduling processes that use different strategies which may or may not have profitable effects.  In this article I will provide you with some pros and cons of multitasking along with some suggestions to use it more effectively. I hope it will facilitate you in your work with multiple screens.

a) Pros of Multitasking

1. Keeps You Connected Along Work

Multitasking in computers facilitates staying connected with work. This is really helpful when your job requires keeping in touch with your colleagues. Using messenger services like MSN, yahoo or Skype are amongst some of the strongest and most common applications for this purpose.  These applications let you to stay connected without effecting your work. The multi programming strategy of the operating systems enables those programs to run silently on the PC until it needs an external input and doesn’t disturb the performance of other programs running at the same time. This strategy made it a big advantage for those who have to reside online while working.

2. Collection of Information from Multiple Sources

Multitasking has made it possible to browse information from multiple sites simultaneously. One of the key things to keep in mind when surfing multiple sites at the same time is their responsiveness, and how long they take to load. If the site is unresponsive and the buffer is taking a long time it will probably be better to spend your time trying to find a site that has the same information but loads quicker rather than waiting. The opening of multiple sites with heavier weight may cause the PC to hang. Browsing websites may also be done for entertainment purposes during work hours to take a break from your main duties, but make sure that the site you’re on doesn’t put a heavy load on your server and lower your internet speed.

3. Saves Time

Multitasking saves time by making its users capable of working on multiple programs at the same time. The time slicing strategy of the operating system is the tremendous strategy by which several programs are allowed to execute simultaneously. This helps the processor to execute several programs parallel without wasting time. Thus it saves time by giving the IT individual an opportunity to open and work on multiple screens all together. The productivity in many fields has been increased due to multitasking.

4. Keeps You Updated

It allows you to stay connected through messenger and lets you get information from multiple resources. You will always remain up to date and informed about the trends at work because of multitasking. This feature of an operating system cannot be neglected because without multitasking the internet would not have become ubiquitous and we wouldn’t be able to easily communicate with people around the world. Without multitasking the PC might still be working as a calculating device or performing specific tasks in agencies.

5. Keeps You Awake

While uploading documents or waiting for a file to download, you can enjoy reading digital magazines or newspapers which will keep you awake during work. Some people are used to refreshing themselves by playing online games and listening music. This is the blessing of multitasking by which you can get refreshed or enjoy reading during work hours, specially when you get bored after working for hours on a single project and you cannot get a rest without completing your job.

b) Cons of Multitasking

1. Distraction from Prior Work

Besides having its advantages, sometimes it has a negative impact on work. Multitasking enables you to use many programs that might divert your focus from work. Using services that allow us to communicate with friends during work and playing too many games online are some of the things that have drastic consequences on our performance. The distractions from our main task or priority might lead us towards failure because in some fields concentration is the most important thing.

2. Reduction in Overall Performance

Multitasking may not only cause reduction in the human performance but also in machine performance. Computers can execute several programs at the same time but running too many programs slows down its speed and performance. Apart from parallel running of programs, they still need the same processor for execution which can be optimized because of multitasking strategies but cannot overcome the problem of processor sharing completely. The distraction of human mind from work decreases the human performance in some cases. It is important to understand the limitations of this trait of computers to get the best results.

3. Preemptions

Pre-emption is the context switch that happens when the ongoing task is interrupted by the other task. This is really irritating when you are working on a very important project with a critical deadline. These interruptions are not only major distractions but also a waste of time. Pre-emptions happen because at certain times every program will need to make use of the resources available. This is a technique to schedule programs in multitasking but is a real bother when the execution of the ongoing program is necessary for the IT worker.

4. Development and Designing Suffers

In designing and development multitasking is helpful in the browsing of data from the internet but it should be done before the coding starts because the tools and platforms used for coding are very heavy and require more resources and memory. Multitasking along with programming produces drastic results in the form of wasted data or slow processor performance. Designing and development also requires attention to detail and getting distracted by the use of multiple programs during coding can prove to be very frustrating when you’re trying to figure out why your code won’t work.

5. Not a Good Idea for Article or Content Writers

The above point is valid for article and content writing as well since employees of this field also entail deliberation like in the field of development. Although it is inevitable to search for data from multiple resources but the research should be done in advance so that it will not affect the writing of editorial.

c) Using Multitasking Fruitfully

1. Manage Prior Work

Multitasking can be made profitable by setting priorities and proper management of work. The most important work should be kept uninfluenced by multitasking. The research work that is unavoidable should be performed in advance. Only programs like messengers should be kept online because it does not affect performance unless it is used for unnecessary chatting during work. It will also keep you connected without disturbing you from work when its status is set to busy.

Use Multiple Resources of Lighter Weight

Multitasking can be very beneficial if used appropriately. If you want to surf then surf the sites that are lighter so the buffer does not take too much time in opening them. Sites for video surfing should be avoided during work.

Do Not Use Social Media During Work

Social communities are very common nowadays. The advantages of these sites are countless but their usage at work has many disadvantages. Not only are you bound to be active on the site, but these sites are heavier to retrieve. Social communities are meant to provide entertainment which is not required at work.

That last tip is the most effective tip to increase your productivity :) Stay away from Social Media. What are your tips to increase the efficiency of multitasking?

April 21 2011


April 16 2011


10 Secrets to Be a Better Freelancer

The struggle in freelancing is quite far from the competition of regular businesses. The word “freelancer” was first used to describe a “medieval mercenary warrior” to point out that that lancer does not work under any lord. An out-worker has to experience as much contenders as there are drops in the sea.

In order to leave a mark in freelancing, one has to fight with a countless amount of people from different regions and work cultures. In this situation, a freelancer does not even know about how he can get over his opponent. To spot the imprint of a lancer’s matchlessness, one has to keep mounting his spirit high and has to set his own distinguish rules of work because only he is the boss of himself. There are plenty of ways showed by the rulers of this industry, on the basis of which I gathered points which in my opinion are necessary to identify and market the uniqueness of one’s freelance business.

1. Determine Your Strength

Every person has some skills which help them throughout their professional life. In order to be successful in this field you have to know where your mind is set. If you enjoy your work the outcome will always be better as opposed to working just for a paycheck. By realizing your strengths and doing what you really want, you can get the best results in terms of productivity. The question that naturally arises is “how do I identify my strength?” You can discover your strengths through:

  • Impulsive reactions of brain to find out the area where it can process efficiently.
  • Desired field in which you found yourself excited and craving for more.
  • Stimulation of mind for learning
  • Work that leaves you feeling energized

2. Cope Up With Your Weakness

To become successful in your line of freelance business you cannot neglect or ignore your weaknesses. Nobody can improve in any career without accepting, and knowing, their flaws. Pretending that you are free of blunders is the worst thing and will potentially ruin your career. Hiding your flaws is not a solution; you cannot get away from them. Identifying your weakness and acknowledging it is the ultimate solution. To cope with your weaknesses you should not forget:

  • To look at your work with a critical eye
  • To recognize, admit and fight with your gaffes
  • To stay attentive and avoid repeating past mistakes

3. Boost Self-Confidence

Confidence is a key strength everyone must have to achieve success. Confidence enables a person to conquer anything in this world. Self assessment is necessary to know what the individual has done and what he is required to do. This will give a person a focused view of his/her career and motivate him to move one step up in his freelance work since there is no one else to evaluate him. There is no particular way to boost self-confidence; this is only motivation and determination which will help freelancers in moving forward and enhancing confidence. So self-possession can be increased by:

  • Daily self assessment.
  • Challenging yourself step by step.
  • Getting out of your comfort zone.

4. Identify Client’s Demands

For freelancers, it is very important to be up to date with their customers demands. This can be done by knowing their target market and what they like and don’t like. Knowledge about red-hot topics of the relevant field plays a vital role in dealing with clients’ demands. This is because people want fresh ideas and love ground-breaking work. If you want to be unique and yearn to reach a milestone, then you have to keep following your customer’s demand without sacrificing work quality. Do:

  • Know what they want by feedback.
  • Provide what they need.
    • if it is clear that what they need is risky, or goes against the whole world, tell your client. This might save them too.

5. Keep Track Of Appreciations

A word of appreciation is like gas to a car in this business. Since freelancers don’t have anyone who analyzes and evaluates their performance, this positive reception can be obtained through client feedback. In this business, always try to get as much feedback as you can. Always remember that feedback is just an approval of work, never get overwhelmed with joy from it otherwise you will fall off of your path. This appreciation will also assist you in finding your “right track”. Tracking of appreciation will enable you to find out the right position in freelance business.

6. Give Positive Response To Criticism

Criticism is another form of feedback which lets you know whether the work has been accepted or not. Never take criticism negatively because this will lead to great frustration and stress. Criticisms will help you analyze the likes and dislikes of your clients. Apart from your knowledge of your weak points, criticism from your clients gives you a broader view of your work. Responding positively to criticism is like overcoming your weakness which will help you stand out amongst your competitors. This is the strongest way to stand out in the field of freelancing.

7. Keep Learning From Mistakes

Mistakes is the point where everyone loses confidence and might lose spirit also. There is no one on Earth who is perfect, even machines err. But coping smartly with mistakes will make you stronger. Mistakes should be treated as guide stones, telling you which way to go next time. The only thing which is necessary is to be vigilant. Mistakes are not a problem unless they are repeated. If you want to get noticed in freelancing, try and:

  • Prepare for the worst but do your best.
  • Not lose strength from blunders and keep the spirit high.
  • Learn from mistakes and do not repeat.
  • Go back to point 2 and know your weakness.

8. Be Aware Of New Trends

Trends change in a blink of an eye. To stay in the race, you have to set your eyes on the trends so that you are up to date. You can’t possibly beat several hundred competitors without knowing what’s happening in the world. This is unlike a full-time job where an employee does not need to know the trends; most office employees just do what the boss says. In freelancing, being up to date keeps you alive in the market.

9. Say “Yes” To Challenges

If you want to score a top position in the competition then embrace challenges with a happy face. This is because every time you want to provide the best for your client, you will come to realize that you are facing new challenges. Triumph can only be achieved by proving yourself in something that has not been attained by someone else before, or something you haven’t dared tried yet. You might get a good position in the market by constantly giving your best work, but this is not enough to achieve a remarkable feat. To stand out amongst your competitors, you have to come forward from the regular competition and do something different.

10. Never Forget Your Competitors

This is the most important point of all for a winning toss. Always keep your eyes open and stay informed about your competitors because they are also in the same race. In order to beat the others, you have to know their potency and limitations. Without knowing the traits of your opponent you cannot overcome their position. This will also help you learn. It is the trait of real conquerors that they capture knowledge regardless of the source as if it belongs to them.

April 15 2011


How to Use Gmail Like a Pro – Smart Tips and Tricks

Knowing your way through Gmail is a good way to increase work productivity, that’s why I wrote this to give you an idea on how extensible and flexible Gmail is. After reading this you will have sufficient knowledge of Gmail and your e-mail management will surely sky-rocket with efficiency.

There is a stereotype between e-mail users which states that you can tell what kind a person is by just looking at his/her e-mail. Having a Yahoo! mail account suggests a person is just a regular internet user; Gmail users are for more technical people who are very internet savvy. Then there are those with custom e-mail for webmasters/website owners, these people make others’ jaw drop because it’s cool. Having said that, I’ll focus on setting up and optimizing Gmail . If you’re an Oatmeal fan, what comes to mind? This.

Problems Encountered (for people with rudimentary setup)

Well, not really a problem but the targeted ads creep me out. I was having a conversation with someone about an accident that just occurred, and the next moment I saw the ads refresh and bam, there’s an advertisement about accidents and insurance. The ads read my messages! I find this creepy, really.

For basic setup, the most common problem people who receive tons of messages encounter is that all the messages are kept in the inbox, and it’s easier to miss important messages. Another one is sending messages to multiple contacts, the time will come when people will get tired of typing seven names/addresses…solution? Create groups.

Another problem I encountered, which is a little embarrassing on my part, is sending mass e-mail without using Bcc or Cc. I sent an e-mail to seven applicant writers, exposing each person’s e-mail address, and they knew there were seven of them. Facepalm.

To address the following problems, and help you save face and time, take a little while to read through and set-up your Gmail. It pays!

Smart E-mail Setup = Better Time and Work Management

Telling your clients and other contacts that you reply as soon as you read their e-mail is a big no-no. There are two ways of how people “condition” their contacts into thinking this. First is by telling them you will, and secondly by doing it. Time is fleeting, don’t waste it on e-mail. Having a specific time of the day to check your e-mail and reply is a very good way to increase productivity and tell people when to expect your reply.

What most effective freelancers do with their e-mail is they only check it twice a day, before starting work and before day’s end. Keeping your mailbox open the whole day is not a good idea, it is a temptation. Set aside at least 15 minutes in the morning before starting work, check again during lunch time, and finally at day’s end. This is a win-win strategy, once you’ve conditioned people about what time of the day you usually check your mailbox you then get to work more without worrying about missing something.


Use the “policy” and add the following to your signature:

Q: Why is this email three sentences or less?

This is to help you save time, not really mandatory, but more of a “personal policy” as they say. There is beauty in short messages, it helps you save time. The shorter, the better. Don’t make e-mail management your full-time job. It is important to include the quoted text above to your signature to let them know what’s up with your short responses.

When it comes to signatures, do: keep it short and professional, and include necessary contact information. Do not: for the love of Batman please don’t add animated GIFs (especially glittery ones), and never include quotations (unless it is highly relevant).

Then again, priorities tend to get mixed up when it comes to e-mail. Keeping all messages in your inbox is not a good thing if you receive 20 to 40 e-mails in a day.

Accounts and Contacts

Priority Inbox

A solution for an overflowing inbox, to avoid missing the most important e-mail, is the  Priority Inbox which learns through your activities who among your contacts are high priority. If someone is labeled high priority, messages are filtered so that you can see them as soon as you open your Priority Inbox. It is an intelligent piece of technology made specifically for users who receive massive amounts of e-mail. This, to a degree, eliminates the human error of missing important messages.


To enable Priority Inbox, go to Mail Settings, then go to Priority Inbox tab and select “Show Priority Inbox” and Save Changes. The page will reload and an information window will appear.

Connecting Multiple Accounts

For people like me who have several e-mail addresses that you can’t just leave because of the countless subscriptions, one for business and one for personal, there’s an easy fix. Connecting multiple accounts and auto-forwarding them to a “central” account does the trick.


Go to Mail Settings, then under Forwarding and POP/IMAP click “Add a forwarding address” and enter the e-mail address. A confirmation code/message will be sent to that address that you need to click in order to verify this request.

I have four e-mail addresses, one I use for registering on websites that I don’t quite trust yet, one for my personal contacts and subscriptions, one for work, and the last one for payments. I only open one mailbox but I can still send using my other IDs.


Go to Mail Settings, under Accounts and Import click “Send mail from another address” and a window will appear, enter your name and the e-mail address you want to use. Then the usual verification process will follow. After successfully doing this, compose a new message and you will have the option to select which e-mail address to use when replying, no need to open that mailbox and reply using that one. In this case, I have four addresses I can use to reply to people.


Sooner or later you will notice that there are some messages that you’d rather not get but it’s too tedious to unsubscribe to. Solution? Filters. Setting up filters also gives you a clean inbox. You can filter messages and send them directly to a folder you want to.

Adding Filters


Go to Mail Settings, under Filters tab click “Create a new filter” and a form will appear.


You can be as specific as you want when specifying the criteria, in this case I used a wildcard. Whenever I receive messages from any @1stwebdesigner…


…the message instantly skips the Inbox and heads directly to the folder I created named “1stWD”. To apply this filter to past conversations, just click “Also apply…” and finally, Create Filter.

Creating Groups

To help save time especially when sending an e-mail to several recipients often.


Go to Contacts, under the left sidebar you will see “New Group…” click it and enter your desired name for that group. Next is select that Group and click Add to “<group name>”. The next time you send a mass e-mail, you just have to write down the name of the group. Neat, eh?

Tips to Make Life Easier

Desktop Notifications

This may sound hypocritical, since I said earlier to not keep your mailbox open all day, but you can also set desktop notifications (like when someone goes online on IMs) for every new e-mail, or only for important messages are received.


Go to Mail Settings, under General tab you will see “Desktop Notifications,” just select “Chat notifications on” and choose between “New mail notifications” or “Important mail notifications.” The downside here is you won’t get notified of new e-mail if Gmail is closed. Gmail Notifier keeps you updated without logging in.


Another graceful addition to your Gmail knowledge is knowing the shortcuts. You aren’t a pro if you don’t know them!


Again, go to Mail Settings and under General, select “Keyboard shortcuts on” and go HERE for the complete list of shortcuts.

Gmail Saves

It literally does, it scans your text for the word “attachment” or “attached” and verifies if you’ve really attached something. If not, then you are notified about this, saving yourself from embarrassment.


Gmail also shows you the IP addresses from which your mailbox was accessed from, giving you a chance of catching the person (boy/girlfriend?) spying on your inbox.


Clicking “Details” will open a window with 10 of the IP addresses that accessed your mailbox. The coolest part? Gmail warns you when someone from a foreign country accessed your mailbox, prompting you to change passwords ASAP. Through this, you can also disconnect all sessions that are open, very useful if you forgot to log out on another workstation.

While Away on Vacation

There are two ways to tell people you’re on vacation without telling them before it actually happens, to avoid boasting or something.


Go to Mail Settings, under the General tab look for Vacation Responder and turn it on. The message you type will be automatically sent within the dates you set for  your vacation. Vacation is vacation! I know that there are few nasty employers who approve of your vacation but still pester you about every day of your holidays. Solution? Ignore them or use auto-responder.

You can also grant someone access to your account, a secretary or someone close to do your bidding.


Go to Mail Settings, under Accounts and Import click on “Add another account” and follow the setup wizard. Now you can actually rest without having to worry about your client or boss nagging at you when you return.

For a secure connection, use HTTPS.


Go to Mail Settings, under general look for Browser connection.

You can attach files by drag and drop. You can also use Gmail for backup purposes if you don’t want to use Dropbox to save your documents.

Plugins, Extensions, and other Applications

Gmail Labs

If you are familiar with Google Labs, you will love Gmail Labs for it saves you more than anything else from embarrassment! To view the experimental features, go to Mail Settings and select Labs tab.

There are instances when some contacts share the same name, couple it with haste and you’ll end up sending your e-mail to the wrong person. Solution? Got the wrong Bob?


Then there will come a time when you got the name right, the message is not quite ready, but you sent it anyway. Do your self a favor and use Undo Send to save face.


You get the idea, there are lots of useful experimental features in Gmail Labs that you can use to have an easy, flowing, e-mail experience. Feel free to experiment!

PC and Mac Applications

Sparrow Mail App (Mac) –  “I am insanely pleased with Sparrow.” –  Stephen Fry, ’nuff said.

GeeMail (Mac/PC/Linux) –  Gmail desktop client, proven and tested for years now.

Firefox Add-ons

Integrated Gmail 2.6.17 –  this add-on lets you keep all Google services like Google Calendar, Google Reader, and others in one place. No more 10 tabs opened.

Webmail Notifier –  add-on that enables Firefox users to check several mailboxes with just one click.

Gmail Manager –  for people with multiple Gmail accounts, very simple application, minimalists will love this.

Gmail Ad Remover –  removes advertisements from Gmail (those creepy ads that know what your e-mail is about and uses them to show relevant ads).

Meeting Scheduler –  simple and perfect add-on to schedule meetings with people.

Gmail S/MIME –  safer conversations by sending and receiving encrypted e-mail.

Chrome Extensions

Google Mail Checker –  receive notifications through an icon on Chrome, opens inbox in one click.

Better Gmail –  gives users the option to clean Gmail’s interface by removing ads, footers, chat, or adding icons for specific file types (not just a clip), and others.

Minimalist for Gmail –  refer to name.

Remember The Milk –  manages tasks in Gmail effectively, automatically adds starred messages or labels.

Mailto:Gmail –  opens Gmail Compose window for Mailto: links on websites.

ActiveInbox for Chrome and Firefox –  one of the few super cool plugins to manage an out of control Gmail.

Now, there are tons of tips and tricks and applications that have been written and published online, and I bet you have your favorites too to share, why not make life easier for others and share them here?

April 07 2011


Blogging Like A Pro: Introduction To 10-Part Crash Course

If you are involved in the blogging world in any way you will know just how hard it is to find great tools to make your work process easier and more efficient. I’ve been blogging full-time for 2.5 years already and I’ve tried many approaches and tools. Going from a PC to a Mac I needed to find comparable tools and that proved challenging, it was like starting over in some regards. It’s hard to find those nifty little, and useful tools, but once you do, you can enjoy the whole blogging!

Many people do not look for ways to make their work easier and ways to be more productive because they are so used to that old-school way using the default blogging platform panel or using Google Docs. But hey – I say you can save a lot of time and become far more effective if you make use of today’s tools and have a good mindset. It’s not even just about choosing the right desktop blogging editor or choosing which management system to use; writing is an art. I did my homework and noticed a lot of interesting upcoming start ups are offering products that are great for finding information, writing posts,, managing information and reviewing it when you’re done. I am starting to blog seriously again and I invite you to join me on this journey!

At the beginning, I thought I will create one huge article covering all the tools I use and my experiences, but in the end I understood each process in writing is crucial so I’ll dedicate several articles to this topic.

Blogging Like A Pro Series Parts 1-10:

  1. The Writing Process: Getting Ready, Getting into the writing mood and how to avoid distractions
  2. Writing: Where To Write And Start Drafting?
  3. Find Article Ideas To Write About, Write Headlines
  4. Do Your Research: How and where to find content
  5. Blog Post Formatting, make it easy to read and scan, good examples
  6. Power of headlines, Dummy’s guide to copywriting
  7. Add Spice To Post – Get Feedback, Entertain Readers With New Approach
  8. Taking Blogging To The Next Level: Guest Writers & Management & Scheduling, Proofreading
  9. How To Find And Hire The Right People For Your Business
  10. Set Up Your Blog & Make Use Of Fresh Tools To Save Time

Well, now you have an overview about the upcoming pro blogging series. Today I will just explain in more detail what I intend to cover for each of the ten parts. I am looking forward to hear your feedback and suggestions beforehand so that I can provide even better and more valuable information for you! Explain your struggles with blogging and I will do my best to find a solution or just share my experiences with what I have found to work, or not work, as the case may be.

The Writing Process: Getting Ready, Getting into the writing mood and how to avoid distractions

This part will be all about how to start writing in the first place. I cannot stress enough how important your work environment and actual writing workflow is. In this age of information overload there is always something to distract you — maybe you have turned on Skype, use an auto email checker, Facebook, Twitter, news reader – you name it!

Patiently waiting for his Dinner, Ostend Belgium

With so many guest and full time writers working for 1stwebdesigner I have encountered many problems with time management. It’s no surprise, it’s super easy to get distracted. The industry has become very effective in getting your attention in no time. Get smart and effective yourself too!

That’s funny — you were here to learn how to write and here I am telling you now how to get ready to write? Foundations are super important so we will start small and work our way up over the course of this blogging series.

Writing: Where To Write And Start Drafting?

Ok, our work environment is ready, no distractions, our mood is fully optimistic and we want to start! You could hit the ground running right now and you’d get where you wanted to go…eventually. Wouldn’t it be more effective and faster to use a bicycle, bike or car instead? That’s what I’m going to teach you how to do…get where you want to go in less time.

Writing samples: Parker 75

Image by churl via Flickr

It may not sound too exciting and finding the most appropriate way and platform to write is not always easy or fast, but it’s fully worth the effort in the long run to try different ones and find one that you like. It’s not a bad approach to start writing right away using your favorite WYSIWYG blogging platform, Word or Google Docs. It’s not a bad approach, but we want better; instead of a bicycle we would love to be driving a car right?

You’ll get what’s promised – a new, shiny car just like you wanted. Don’t worry, both Windows and Mac users will be satisfied.

  • What are the cons of your current process and tools?
  • Why it’s useful to have a desktop blogging editor
  • Comparing online and offline solutions
  • Innovative writing tools and interesting solutions

Find Article Ideas To Write About and How to Keep Up with the Industry

Step 3 – we’re excited, we have the best writing platform and tools for us to write…what now?
You guessed it, one of the biggest challenges…what to actually write about? In this article I will teach you how to:

  • Be sure your topic is exciting not only for yourself but also for your readers
  • Know what topics are currently trendy and popular
  • Understand how to learn what other people struggle with and how to find a solution for them

I’ve even seen several blogs offering article ideas for people who struggle to find ones! How do you think they get those ideas? Well, of course they have experience and great interaction with their readers and because of this, people share ideas for articles they’d like to see through email, social networks, comments or old fashioned conversation. But what you can do to understand your community in the beginning?

I’ll share just a few ideas right now with you:

  • Use social networks as Twitter and search for questions people are having there. If there are problems people need solutions for or questions they need answered you can be sure that they’ve looked on forums and search engines for just those things. Do you have an almost unfair advantage by being able to find out what problems and questions people in your community need solved? You bet!
  • Stay open minded and engaged, always be looking for new article ideas as you’re reading news, talking with people, or communicating online.
  • Read the top blogs in your niche, stay up to date with the news each day, follow people who break stories and know their industry!

Do Your Research: How and where to find content to work with

Let’s say you have your article idea already, but you really don’t know how many people have written about it, which blogs have written about it or how long ago they wrote about it? If a similar topic has already been covered maybe you can take a different angle then previous writers have. You’ll find out and realize almost every topic has been written about already, but you need to make use of it, understand what’s been done before and how you can differentiate yourself and stand out.

You need to do your research. Now.

Human Blood Under Magnifier

Again this article won’t be just about doing research to help you write articles, it will also help you to do your market research. You have a new startup idea? How do you find your competitors or similar companies? You want to be sure your idea hasn’t been done before and you don’t want to repeat the same mistakes other companies may have, right?

Learn how to research your market, no matter if it’s for an article or  a startup, everybody need to do their research. Here I will cover how to make use of search engines effectively, a typical Google search or Delicious bookmark search won’t always be enough. Sometimes you’ll want to dig really deep. I’ll cover innovative search engines and effective ways to bookmark and save information so that you can find it easily when you need it.

Blog Post Writing, Formatting: Make it Easy to Read and Scan

I may have mentioned before that it’s really important to write an article outline before writing the article. Do your research and write down the main points you will cover in article. It will make the writing process much easier later on and help you keep your articles more organized.


As you write down your main points, you can work on good formatting! People are suffering from information overload so you have to fight for their attention, the best way to get it is to make your content easy to scan. Writing content that gets peoples attention is really an art which is hard to master, but with the right foundations, which I will give you here, you’ll be better informed than most  bloggers. Work to get that attention:

  • make use of good and related images
  • use bullet points
  • headings
  • interlink your content
  • enrich content with good typography and clear content structure.

You’ll also learn about good resources to learn typography and be able to analyze good examples that I’ve found!

Power of Headlines: The Dummy’s Guide to Copy Writing

I will explain the importance of headlines right now – most people won’t even read your article if it doesn’t catch their attention! Sounds scary right? The one line of text that makes up your headline can often be more important than content you worked on for several hours!

This section will be one of the most important as it will help you get both your content read and get your content indexed for search engines.

Writing for search engines or readers?

How to make the right decision? Both of them are important and naturally a reader is much more important than a search engine! However, search engines bring in the most traffic for almost every website, even for 1WD it brings more than 70% of all our traffic!

Ok, before you get too confused to give the right answer, I’ll give it to you – you don’t have to choose! You can write for both your readers and search engines at the same time…but it’s not always easy of course! That’s the reason I dedicated a whole article to this topic. Remember it’s not only the first headline that is important, all other sub headlines in an article are as important as the first!

And that’s where we’ll start the dummy’s guide to copywriting!

Add Spice To Post – Get Feedback, Entertain Readers With New Approach

Your article is finally ready to be published, you may be wondering what now? Is it finished and ready to be shown to the world? Well, yes, it is. But, and there is always a but – you’ve wrote an interesting article now how do you get feedback or a conversation going? That’s what separates a great article from a good article, the conversation that it starts. Of course it depends what you wrote about. In my experience, and from what I’ve seen, the articles that get the most attention and comments are the ones that have at least one of the following things:

  • Breaking story – news sites are getting huge attention just by being the first to announce some news
  • Controversial opinion – write an opinion piece about something popular. If you’re going to do this though, write a smart article, do your research and back up your opinion. If you write controversial articles just to get attention, you lose credibility.
  • New tools or sites no one knows about – this is new, it’s kind of related to breaking stories, but it’s all about just finding new and good solution for problem in your niche. People will be happy if offer fresh solutions to old problems rather than just writing a list of tools that other people have tried. A lot of useful new apps and websites are launching each day.
  • Basically it’s all about providing value – put enough energy and efforts into your article research and you’ll be rewarded. You’ll get what you paid for!
  • At the end I will also talk about unique and innovative social tools you can add to your blog to get extra attention,and more opportunities to interact with your readers. I was surprised how many I found, I bet you’ll notice 1WD using some of them in the very near future!
  • One extra tip – add question at the end of article to get more feedback! People want to be heard and if you invite them to share their opinion, they will!

Hands in the air - in concert

I will also cover tools like this, Apture for example is to keep readers glued to your site!

Taking Blogging To The Next Level: Guest Writers & Management & Scheduling, Proofreading

If you’re working alone and don’t ever dream about expanding, you can skip this article. If you are thinking about getting help and are open to guest writers you’ll need to work out some kind of management system – maybe at the beginning Skype and email communication may be a good solution, but it really isn’t. Skype can be a distraction, and not everyone has a reliable internet connection so sometimes even if you want to chat, you can’t. Emails rapidly become too clustered and important information and ideas disappear amongst the many email threads.

I want to offer better solutions to keep your team organized. Solutions and tools that I am using daily to take care of article scheduling, writing, and other aspects of 1WD. Growing a blogging business is not easy. It requires a lot of time management, multitasking and organization to take care of everything. This article will be for bloggers who want to grow, but don’t really know how. I’ve learned a lot of hard lessons along the way and have struggled with my time management a lot. I’ll share my experiences and show my current solutions which seem to be working, at least for now.

How To Find And Hire The Right People For Your Business

This is a really tough topic, because it can really make or break your business. I will focus on different hiring solutions including:

  • Making use of social networks to hire
  • Finding people from your reader base ( if you own a blog)
  • Traditional job boards (which ones to choose based on your preferences)
  • Innovative, interesting projects to find help

This is just the tip of the iceberg in regards to what I will cover in this article. This article will be equally useful to both employers and potential employees! Maybe you are not searching for a job in the right place, or you don’t make good use of your already established contacts or simply don’t notice job offers on sites you love already! For example 1WD is also searching for smart and dedicated people to write for us, why don’t you join the team? Many people just don’t believe in themselves in the first place, but if you aim high, you always will get something better than you expected!

Smileys - 1

And now back to hiring process – I’ll help you determine what you really need for your business – freelancer, part timer or full timer! Every one of these choices has pros and cons, let’s find out what they are so you can understand what you need for your business!

Set Up Your Blog and Make Use of Fresh Tools to Save Time

Ah, this is classic – but I wanted to write this basic foundation article to show and explain how to get started! I did this article only because I think the way you should start is changing. WordPress isn’t always the best choice and there are many great new tools to make use of when you get started. This startup boom is changing the way we do things..then why not do them better right from beginning?

I won’t go deep into explaining how to set up your blog, instead I will show what new services and tools you should be aware and make use of. For example, did you know about Jetpack, a WordPress plugin bundle giving you easy installation for the most common features you might need for a fresh WordPress blog?
Basically this article will be a little goldmine for everybody – I want to make you think, and show how you can do things, differently from now on. I like how the blogging world is slowly changing and I want to show you a bit of it.



What do you think about this upcoming series? I would love to hear your feedback before I write these articles so I can understand better your needs and wants! Let me know! I am very open to, and would appreciate, any and all feedback! Are you ready to become a pro blogger?

March 30 2011


Twitter Marketing Guide: Bigger, Longer & Uncut

Let’s presume you’re already familiar with the basics of Twitter and your current goal is to grow your follower count. Want to learn advanced techniques?

Twitter Marketing Guide

Written by: Tim Soulo

Bigger Longer & Uncut.

Hi, my name is Tim and I’m pretty sure that you’ve landed here right from your Twitter account. Ok, you got me this time as the above claim does not apply to everyone, but I’m confident that this post is currently hot on Twitter! How do I know that while writing the very first paragraph? C’mon, it’s gonna
be a Twitter Guide – I’ll just use the tips below to make it go viral :)

Twitter Basics Part 1: Creating a Twitter Account (The Right Way)

Let’s presume you’re already familiar with
the basics of Twitter and your current goal is to grow your
follower count. Moreover you need those
dedicated followers that read your
tweets and, what’s more important,
retweet them to their own followers
making your content spread.
Just in case you’re not sure what I mean by basics, here’s a quick refresher.
Username: The very first dilemma that most business owners face while creating a Twitter account is whether to use a personal name or a business name. There are pros and cons with both, but I think that having brand name is mostly beneficial for big established brands as people already know them and are willing to follow.
Recently I did some consulting for a website builder company and offered them to switch from a branded account to a personal account of their founder and CEO, as people are most likely to follow an interesting person, who they expect to tweet valuable things, rather than following a ‘website builder’, which they assume will most likely tweet nothing but spam.
Your Twitter username should be unique and memorable. Remember that people will have to type it in order to mention you – don’t make them type too much.
Here’s an extra tip from Hubspot:
(though this does not seem to apply to @1stwebdesigner lol)
Bio: There are only 160 characters which you have to fill in to tell the Twitterverse about you, your company and/or what you’ll be tweeting about. Your Bio is used all around Twitter next to your profile picture and people READ the Bio section to decide whether to follow you or not. Anyone you follow will receive an e-mail with a recap of your profile including your Bio. Do you think they’ll be interested enough to follow you back?
My Bio is probably not the best, but I tried to make it stand out from the crowd. Best Bio practice is to briefly state who you are and what others will get if they follow you.
I often ask myself two questions before following someone:
  1. Who is that person?
  2. How can they be useful to me?
Some people go really far with this incentive tip and use their Bio to suggest a Free E-Book to each new follower, but this sounds kind of desperate to me.
Image: People on Twitter mostly use a personal photo as their avatar. I think this is because Twitter is a powerful personal branding tool and you might want your followers to recognize you.
My vote goes for consistency – if there’s a non-photo avatar that you use around the web (forums, comments, guest posts), I think you should use it on Twitter too so that people who have seen your avatar around the web recognize you.
Web Link: Why would you miss an opportunity to promote your website in your Twitter profile? And, besides, here’s what Hubspot says about the impact of the web link on your follower count:
Background: You can easily create a customized Twitter background, but is it worth your time and efforts? First of all your Twitter account will become more attractive – but that’s pretty obvious, right? What’s not that obvious is that with a well designed background you have a chance of appearing in one of those numerous Twitter background showcases. Thousands of people will see your creative profileand they might become your new followers.

Twitter Basics Part 2: Following the Right People

Now, that your Twitter profile is complete and following all the best practices, it’s time to follow some people. Following the ‘right people” will not only keep you up to date with all the latest news in your niche and help you to network, but it will also affect the way Twitter uses your profile in its recommendation engine. Every time you follow someone, you are being associated with them in some way. With the automatic recommendation engine Twitter uses, I have to assume you’d prefer to be associated with people who you share something in common with. It might be the place you live, the field you work in, or a circle of mutual friends and acquaintances.
Follow the people you know: this is the number one tip. You might be reading some blogs or websites on the topic that you are interested in. Most of the authors mention their Twitter profile at the end of the post. Follow them as they might tweet lots of cool stuff.
Twitter Search: Each term you search on Twitter is now being split into four independent searches: Tweets, Tweets with links, Tweets near you and people. There’s even more than that – check this awesome guide by SEJ to become a Twitter search ninja.
Twitter lists: Twitter List is Twitter’s way of allowing users to group profiles (and their tweets) together – you can check the lists that people you follow are listed in. You can also check if you are being listed and see who you are being listed with.
Twitter Directories: There are places where Twitter accounts are neatly organized and categorized. To name a few: Listorious, WeFollow, JustTweetIt, TweetFind. Browse them and I’m sure you’ll find some interesting people to follow. By the way, why not add yourself there?
Custom lists: Bloggers always used to create lists: “10 Best Books on Marketing”, “20 Coolest Design Blogs”, “15 Social Bookmarking Sites” – you all know that sort of stuff. The new trend is top people in each industry to follow on Twitter: designers, bloggers, marketers, seo experts, social media gurus and so on. Do a couple of Google searches for those lists as they may suggest some really cool people to follow. If you can’t find a list on your niche, you should definitely create one and maybe you’ll get some new followers just for being an author of that list.
Online Tools: There is an enormous amount of Twitter tools to help you find and manage followers. I don’t want to promote any of them, so just try them all to see which one works best for you.
(Twitterverse by Brian Solis and JESS3)
Play around: As I’ve said before, Twitter has an awesome recommendation engine, so once you start playing around with Twitter you’ll get lots of recommendations. Definitely check out the powerful “Who To Follow” tool, which speaks for itself.

Advanced Twitter Tactics Part 1: Getting More Followers

I want you to check out an excellent study by Ian Lurie on the quality of Twitter followers. He started collecting data after some spammy guy who had 32,000 followers retweeted one of his posts. You might expect that a retweet by a person with such a huge following will grant your URL lots of clicks and further retweets. Well, what Ian got was only three clicks.
I won’t tell you the rest of the story, for it is too cool to be rewritten. Twitter power is not about the quantity of your followers, but about the quality of your, and your followers, content. In this part of my guide I will teach you how to gain quality followers.
Think: Yeah, that is my first tip. But I think it’s the most powerful one. Think of the way YOU follow new people and think how many of them eventually stay in your Twitter feed. Then do the same stuff that they did to get followed by you. If you ask me I mostly follow people who blog. When I see a smart post, I will do my best to find the author on Twitter, follow him and perhaps even communicate a bit. The second way I may follow people is when they @-mention me in their tweet. I will usually check the profile of that person and if it appeals to me – I’ll follow them.
Follow to get followers: This is the best known tactic to grow your follower count and it’s based on the newest psychological disorder called ISFBaG (I Should Follow Back Guilt). When you follow someone, they receive an e-mail notification and may follow you back. You can mass-follow people via Twitter interface, use some online tools or even create scripts, which will auto follow people, who tweet specific keywords.
Another study by Hubspot shows that your following to followers ratio dramatically affects your chances to get a follow back. So ideally you need to keep the number of people you follow lower than the number of your followers – this way you are more likely to get a follow back.
People might think that having a large number of followers will add credibility to their account. Well from now on they won’t be able to trick you! It’s easy to measure the credibility of a Twitter account by comparing the number of followers to the number of the lists.
Rand from SEOmoz has one listing per 7.6 followers ( 24,368 followers / 3,187 lists = 7.6).
If the ratio is more than 10 – that’s a signal that a person is a spammer who does a lot of mass-following.
Run a contest: People love contests, freebies – such events always attracts great attention. Classical contests go well on social networks, but if you can think of some extremely unique event, it may do wonders to your social presence. There is an interesting story, I would like to share (little NSFW) how Dutch porn star attracted a lot of people to follow her! She got around 15,000 followers within a couple of days since that claim, but you should think twice before running a contest like that. :)
Know who is sharing your content: Once you publish some content online try to track who is tweeting about it. You already know that those people appreciate your work, so it’s usually a matter of a “thank you” message to get a follow back from them.
Promote your Twitter account: That’s probably the most popular and most obvious advice, so I’ve left till last. Use your Twitter account URL everywhere you can: e-mail signatures, social media profiles, forum signatures, blog comments, business cards etc. There’s no rocket science here, just use every opportunity you can to share your Twitter account.

Advanced Twitter Tactics Part 2: Building Relations

It’s cool to have a couple thousand followers, but do they care about you after all? You might have followed my tips to gain quality followers, but still it does not mean that they will interact with you and help you to spread your content. What you need is to build relationships with them so that they know who you are and read your updates.
Reward your followers: You can do that with a follow back or, alternatively, you can just thank them for following you in a reply or direct message. Just don’t spam everyone with those automatic Direct Messages which no one cares about. Try sending a personalized message with some information that the recipient may be interested in.
Retweet others: People on Twitter usually keep an eye on their retweets. So try retweeting someone else’s tweet and add a personal comment to it – this is a great way to get noticed and start communicating with people that you follow, and your own followers.
Public mentions: #FollowFriday or #ff is a nice occasion to show your appreciation to someone by publicly mentioning their account and providing a reason for others to follow them. However there is no need to wait till Friday to do that.
Twitter lists: When you add someone to a Twitter list, they won’t be notified about it, but they may find it out on their own sooner or later. Make respectful Twitter list names to show some appreciation to people you list there. I am really happy each time someone adds me to a marketing related list. (this was a call-to-action :) )
By following other people’s Twitter lists you can get some attention too, as people might check who else is following their lists.
Twitter list Ninja Tip #1: follow @listwatcher as it will send you a DM each time someone adds, removes you from their list, or changes their list. Being listed is a reason to get in touch and say thank you, ( or something else, if you were removed :) )
Twitter list Ninja Tip #2: learn how to automate your lists with Formulists online service.
Follow people who @mention you: This is a great way to show your appreciation for being mentioned and, besides, this will make a person to take a closer look at your profile and what you tweet about.
Twitter Favourites: Currently this feature is not widely used, but I think it can be considered as a form of appreciation too. Each tweet that you add to your Twitter favourites is saved in your profile under the “Favourites” tab. I doubt that the author of a tweet will ever see that, but others might find your favourites feed useful and that can be another reason to follow you.
TweetChats: It’s a regularly scheduled online event which is perfect for networking. For instance you can check #seochat – this is a search marketing chat which is held every week. If you fail to find a TweetChat on your topic, maybe you should launch one yourself.

Twitter Ninja Part 1: Getting Retweets

Eventually, the aim of every single tweet is to be noticed and get retweeted by others. If you think that your tweets get enough engagement, try measuring the CTR (Click Through Rate) of every link you tweet. This can be easily done with URL shortening service, just add a + at the end of any short URL and you’ll see the stats. In most cases you’ll notice that the engagement not as good as expected. So what can you do to improve it? Lets see…
Tweet metrics: Almost everything can be measured, including tweets. In his great study Rand Fishkin tried to calculate and improve the CTR of his tweets. This resulted in a few takeaways:
  • * the average CTR of a tweet is about 1.17% of the followers number;
  • * shorter tweets get a higher CTR;
  • * tweets on a topic that people expect from you get a higher CTR.
Ask for a retweet: A study by Dan Zarrella shows that you can easily increase your ReTweetability by simply asking your followers for a retweet. Only five letters can make a change – “PLS RT”
What to tweet: You already know that tweets on topics that people expect from you get a higher CTR. In addition to that, another study by Dan Zarrella reveals the fact that tweets about Twitter perform really well. (Remember I promised this post would be HOT on Twitter? :))
You can also use various bookmarking and news services to discover what’s hot and trending and tweet about it: StumbleUpon, Digg, Reddit, TweetMeme.
When to tweet: There are lots of statistics on this one which show different numbers, but in general the best time to get retweets in the US is 4 PM and the best day is Friday. So try to stick to these when scheduling your most important tweets.

Twitter Ninja Part 2: Miscellaneous Tips

Leverage your website: In case you have a website or blog, why not to use it to promote your Twitter account a bit? WordPress users can check this awesome selection of Twitter plugins and the rest can get inspired by the showcase of how people embed their twitter feed into their website design.
Use Hashtags: This feature is used to unite Tweets around a particular topic. I understand hashtags as a search tool. Instead of searching on Tweeter for “social media marketing” you can simply do a search for #smm or just click on a hashtag whenever you see it in someone’s tweet. This will list all the tweets that have a particular hashtag in it. So every time you add a hashtag to your tweet, it increases its chances to be found by random people.
Track Google SERP: You can easily get a daily Direct Message of your websites Google position using a twitter bot by TweetedRanks (free tool).
Get your website pages indexed faster: A recent experiment concluded that a tweet which gets 3 retweets or more will help in increasing the time and rate at which the tweeted page gets indexed.
HootSuite Hootlet: I must confess that HootSuite is a tool that dramatically improved my tweeting experience. Specifically I am obsessed with their bookmarklet tool. You just drag it to your bookmarks and when you want to share the post on Twitter you just click the bookmarklet and the message window pops up. What’s more important, you can schedule your tweets right from this Hootlet window. This is the best Twitter tool I’ve ever used.
This is it! The end of my Twitter Marketing guide, but definitely not the end of the creative ideas and ways to use Twitter to market yourself, your content, your company or your products.
I hope you all enjoyed it and I’m looking forward to reading your comments. And don’t forget that you can follow me (@timsoulo) on Twitter.
Article written by Tim Soulo, designed by Michael Burns and coded by Ahmad Hania

March 09 2011


Useful Photoshop Tips And Tricks For Photo Retouching

Advertisement in Useful Photoshop Tips And Tricks For Photo Retouching
 in Useful Photoshop Tips And Tricks For Photo Retouching  in Useful Photoshop Tips And Tricks For Photo Retouching  in Useful Photoshop Tips And Tricks For Photo Retouching

When it comes to designing in Photoshop, there is a myriad of ways one could use to achieve a certain result, especially when it comes to photo retouching. Designers use technique they are most confident as well as comfortable with, which is great because it’s always useful to peek into the workflow of our colleagues and learn new design approaches. We have had articles on cloning, compositing, masks and obscure Photoshop time-savers in the past. This article is different.

I’ll be covering some of the useful techniques and tricks which I’ve learned from my experience. You may know some of them, but hopefully not all of them. All images used in this article were purchased and are used according to their licenses. The second part of this post will be published in 2 weeks.

Here is a short overview of the techniques we’ll be covering:

Naturally Increased Light

The light of the sun creates texture. There are shadowy areas and spots where the sunlight can shine without interference. To control the intensity, you can draw more light onto a separate layer or increase already existing light. Create a new layer by going to Layer → New → Layer, or by pressing Shift + Control + N on Windows or Shift + Command + N on a Mac. Set the blending mode to “Color Dodge” and the opacity to about 15%.

30-tips-and-tricks1a in Useful Photoshop Tips And Tricks For Photo Retouching
Increase light on a separate layer.

Then use the brush tool with a soft brush, and hold the Alt/Option key to pick up colors from the area that you want to brighten. Continue to brush in some light, picking up appropriate colors if the background changes. This way, you increase not only the light, but the saturation, which makes for more realistic results.

30-tips-and-tricks1b in Useful Photoshop Tips And Tricks For Photo Retouching
The blending mode “Color Dodge” creates realistic results.

Simulate Infrared Images

Open a photo in Camera Raw; you can do this either in Bridge, using the right mouse key and clicking “Open in Camera Raw,” or directly in Photoshop, by selecting File → Open as Smart Object. Apply basic adjustments to optimize your image (for example, with the “Recovery” and “Fill Light” slides), then switch to the “HSL/Grayscale” tab. Check “Convert to Grayscale,” and set the Blues down to around -85. Set the Greens to +90 and the Yellows to +20.

Trees and bushes should now shine in the typical white, and the sky should appear almost black. If you want to go on and simulate some grain, switch to the “Effects” tab, and enter 15 for the amount, 20 for size and 80 for roughness. You could also apply a “Vignette.” Here I used -30 for the amount, 40 for the midpoint and -35 for roundness.

30-tips-and-tricks3 in Useful Photoshop Tips And Tricks For Photo Retouching
It’s almost like an infrared image.


When applying a “Levels adjustment,” you can set black and white points in order to decrease color tints, but where are the darkest and brightest spots in the image? Go to New Adjustment Layer → Threshold to find those areas. This function is available under the “Layer” menu.

Move the slider so far to the right that only a few white spots remain in the document. Use the “Color Sampler tool” and set down a point there. Move the slider to the left until only a few black spots remain, and set a second point down there.

One could also find a neutral gray in the image by using a “Threshold adjustment layer.” Add a new blank layer between the original image and the threshold adjustment layer, and fill this layer with 50% gray. Go to Edit → Fill or press Shift + F5, then select “50% Gray” under “Contents” and click “OK.”

30-tips-and-tricks5a in Useful Photoshop Tips And Tricks For Photo Retouching
Here is the threshold adjustment layer at work.

Change the blending mode of this layer to “Difference.” Select the “Threshold adjustment layer” again and move the slider all the way to the left. Slowly move the slider back to the right until black dots start to appear. These are the neutral gray areas in the image (if neutral grays are present). Add a “Color Sampler spot.”

Now delete both the threshold adjustment layer and the 50% gray layer. Create a new adjustment layer, “Levels.” Use the first Eyedropper tool to click on the darkest area, then use the third Eyedropper on the brightest area.

30-tips-and-tricks5b in Useful Photoshop Tips And Tricks For Photo Retouching
Here’s a before-and-after comparison.

Now you can use the gray Eyedropper tool on the third Color Sampler spot. The color tint will be decreased. Color Sampler spots can be deleted by dragging them off the canvas with the Color Sampler tool.

Color Look With An Adjustment Layer

Go to the Layer menu, and then New Adjustment Layer → Hue/Saturation, and set the blending mode to “Soft Light” and check “Colorize.” Use the Hue, Saturation and Lightness sliders to control the color: for a cool look, for example, set the hue at 210, the saturation at 50 and the lightness at 10; for a warm look, set the hue at 30, the saturation at 30 and the lightness at 5.

30-tips-and-tricks6a in Useful Photoshop Tips And Tricks For Photo Retouching
Here is Hue/Saturation and Color Fill.

Alternatively, you could use several color layers. Create them from the layer palette with the “New Fill/Adjustment Layer” button. Choose a color, then set the blending mode to “Vivid Light.” Reduce the opacity to about 12%, and invert the layer mask with Control/Command + I. Paint in the colored light with a big brush and white color. This works especially well for the lighting in portraits that have a textured background.

30-tips-and-tricks6b in Useful Photoshop Tips And Tricks For Photo Retouching
Here’s the Color Look with an Adjustment Layer.

Controlling Mid-Tone Contrasts

To increase detail in landscape shots, boost the mid-tone contrast. Copy the background layer with Control/Command + J, and then click on Filter → Convert for Smart Filters in the menu. Then go to Filter → Other → High Pass and enter a radius of 3 pixels. Change the blending mode to “Overlay” and double-click the layer next to its name to open the “Layer Style” window.

30-tips-and-tricks7a in Useful Photoshop Tips And Tricks For Photo Retouching
Layer Style window: This Layer

For the first gradient, “This Layer,” split the sliders by holding the Alt/Option key and trim the layer effect to the “50/100” and “150/200” ranges. As soon as you move the sliders, you’ll see where those numbers are. This increases contrast only for the mid-tones. Double-click the “High Pass” filter in the layer palette to bring the dialog box up again in order to adjust the radius to your liking.

30-tips-and-tricks7b in Useful Photoshop Tips And Tricks For Photo Retouching
Check out these mid-tone contrasts.


A sunset, especially at sea, can be an amazing color spectacle. The hues will depend heavily on the weather, though — but you can push them a bit with a gradient map. Click on the “New Fill/Adjustment Layer” button in the Layer palette and select “Gradient Map” from the list. Click on the gradient to open the “Gradient Editor.”

30-tips-and-tricks8a in Useful Photoshop Tips And Tricks For Photo Retouching
Gradient Map

Click on the first color patch below the gradient, and change the color to red. Set the color patch on the opposite side to yellow, and click “OK.” Set the blending mode to “Soft Light” and reduce the opacity to about 50%. This will create a warm, almost golden sunset.

30-tips-and-tricks8b in Useful Photoshop Tips And Tricks For Photo Retouching
Observe the movement from a blue to a golden sunset.

Creating Smiles

Roughly select the area around the mouth with the Polygon Lasso tool. Go to Select → Modify → Feather, and enter a radius of 10 pixels. Confirm, then click on Layer → New → Layer via Copy (or press Control/Command + J), then Edit → Puppet Warp. Photoshop will put a mesh over the entire layer in the shape of your previous selection.

30-tips-and-tricks10a in Useful Photoshop Tips And Tricks For Photo Retouching
Here’s the mesh over the layer.

You can control the size of the mesh with the “Expansion” value in the Options bar. Increase the density to “More Points” for increased precision. Press Control/Command + H to hide the mesh, then set the first pins to the corners of the mouth. Add more pins to distinctive spots of the mouth. By clicking and dragging the mesh, you can shape a nice smile.

30-tips-and-tricks10b in Useful Photoshop Tips And Tricks For Photo Retouching
Here’s how to make a girl smile.

Colorful Water Drops

Macro shots of water drops are appealing, and shapes can be further accentuated with discreet coloring. You could treat the bland surface with a linear gradient from #772222 (RGB 119, 34, 34) to #3333bb (RGB 51, 51, 187). If the photo is on a layer of its own, click on Layer → Layer Style → Gradient Overlay or double-click the layer next to its name.

30-tips-and-tricks12a in Useful Photoshop Tips And Tricks For Photo Retouching
Layer Style: Gradient Overlay

Set the blend mode to Color, the opacity to 50%, the gradient to “Foreground to background color” and the angle to 90%. The gradient will be saved as a layer style, so you can come back at any time to adjust the values. Double-clicking the style name opens up the dialog window once more.

30-tips-and-tricks12b in Useful Photoshop Tips And Tricks For Photo Retouching
See the colorful drops with optimized colors.

Skin Color

If the skin is not quite perfect after retouching, it might be because of the general hue. You can control it by going to New Adjustment Layer → Hue/Saturation. Click on the miniature mask, and press Control/Command + I to invert the mask.

30-tips-and-tricks14a in Useful Photoshop Tips And Tricks For Photo Retouching
Adjustment Layer: Hue/Saturation

Using white color and a soft brush, paint over the skin areas so that only they get treated. For the adjustment, switch from Standard to “Reds” (found in the Hue drop-down menu of the Adjustment layer), and use the Hue, Saturation and Lightness sliders to adjust the skin color. Switch to “Yellows” and optimize the skin tone. Getting the colors exactly right depends very much on the image material. Rely on your common sense.

30-tips-and-tricks14b in Useful Photoshop Tips And Tricks For Photo Retouching
Optimized skin tones

Matching Skin Tones

A sunburn or a blush can disrupt a portrait, especially if there is a contrasting pale person nearby. Photoshop has a tool to correct that: “Match Color” offers control over skin tones. Open your image and use the Quick Selection tool to roughly select the red skin areas.

You can hold down the Alt/Option key and subtract areas from the selection. Click on Select → Modify → Feather and enter a value of about 15 pixels. Use the Control/Command + J shortcut to copy the selection to a new layer.

30-tips-and-tricks18a in Useful Photoshop Tips And Tricks For Photo Retouching
Adjustments: Match Color

Using the same technique, copy the non-reddened skin to a new layer. In the next step, you’ll have to differentiate between the source layer and the layer to edit, so rename these two layers meaningfully; all it takes is a double-click on the layer name. You could use the naming scheme shown here and call them “Beautiful skin” and “Reddened skin.”

Activate the layer with the red skin, and select Image → Adjustments → Match Color from the menu. For “Source,” select the current document, and for “Layer,” select the one with the beautiful skin. Control the effect using the “Luminance” and “Color Intensity” sliders in the Image Options area. Once you confirm, you can control the effect’s strength with the Opacity slider.

30-tips-and-tricks18b in Useful Photoshop Tips And Tricks For Photo Retouching
Paler skin after Match Color

Reducing Noise

Noisy images are annoying. One way to reduce noise is through the channels. Copy the background layer by pressing Control/Command + J, switch to the Channels palette, and select the channel that shows the least noise. Drag that channel down to the “New Channel” icon (next to the trash can) and go to Stylize → Find Edges. Then apply a Gaussian Blur with a radius of about 3 pixels.

30-tips-and-tricks19a in Useful Photoshop Tips And Tricks For Photo Retouching
Look at this copy of the red channel.

Click on the new channel’s miniature icon while holding the Control/Command key to select the content. Activate the “RGB channel” (top-most), and switch back to the Layers palette. When the duplicated background is selected, click on the “Add Layer Mask” icon.

Click on the Layer Miniature icon, and select Filter → Blur → Surface Blur from the menu. Play around with the Radius and Threshold sliders until the noise has been reduced as much as possible. Thanks to the mask you created, the contours are safe.

30-tips-and-tricks19b in Useful Photoshop Tips And Tricks For Photo Retouching
With and without noise

Retro Look With Curves

Go to Layer → New Adjustment Layer → Curves and switch from RGB to Reds. Then drag the line downwards a little for the shadows and upwards for the highlights, creating a slight “S” curve. Do the same for the Greens. For the Blues, drag the highlights down a little and the shadows up (for an inverted S shape). The shadows should now be slightly blue-ish, the highlights slightly yellow-ish.

30-tips-and-tricks20a in Useful Photoshop Tips And Tricks For Photo Retouching
Adjustment Layer: Curves

Create a new layer with Shift + Control/Command + N, and fill it with #000066 (RGB 0, 0, 102). Set the blending mode to “Exclusion.” Now copy the background layer by clicking it and pressing Control/Command + J. Set the blending mode for this copy to “Soft Light.”

To decrease the effect overall, activate the top-most layer and then click on the background copy while holding the Shift key, thereby selecting both layers. Alternatively, you can add them to a group with Control/Command + G. Reduce the layer’s (or group’s) opacity. Note that in Photoshop versions prior to CS5, you’ll have to reduce the opacity for each layer individually.

30-tips-and-tricks20b in Useful Photoshop Tips And Tricks For Photo Retouching
Achieve a simple retro look in a few steps.

Identifying Layers

If you’re ambitious with your collages, then you’ll be familiar with this problem: meaningful layer names are often neglected during the creative process. This can result in layer names like “Layer 4” and “Layer 5 Copy 2,” which are not very helpful when you need to quickly identify the contents of a layer.

Photoshop offers a number of solutions for our laziness. For example, you can click on the element you want to select by using the “Move tool” and holding the right mouse key; you’ll see which layer contents are below the tool. Photoshop will display a list in a drop-down menu, from which you can easily select the desired element.

30-tips-and-tricks21 in Useful Photoshop Tips And Tricks For Photo Retouching
Right click with the Move tool

Control/Command + left-click with the Move tool selected and, in most cases, you’ll select the corresponding layer of the element that your mouse is over (unless Photoshop can’t distinguish between the multiple layers).

You could also Control/Command + left-click on a layer’s miniature icon to get a selection of the content of that layer. The marching ants will show you what is on that layer and where it is.

Another option is to click on the Layer palette’s Options icon, in the top-right corner, and select “Layers Palette Options.” From here you can adjust the size of the layer’s miniature preview and concentrate the miniature’s content to the layer’s bounds, which should cut down on future guesswork when it comes to layer contents.

30-tips-and-tricks21b in Useful Photoshop Tips And Tricks For Photo Retouching
Layers Palette options

Conserving Resources

Plug-ins save time, but they’re a bit resource-hungry; at least, they lengthen Photoshop’s start-up time. Your plug-ins might have functionality that you rarely use, so deactivate them until you need them. To do so, create a new folder by going to Adobe → Adobe Photoshop CS5 (or whatever your version) and name it something like Plugins_deactivated.

30-tips-and-tricks24 in Useful Photoshop Tips And Tricks For Photo Retouching
After disabling some plug-ins.

Now move all of the extensions that you don’t need for the moment. When you restart Photoshop now, those plug-ins won’t load, so the program will start up quickly. Your RAM will be relieved. Because you neither deleted nor uninstalled the plug-ins, they’re available to use anytime. If you need them, just move them back to the plug-in folder.

Classy Sepia Look

The sepia look is an absolute classic. To enhance a black and white image with a classy sepia tone, follow these steps. Click on Layer → New Adjustment Layer → Photo Filter, and select the Sepia filter, with a density of 100%. Double-click the layer (not the layer name) to open up the Layer Style window. This will show the Blending options.

30-tips-and-tricks26a in Useful Photoshop Tips And Tricks For Photo Retouching
A view of the Layer Style window.

At the bottom of the dialog box for the first gradient, move the white slider to the left while holding the Alt/Option key. This creates a smooth transition between adjusted and unadjusted areas. The sepia will now look elegant.

30-tips-and-tricks26b in Useful Photoshop Tips And Tricks For Photo Retouching
Subtle sepia

Precise Positioning

I’m sure you’ve often been irritated by Photoshop’s tendency to position elements on its own, but the program is just trying to help you align an element that is on its own layer with the outer edge of the document or with the edge of another object. To your frustration, the layer’s content will jump to the edge, even though you wanted to leave a few pixels of space in between. You can temporarily deactivate the automatic snapping by holding the Control/Command key as you position.

30-tips-and-tricks27 in Useful Photoshop Tips And Tricks For Photo Retouching
A banner, close to the edge.

Applying Layer Styles Multiple Times

Usually, layer styles can be applied only once. For example, if you click on Layer → Layer Style → Drop Shadow, you cannot create a double drop shadow, one of which has an angle of 120°, a distance of 2 pixels and a size of 2 pixels, and the other of which has an angle of 180°, a distance of 12 pixels and a size of 12 pixels.

Actually, it is possible! It just requires a little detour. Create the first drop shadow as you normally would. Then right-click on the layer and select “Convert to Smart Object” from the menu. This smart object can be assigned another drop shadow, and you can convert the smart object into yet another smart object. This way, you can easily add a third and fourth drop shadow. Alternatively, you could apply multiple strokes.

30-tips-and-tricks31 in Useful Photoshop Tips And Tricks For Photo Retouching
Three shadows in combination.

By the way, to put one or even several styles onto their own layers at once, right-click on the FX symbol and select “Create Layer” from the list. Now you can apply filters to these styles, but they won’t be editable anymore.

Stay tuned

The second part of this post will be published in 2 weeks. Please stay tuned and subscribe to our RSS-feed and join us on Facebook.

What kind of techniques would you prefer to see in articles on SmashingMag?survey software

(al) (ik) (vf)

© Dirk Metzmacher for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: photo, photoshop, retouching, techniques, tips, tricks

February 14 2011


Look Under The Hood: Photoshop Color Settings

Color settings are often skipped by self taught Photoshop users and usually people can get away without any knowledge of them. So should you bother getting familiar with them?

The real question is – how serious are you about your work? If the answer is anything else then “not at all”, then any additional knowledge benefits you. Basic knowledge of the options here can make your life much easier at some points. Your designs will probably be displayed in multiple places in various shapes and forms, therefore you might want to make sure, that they look they way you intended them to look. The following article will give you a helping hand in achieving that goal.

Let me start off by telling you, that the purpose of this article is not to give you a long and probably boring explanation of all the options and their respective descriptions, but to give you enough knowledge so that you know what you’re doing.

Let’s begin with localizing the Color Profiles option.
You can access them from the Photoshop menu Edit -> Color Settings or by using the shortcut CTRL+Shift+K .

The following window should come up:

The default settings most often look something like that. So let’s go through with what is what in here.

Working Spaces

RGB colors are mixed and created in the way monitors use. Therefore RGB is perfect for screen design.

You probably will have the sRGB IEC option set here by default. It’s fine for consumer purposes, but does not give you a very rich color palette. It would be a good idea, especially for web designers and photographers to go with Adobe RGB (1998) which offers a wider color range as more colors is what we all want. Don’t go panicking if you’ve been designing in sRGB, the difference is not that big, but this profile is created for the less expensive displays.
More and more photographers tend to use another option, the ProPhoto RGB. It has a much broader color range, some of it actually being outside of human vision. Working with that profile however has it’s cons, one of them is the fact that converting the color scale to a lower one on images created in using this color profile may lead to unwanted results. So before you choose to go with that one you might want to get some additional knowledge on working with ProPhoto RGB.

Also – don’t confuse the sRGB IEC with Monitor sRGB IEC , if you chose the second you might get varying results on different displays.

A big number of desktop printers use RGB values when printing, not CMYK. So have that in mind as well.

CMYK in turn replicates the way of mixing colors that big printers use. If you’re designing something with the intent of publishing outside of the screen you should make sure that it looks correct in CMYK Color Profile.

You will want to leave this option here at it’s default place at U.S. Web Coated (SWOP) v2 . If you have the possibility of asking for the CMYK Color Settings file of the printer you will use, do so by all means. With that in mind just choose the “Load CMYK” option from the menu and you’re good to go.

Gray / Spot
Leave those at Dot Gain 20%

Color Management Policies

All the values here are the same for all three options, so let’s see what they do.

If you choose to turn off the Color Management Policies the files you create will not have the *ICC profiles embedded in them. That may cause your files to vary in color on different displays. It’s generally recommended that you leave it on.

Preserve Embedded Profiles
This option will leave the ICC profiles of the files you open. In case you open a file which does not have an ICC profile, it will use your current settings to temporarily embed one. However it will not save the Color Profile to the file.
All new files you create will be saved with your current Working Spaces settings. You can change them in the advanced settings, when you create a new file.

With this option on, you can have multiple files with different color profiles opened at the same time. Photoshop will treat every one of them separately.

This will convert the ICC values of the file you open to your Working Space settings. However if your file had no ICC profile to begin with, it will remain that way. The new files you create will inherit the values from Working Space settings.

*In color management, an ICC profile is a set of data that characterizes a color input or output device, or a color space, according to standards promulgated by the International Color Consortium (ICC)
Wikipedia -

Conversion Options

Click the “More Options” button. New fields will appear.

Adobe (ACE) uses the Adobe Color management system and color engine. In most cases you want to stick with this one, as it’s values remain the same across the platforms.

This specifies the method used to convert color between spaces. The most common used options here are Perceptual and Relative Colorimetric.

Relative Colorimetric – takes only the colors which are out of gamut and converts them. All the remaining colors are left intact, which may result in some color changes on your design.
Perceptual – intent will map all the colors to the closest in-gamut color. By taking all the colors during the process the result should be visually more close to your original design. Your gradients and such will display best with this setting.

Use Black Point Compensation
Better to leave on. If you choose to turn it off, it can have an effect on dark spaces in your design, sometimes with a very negative on your project.
This options ensures that dark spaces in your file are mapped to the closest dark range of the destination space.

Proof Setup

Proof setup goes hand in hand with Color Settings. You will find this option under View -> Proof Setup.

It’s purpose is to make your display simulate print or other Color Profiles. The hot key to turning it on and off is CTRL+Y. If your colors are strange, you might want to check if you accidentally didn’t turn this feature on. If on the end of your file name there is a backslash with a Color Profile, then you have your culprit.

In the Proof Setup menu you have different preview options.

Working CMYK will simulate the CMYK values you chose in the Color Settings, so you have a quick preview of how your file will look like after print. Why just not convert the image to CMYK all together? Doing that will lock you out of some options and filters Photoshop has. So you sometimes might want to wait and convert from RGB to CMYK until later.

The neighboring options do pretty much the same, but with one plate at a time.

Mac / Win RGB here you can simulate a Mac or Windows display. Can come quite helpful when you’re designing for cross platform purposes.

Custom - if you choose the custom option the following window appears.

Here you can create an additional profile for the proof simulation. The first two options we went through before.

Simulate Paper Color will do as it says – simulate the white shades of white of paper on the screen.
Simulate Black Ink will show you how dark your dark places will be when created with printer ink.

Managing Color Profiles

Check the files ICC Profile
So now that you know how to customize them, you might want to know where to find out what profile is embedded in the file you have opened. You can find that out in the lower left corner of Photoshop. There is a small bar displaying various information, what you want to do, is to click the right arrow and from the menu choose Document Profile, this will display the ICC profile information you seek.

Assigning / Converting Color Profiles
To assign or convert the color profile on the file. You want to go to your top menu and choose Edit -> Assign Profile / Convert to Profile.

That’s basically it. Now you should have the basic understanding of how Color Settings work and how to manage them in your work.

February 13 2011


Creating an Effective Online Portfolio: 40+ Tips, Tools & Inspirations

Nowadays, everyone is getting rid of the paper trail. Everything is now done digitally: commerce, accounting, advertising, marketing, shopping and even design. Every freelance graphic designer should now own an online portfolio. If you don’t have one, or worse, if you don’t know what it is, you have absolutely no chance of making it in the world of graphic design.

This article will teach you how to build a solid and effective online portfolio, guide you through the best online portfolio tools available , and then show you a few awesome portfolio themes and sites for your inspiration.

Building a Strong and Successful Online Portfolio

Photo by Asif Akbar

1. Know your objectives.

Know your objectives for creating an online portfolio. Is it to get new clients, land a job, provide a solution, network, or to build reputation? Define yourself—what kind of designer are you? What’s your main focus?

2. Narrow your scope.

A common mistake most graphic designers and freelancers make is to try to impress clients by showing off as much work as they can. This can lead to a cluttered and disorganized online portfolio.

The goal is to simplify. You do not need to bombard your clients with too many graphics or information. You just need them to see a clear message. Focus on a specialization.

From the home page alone, visitors should already have an idea of what you do.

3. Use the ‘About Me’ page to your advantage.

The ‘About Me’ page is where you promote yourself. Give a description of yourself, what you do, what you can offer and contact information including your business number, e-mail address, etc. Do not make the description of yourself too long – 50 words or less will suffice. The shorter and more precise, the better.

Be brief and precise with your 'About Me' page.

4. Use only the best tools for the job

Your portfolio must be user-friendly and easy to navigate.  Navigation must be a primary concern. Use the necessary tools to make the portfolio more fun and entertaining.

A great web site makes use of the right tools such as Flash and music to make it fun, interactive and interesting.

All the main tabs and important information must be found on the home page. Another is to use SEO to optimize search engine results. Traffic will increase if your website ranks high on search engines. Good SEO will increase client reach and awareness. You will have a constant stream of traffic without doing too much of the work.

5. Promotion through Social Media

You don’t stop after creating an online portfolio. You need to promote it afterward through social media. Join online design communities like GDF or Estetica to network with fellow graphic designers. Connect with like-minded people through social networking sites like Linked In, Facebook and Twitter. Get involved in social sharing platforms like Digg, StumbleUpon and Delicious so that others can share and re-post your content. Social marketing is a very powerful tool for promoting yourself.

Create social networking sites like Facebook and link it back to your website.

Start a blog and write quality content. Post valuable insights regularly. By regularly updating your online content, you can maintain a constant following and increase the page rank. Guest blog for other blogs and look for others to guest blog for you. Guest blogging provides fresh angles to a topic and helps drive more traffic to your own site. You can find many willing guest bloggers via networking–it’s easier than you think, you can even find one by just simply looking through your blog comments section.

Online Portfolio Solutions

How do you get all your artworks in one place? Photo by Sara Heinrichs

If you have the coding skills and knowledge, you can create a comprehensive online portfolio that’s HTML, CSS or WordPress based. It’s the best way to create an online portfolio since you can tailor it to your needs and objectives.

But if you don’t have the capability, resources, or patience to do the coding, there are several online portfolio web sites online that you can try.


Carbonmade is one of the most popular online portfolio sites out there.You can get a free version that can support up to 5 projects and 35 images, or upgrade to the premium version for US $12.00 a month that allows you to share up to 50 projects and 500 high-res images.


  • Supports images, videos and Flash.
  • User friendly for both the graphic designer and the viewers.
  • Sleek interface and professional looking themes.
  • Carbonmade online portfolios are Java-supported.


  • Too expensive. At $12.00 a month, the price is ridiculous for only 500 image uploads.
  • Limited uploads. For free account, you are only allowed 35 images. The premium account allows you 500. Price is ridiculous, especially if you compare it to other online portfolios. Free accounts from DeviantArt, Flickr and Behance allows you to upload unlimited images.


Behance is a creative professional platform for artists and designers. It’s free, but exclusive. Behance has good reason to be clique-y—it is the online base of some of the best artists in the world.


  • It’s free! What could be better than that?
  • Great reputation. It’s a high profile website, where clients expect to find the best in the industry.
  • High stats, thus wide exposure for your portfolio–you’re connected to the best there is, after all.
  • Packs more features than other portfolio sites like DeviantArt or Flickr.


  • Behance is exclusive and by invite-only. If you want to create an online portfolio, you need to apply for it. You need to be really good!
  • Banner ads on every page of the site. What do you expect? It’s free, after all.
  • Because it has more features, it’s a bit more complex than other portfolio hosting sites. It can take some time getting used to.


DeviantArt is the largest online community for artists to show off their work to fellow artists and art lovers. They use DeviantArt to get praise and feedback in order to continue to improve their craft.


  • Unlimited image uploads, for both free and premium accounts!
  • You can sell your prints.
  • Fellow artists, colleagues and peers can comment on, and ‘favourite’ your artwork. You can also disable the comment feature if you want to.
  • Create multiple art categories and group them per different collections.
  • You can create a journal to keep your clients and colleagues updated with your artwork, work and everything else.


  • Unlike other portfolio websites, DeviantArt does not support video and audio files.
  • It’s more of an online art community than a professional portfolio hosting site. It’s a place for artists, and not for clients. If you want a more professional setting for your portfolio, you can try DeviantArt’s DaPortfolio.
  • Not much freedom for customization. No DeviantArt themes to differentiate your profile from other DeviantArt users.


Flickr is a very popular photo management and sharing site. You have full control of your photo’s privacy settings. Viewers can comment and rate your photos. Because of its effective sorting, tagging and management system, it can be used as an online portfolio as well.


  • Easy-to-use interface
  • Supports photos and videos.
  • You can utilize Creative Commons copyright licenses for your uploads.
  • Many interesting features such as blog, groups, places and more.


  • Primarily used to share photography. Digital art, painting, graphic design is not as popular on Flickr.
  • Easy for others to steal your work.

WordPress-based Portfolios

WordPress is often thought of as a blogging platform, but WordPress is a powerful tool capable of so much more. With WordPress, you can create all kinds of websites, including an online portfolio website.


  • Powerful blog features for your online portfolio.
  • Generally inexpensive–all you need is to pay for the web hosting and your own domain.
  • Features, content, widgets and the look and feel is highly customizable!  There are several WordPress themes online, but you can also create your own if you have the coding capabilities.


  • A bit more complicated to use than other portfolio sites–but I assure you, it’s worth it!
  • I can’t think of anything more–I like WordPress too much!

It’s highly customizable, you can choose several WordPress themes to match the desired look and feel of your portfolio. Here are a few WordPress themes we recommend for online portfolios:

1. Classica: Minimalist

2. Striking

3. Dandelion

4. Versatile

5. Seduction

Great Online Portfolios for Inspiration

1.Nathan Sanders

Clean design with cool blue green hues, making it easy and relaxing on the eyes.

2.Loulou & Tummie

Loulou & Tummie’s online portfolio made me feel like Charlie in Willy Wonka’s chocolate factory.

3.Visual Box

Visual Box is an online portfolio on art direction, motion graphics and screening. Everything about this site, works. It’s visually delectable and artistically appealing.

4.Iain Crawford

Great conceptual online photography portfolio by Iain Crawford.

5.Design Gopa

This interactive web site is lovely. You can admire their work like a three-course meal. Their designs look almost good enough to eat!

6.Kristen Ulve

Kristen Ulve’s style is happy-go-lucky, in a childish, fanciful manner. Her whimsical style of caricatures and fashion illustrations is palpable on her portfolio.

7.Tom Hussey

Tom Hussey’s photography portfolio welcome us with an interesting photo set. It shows ordinary people and their secret thoughts in the mirror.


Booreiland’s portfolio is exploding with life and energy. It makes use of bright colors Cyan, Magenta and Yellow–a popular color palette that never fails to attract.

9.Simple Art

Simple Art’s website is simple, but we can clearly see the designers’ almost obsessive attention to detail. The portfolio depicts the typical workspace of a graphic designer to a T: computer, camera, tablet, and a few magazines for inspiration.

10.Andrej Krahne

The Andrej Krahne portfolio looks like a page from a magazine–chic and stylish.


An online portfolio owned by Kristy Anne Ligones, a talented graphic illustrator from the Philippines.

12.Paul Lee

Paul Lee’s online portfolio is surreal and creative. It’s a combination of watercolor hues, abstract shapes and origami themes, which are common elements in his graphic design works.

13.The Farm Project

Simple and no-fuss. This online portfolio makes good use of  Helvetica and color.

14.Make it Happen

Another great interactive and minimalist web site, MIH is dedicated to making it: clear, clever, work, helpful, personal, special and grow.

15.Meca Graphics

The youthful and modern online portfolio of  UK-based graphic designer Ed Vinicombe.

16. JFotography by Jean Fan from Carbonmade

I like the easy interface of her photography portfolio. The unique block style of her thumbnails is reminiscent of a classic Mondrian painting. The portfolio’s minimalist style allows viewers to focus on her beautiful work.

Effective Online Portfolios Take Time.

Producing a strong online portfolio requires plenty of time: hours of client and audience research, followed by brainstorming for concept and design, and afterward, execution. Bear in mind that your online portfolio serves as the online front porch of your office–and first impressions matter. Add interactive tools or music. Use the online portfolio tools mentioned. ‘Woo’ your clients in order to seal the deal the moment they click the URL of your site.

February 03 2011


Introducing Google Chrome: All In One Super Charged Guide

Google Chrome is the most fastest browser anyone could ever use. It has lived up to most people’s expectations with its speed, security, innovative navigations, ease of usage and very cool extensions. And because it uses WebKit as a rendering engine, it’s completely web developer-friendly.  So, let those HTML5, CSS3 & Flash-less designs come rolling in.

In this article we aim to deliver an All in one resource guide for Google Chrome users. From extensions to some advanced tricks we got it covered for you. So Fasten your seat belts and lets check out more than 90 kick ass extensions, themes, web apps and tips to customize your Google Chrome.


People who are shifting from Mozilla Firefox should must have this in mind that Google Chrome’s extensions repository is relevantly new and its a child as compared Firefox’s huge extension library. But let’s not get sad because of this as the repository is getting cool extensions day by day with the release of new APIs by Google chrome developer team.

Can’t get enough of Google Chrome extensions? They’re too good to be true and they make things easier and convenient for users. Good thing these goodies are easy to install and only takes seconds to download.

Below we have collected 60 extensions for every day use and we are hopeful they will help you a lot in changing Chrome according to your needs.


1. StayFocusd

This extension will help you focus and stop wasting time on irrelevant web activities. It will help you manage your time better by giving you limited time on opening or block distracting websites.

2. Meeting Scheduler for Google Calendar

You can now schedule meetings without having to worry about double booking. This extension will look into your Google calendar and sets tentative availability, evaluates invitee replies and schedules the meeting.

3. TabJump – Intelligent Tab Navigator

Navigate through your tabs faster & easier. Talk about multi-tasking, tabs may just be your new bestfriend. This extension will surely be a big help to make it through multiple-tab tasks.

4. DayHiker

Keep track of the date & schedules. There’s nothing worse than to get double-booking. This extension will help you manage and organize your schedule.

5. Lazarus: Form Recovery

Filling in long forms may be a pain in the neck, back and arms. But it gets really agonizing when you could lose all you have typed in because of browser crash. Getting this extension is a good solution for those bad scenarios. This awsome extension will store your input.


1. Blog This! (by Google)

Get blogging in just a click. Install this extension to open an application window and blog. It’s a very handy extension for regular bloggers.

2. Clip to Evernote

This extension makes it easier to remember your favorites, better than the bookmark button. You can categorize your favorites so it’s easier to find them.

3. Webpage Screenshot

Make easier and faster screenshots with this extension. You can explain and point out details using arrows and other indicators.

4. After the Deadline

This extension works perfectly with 10.0.634.0 beta. It checks grammar and spelling on emails, tweets, documents & messages.

5. StumbleUpon

Stumbled on a very interesting page you would like to share on stumble upon? Install this extension to make it easier. Now you don’t have to open the stumble upon page, just click on the extension button and you have it.


1. Cooliris

The coolest search extension that speeds up search on Google Images, YouTube, Flickr, and more. Get a 3D view on images and videos with an infinite scroll that makes it easier. Now you wont have to click from one page to another.

2. Hover Zoom

Now you wont have to click on the link and go to the page just to see the image clearly. Just hover your mouse on the thumbnail, and you can see a good view on the photo.

3.EXIF Reader

Photography enthusiasts and fans, extracting EXIF is made easy just for you. Find out the Exposure Time, Aperture Value, Focal Length and more. There’s no need to download a photo for view its EXIF information, With EXIF Reader, you can view EXIF information in your Chrome in an instant.

4.Instant Image Editor

A quick retouch is now made easy with this extension. You wont have to open your Photoshop software. With in your chrome browser, you can edit your photos fast & easy.

5.Explain and Send Screenshots

Share and send your screenshots with this extension. You can explain and point out with arrows as well.

Web Development

1. csscan

Inspired by the CSS Viewer by Firefox, this extension will allow you to see the CSS properties of the element. This is a very handy extension for web developers.

2. Measureit!

Another great extension. This will help in measuring pixel sizes on any web element.

3. JavaScript Tester

After installing this extension, you wont find a button. Rather, you’ll using keyboard shortcuts to type in and test the javascript.

4. Pendule

This is an ultimate extension for web developers. Find all your tools in one button, install this.

5. SpeedTracer

This extension will identify and fix performance problems in your web applications. Get a better picture of where time is being spent in your application.

Browsing & Searching

1. Google Quick Scroll

The name itself is self explanatory. Browse through the page easier and faster. But don’t worry, Quick Scroll tries to stay out of your way, and shows up only when it is likely to be useful.

2. WOT

Browse safely with this cool extension. WOT ratings will help you determine which sites are to be trusted and which are not. The ratings are powered by millions of experienced users that are trustworthy.

3. GoMBox

With this extension your image search is made easy. You just click on the thumbnail and it brings up a lighbox viewer. This way, you can get a good look on the image without having to go away from your search.

4. FastestChrome

This extension can make browsing easier and faster with less clicks. Searching in multiple pages can be tiring, but with this you just keep scrolling down and you are being taken to the next pages.

5.Google Similar Pages

If you want multiple opinions and views on your research, this extension is perfect for you. This will allow you to open related articles or searches with what you currently have on your screen with a click on the button.

Customization & Navigation

1. Keyboard Navigation

Keyboard shortcuts always gets you around faster than having to move your cursor everywhere. This extension will give you shortcut keys on your browser to get you moving quick & easy.

2. Smooth Gestures

If you prefer moving the cursor than pressing on keyboard shortcuts, not to worry here’s an option for you. With this extension, you can customize your cursor gestures by using both left and right mouse keys. It allows you to move the cursor faster with a smoother flow.

3. Minimum Font

This extension is very useful for users who has a problem in reading small fonts. This extension changes the current smaller font to a more easier to read font. Which means, less eye strain and faster browsing.

4. Apture Highlights

Google searching made better. With this extension, you will be able to search just by highlighting a phrase on any site to reveal the web’s most relevant content without ever leaving the page.

5. browseFrame

Browsing can now be done in a small frame to fit in your current open browser. Now you don’t have to navigate away just to do multiple browsing.

News & Weather Updates

1. Feedly

Compile all your favorite online news and magazine sites in one. With this extension, you will have all updates on everything that goes on without having to go each  website.

2. NPR: News, Music and Books

Listen to News, Music & Stories while browsing. This extension will deliver your daily dose of audio needs.

3.1-ClickWeather for Chrome

Get your weather updates straight from your chrome browser. This extension will give you updates and alert on the latest weather report in your area.

4.Financial Times News

Keep track of the world’s economic & financial status. Install this extension to get regular alerts and reports on the world market.

5. Top News

The most renowned News and documentary magazine is now on chrome. Install this extension to get access to top rating stories and articles. You can even go as far back as 1923.


1.eBay extension for Google Chrome

Online shoppers’ bestfriend. Get lesser chance of getting outbid by keeping this extension up and running on your browser. Get alerts on your watch lists, bids & won items.

2. PriceTrace

Compare prices from major shops online. Get the best bargain and shop hassle free online. This extension will help you there.

3.Price Blink

Find the lowest prices possible online. Get the best and most outrageous bargains you can ever have and install this awesome extension on your chrome browser. The best shopping experience is at your finger tips!

4.Shopping Buddy

Shopping online is now made safer with this new extension that gives the buyers the ratings of online shops.

5.Chrome Currency Converter

Shopping online, you may have international transactions in different currencies from around the world. This extension will automatically convert to your preferred currency without having to manually compute.

Social Networking

1. AddThis

If you’re addicted to sharing anything and everything you like or dislike from websites, you can do it in just one click. Install this extension and this will make it possible for you.

2. Chromed Bird

Post your tweets straight from your chrome browser, without having to open your twitter webpage.

3. Social Plus!

Customize and play around with your Facebook profile and layout. With the cool themes are offered from this extension, your Facebook experience will be taken to another level.


You can get connected on Facebook, MySpace, Twitter, Foursquare, LinkedIn, YouTube, Flickr, GoogleBuzz, Yammer, Friendfeed, AIM, Yahoo IM and more…all in one place.

5. Glue

Install Glue, and get updates for the hottest and high rated movies, music & books. Having this on your browser is the ultimate tool to getting the latest and best stuff in entertainment.

Sports Alerts

1.Sports Scoreboard

Get reliable updates on your team scores and install this cool extension on your chrome browser.

2.Are You Watching This?!

Install this well rounded sports extension on Chrome. This will give your the hottest updates on every game, every sport.

3.Advanced F1 Countdown

F1 enthusiasts should follow the latest news and updates on races. Install this on your chrome browser and feel the rush!

4. Ultimate Football Results

Football fans, here’s a Google Chrome extension made just for you. Get the latest news and updates on your favorite teams.

5. Event Ticket Finder

Buying tickets for your favorite sports, theater or concert event is now made easier! Get alerts on events and tournaments with this awesome extension.


1. Avalanche!!

Play this fun game to kill time while waiting for a page to open. Simply install the extension, and you’re ready to go.

2. Scramble

This fun extension can also test your reading ability. Even if you get the words scrambled.

3. Fast Typer

A bit rusty in typing? Test and practice your typing speed with this cool extension.

4. Flixster Movies

Watch cool trailers and read reviews on the latest movies. This extension will surely kill boredom while you wait.

5. SHOUTcast

Install an FM radio on your Google Chrome to listen to music while browsing the web. Isn’t it just awesome?!

Google Essentials

1. Minimalist Gmail

Get a faster Gmail experience by customizing your Gmail app.

2. Send from Gmail

Send emails with your browser without navigating away from your window.

3. Google Voice

Get Google Voice running on your browser with just one click.

4.Google Dictionary

This extension is a very handy tool for students and readers. One more fascinating feature is that it also supports translations.

Still not enough? Check out these previous articles written by us

Awesome Google Chrome Themes

Another great thing about Google Chrome are the stylish themes which gives your browser a new, fresh look.  There are so many choices to choose from but we have collected those which look great.

1. Elegante V2 – 2.0

2. Aero Theme – 1.5

3.Night Spidey – v.01

4. Dark Green – 1.0

5. Blond-Amsterdam

6. Ella Moss

7.Lilly Pulitzer


9.Marc Ecko

10.Charlotte Ronson



13.Kid Robot

14.Super Monkey Ball

15. Porsche

Google Chrome Web Apps:

Installable web apps are a way of making Google Chrome treat certain websites like apps. People can find installable web apps using the Chrome Web Store.

Many installable web apps are hosted apps—normal websites with a bit of extra metadata. You can build and deploy hosted apps exactly as you would build and deploy any web app, using any server-side or client-side technologies you like. The only difference is that you must provide a small manifest file that describes the app.

1. Tweetdeck

Get your updates for Twitter, Facebook, Google Buzz & Foursquare with one Application.

2.Autodesk Homestyler

One of the many awesome Google Chrome apps to have. You can play around and make floor plans, design and choose your own furniture, it’s simply amazing!

3.Remember The Milk

Keep track of your tasks and schedule with Remember the Milk. The most popular online organizer is now on Chrome.

4.deviantART muro

Going on deviantART is now just a click away. Create masterpieces and graphic designs with this cool Chrome app.

5.Write Space

Want to get a writing experience without destructions? Install this Google Chrome app and you’ll see what it is I’m telling about.

6. Read Later Fast

You may have run into something interesting but got no time to read at the moment. Don’t worry, install this app and you can add the page on your list to read later.

7. MomoNote

Another awesome organizer for people always on the go. Momo will keep you posted on your tasks and schedules without hassle.

8. imo Instant Messenger

on all of your Instant Messengers in one window.

9.Pivotal Tracker

A story-based project management tool that allows software development teams to collaborate and react to feedback in real time. Simple and easy to use.


Read your articles, news & stories with this application. It allows offline reading as well!

Handy Shortcuts, Tips & Tricks

Learn how to navigate, manage and go around your Google Chrome browser faster and easier. There are lots of tips, tricks and shortcuts you could do to cut short your effort and time. In this part of the article I will gladly share with you the easiest and most useful shortcuts.

Chrome’s Keyboard Shortcuts

  1. (Chrome only) Ctrl+B toggles the bookmarks bar on and off.
  2. (Chrome only) Shift+Escape opens Google Chrome’s Task Manager.
  3. Ctrl+L to move your cursor to the address bar.
  4. Ctrl+K moves your cursor to the address bar to enter a Google search.
  5. Ctrl+T opens a new tab.
  6. Ctrl+N opens a new window.
  7. Ctrl+Shift+T opens the last closed tab.
  8. (Chrome only) Ctrl+Shift+N opens a new window in “Incognito Mode.”
  9. Ctrl+Tab cycles through open tabs; Ctrl+Shift+Tab reverse cycles through open tabs.
  10. Ctrl+J opens the Downloads tab.
  11. Ctrl+W closes the current tab.
  12. Ctrl+R refreshes the current page.
  13. Ctrl+H opens the History tab.
  14. Alt+Home loads your homepage.
  15. Ctrl+1 through 9 switches to a particular open tab position.
  16. Ctrl++, Ctrl+-, Ctrl+0 Enlarges, reduces, and restores default text sizes, respectively.
  17. Ctrl+Shift+T (PC/Linux) or Cmd+Shift+T (Mac) Reopen your last tab with.
  18. Ctrl+P (PC/Linux) or Cmd+P (Mac) to print your current page.
  19. Ctrl+Shift+D (PC) or Cmd+Shift+D (Mac) to save all open web pages as bookmarks in a new folder

-via: & Twitter

Tips and Tricks

1. Google Chrome Portable: Browse anywhere with Google Chrome Portable. Just download the software, and save it in your USB device. This is available in  Google Chrome 9.0.597.67 BetaGoogle Chrome 10.0.642.2 Dev for web developers and advanced users.
2. Google Account Synchronization: If you don’t want to carry a Portable Google chrome with you, there is another remedy  that is built right into the browser . You can synchronize your profile data with your Google account and whenever you want to synchronize a Chrome on other computer, just login to your account and resynchronize. You can do so in Options menu.

3. Check Memory Usage: this may help you browse faster by limiting your browser’s memory usage. Right-click on the browser tab in the start bar select ‘Task Manager’. You will get a window showing how much memory is being used by each tab in the browser.

4. Google Chrome Labs (Experiments): Flags in your address bar and enjoy some exciting experiments like side tabs which is a very useful feature for widescreen monitors. Very cool experiments are being showcased just to fit your taste.

5. Clear Selective Browsing History and Downloads: Browse faster by clearing up unwanted or heavy load in your browsing history. Click on the settings icon (wrench icon)>History or you can simply use the keyboard shortcut Ctrl+H (Win) / Cmd+H (Mac). Then click on Edit Items. Put a check on the boxes by clicking which you want to remove from your browsing history.

6. Google Chrome BackupYou can use this tool to backup, restore and manage more than one profile for your Google Chrome. A very handy tool for those who are obsessed with Firefox Profile Manager

Please let us know your feedback and yes if we missed something awesome please feel free to shout out and we will update the article :)

January 12 2011


Rounded: Create A Detailed Solid Dark Layout In Photoshop

Hello there everybody and welcome to another PSD web design tutorial here at 1stwebdesigner! In this tutorial you will learn how to create a Solid Dark Layout in Photoshop. A few techniques discussed in this tutorial include the use of proper spacing, typography, and colors. Let’s get started – I hope you will make out together with me until successful finish together !

Resources you will need to complete this tutorial:

Here is what we will making, click on image for full preview:

Step1: Working with Site Structure

Before we get started,download at first 960grid system for easy Guideline creation. Open 960_download\templates\photoshop\960_grid_12_col.psd . We also need to make sure that our Rulers and Guides are viewed, you can do that by pressing

  • CTRL + R (View Rulers)
  • CTRL + ; (View Guides)

Press CTRL + SHIFT + C to change the canvas size.

Using Paint Bucket Tool(G) fill the background layer to #242b30 Now you need to create a folders. Here is the folders that we will use in order to be organized. Implement this system in all of your designs – it will help a lot later when you will need to edit anything.

Now when you are done let’s get started.

Step2: Working with Header

Rename the layer1 folder to Header and rename layer 1 to header_bg (Make sure that you have finished creating the folders as I said earlier). Create a new guideline go to View > New Guide and set the position to 100px, orientation to horizontal.

Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #ffffff

Add this Blending Option:

Drop Shadow

Gradient Overlay

  • Linear Gradient
  • Angle: 90
  • #171c20
  • #22292f


  • #0d1012

Step3: Working with Logo

Create a folder inside header folder and name it to Logo, put all your logo related layers there. Now we are going to add the Site Title/Logo, so select the Text Tool(T) and write text the same way as in the screenshot.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay

  • Linear Gradient
  • Angle: 90
  • #929292
  • #bcbdbd Location: 30%
  • #dfdfdf Location: 50%
  • #dfdfdf Location: 100%

Now that we have finished styling the text, let’s create a light to make it more emphasized. Create a new layer below the text, name it to light and make a selection as shown in the screenshot below.

Set the foreground color to #ffffff Select the Brush Tool(B), right click to the workspace to show brush options.

Brush as shown in the screenshot below to create nice radial effect to emphasize logo.

Set layer to Soft Light, Opacity to 80%:

Now when we are finished with our logo let’s proceed creating the navigation.

Step4: Working with Navigation

Create a folder inside header folder and name it to Navigation, put all your navigation related layers there. Now we are going to add the Navigation Links, so select the Text Tool(T) and write text the same ways as in the screenshot.

I separated the home link because it serves as Active state. For the other links I color it with #b6aefd.

Add this Blending Option for the home text:

Drop Shadow

Color Overlay

  • #232a2f

Now lets create the Active state styling for the home. Create a new layer below the home text, select Rounded Rectangle Tool(U) and set the radius to 5px.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay

Repeat the same step as we did to our logo.


  • #13181b

Step5: Working with Slideshow

Create new guideline go to View > New Guide and set the position to 140px, orientation to horizontal. Repeat the process and set the position to 440px.

Now we are going to add the holder of our slideshow. Set the shape color to #171c20, now select the Rounded Rectangle Tool(U), set the radius to 5px draw a shape the same way as in the screenshot.

Add this Blending Option:

Drop Shadow

Now make a selection to the shape we have just create by pressing ctrl + click to the shape at the layers panel.

Go to Select > Modify > Contract, contract the layer by 5px. Now drag some guidelines to the edge of the selection left, right, top and bottom as shown in the screenshot.

Select Rounded Rectangle Tool(U), set the radius to 5px. For the color I chose #36414a. Color of this shape will not matter because it will serve as the holder of the slideshow images.

Add this Blending Option:

Inner Shadow

Inner Glow

  • #424f5a


  • #111417

Create a folder inside slideshow folder and name it to divider. Make sure that this folder is on the top of the shape we have just created. To create a divider select Rectangular Marquee Tool(M), follow the color as shown in the screenshot.

We divided it into two parts, on the left part this will contain the description of the image in the slideshow, this will also contain previous and next button. The right part will contain the images. Lets start in the left part. Create another folder inside the slideshow folder and name it toleft.

Now select Rounded Rectangle Tool(U), set the radius to 5px, follow how I place the shape as shown in the screenshot.

Add this Blending Option:

Gradient Overlay

  • Stlye: Linear
  • #242b31
  • #36414a

Create a new layer and name it header. Select Rounded rectangle tool with the same radius, follow how I place the shape as shown in the screenshot.

Add this Blending Option:

Inner Glow

  • #424f5a

Gradient Overlay

  • Stlye: Linear
  • #21282d
  • #2f3840


  • #111417

Now we are going to add the header text, so select the Text Tool(T) and write text the same ways as in the screenshot.

Duplicate the text layer. Now press down arrow key once.

Add this Blending Option:

Gradient Overlay

  • Stlye: Linear
  • #d4d4d4
  • #ffffff

Now we are going to add the description text, so select the Text Tool(T) and write text the same ways as in the screenshot.

Now lets create a read more button. Create another folder inside slideshow folder and name it to readmore. Select Rounded Rectangle Tool(U), radius to 5px. Place the shape as shown in the screenshot.

Now lets create a Previous and Next button. Create another folder inside slideshow folder and name it to prev_next. Select Rounded Rectangle Tool(U), radius to 5px. Place the shape as shown in the screenshot.

Add this Blending Option:

Drop Shadow

Inner Shadow

Inner Glow

Gradient Overlay

  • Linear Gradient
  • Angle: 90
  • #929292
  • #bcbdbd Location: 30%
  • #dfdfdf Location: 50%
  • #dfdfdf Location: 100%


  • #161b1f

Now we will add the previous and next arrow. Select Custom Shape Tool(U), find the arrow as shown in the screenshot.

Place the arrow as shown in the screenshot.

Add this Blending Option:

Drop Shadow

Gradient Overlay

  • Linear Gradient
  • Angle: 90
  • #21282d
  • #2f3840 50% and 100%

Now grab some of your works to put up in our slideshow image. From the layers panel create a new layer above the image_holder layer and link it together. Follow how I link it in the screenshot.

For the final step in our slideshow lets create a shadow to make it look like 3d. To do this select Pen Tool(T), follow how I make the shape in the screenshot and fill it with #000000.

Select the layer and go to Filter > Blur > Gaussian Blur, set the radius to 5.0px. At the layer panel set the layer opacity to 80%.

Step6: Working with What I Do

Select the What I Do folder. Now we are going to add the What I Do Header, so select the Text Tool(T) and write text the same ways as in the screenshot.

Add this Blending Option:

Drop Shadow

Gradient Overlay

  • Stlye: Linear
  • #d4d4d4
  • #ffffff

Ready the icons that you have downloaded. We will going to add 4 different folders in our What I Do folder. These are I Capture Smiles, I Design Websites, Awards I Receive and I love to Socialize, these will be on a separate folder.. Now follow how I place the text in the screenshot.

If you are done you may have something that looks like mine.

Step6: Working with Divider

Select the Divider folder, inside of it create a new folder name it lines. We are going to make 2 1px line to make a divider and some blending options to make it more interesting. To make the line we can do this by the use of Line Tool(U), For the 1st line color will be #111417 and 2nd line #364148.

Select Rectangle Tool(U), place it as shown in the screenshot and set the layer fill to 0%

Add this Blending Option:

Gradient Overlay

Duplicate the layer, were going to change the gradient overlay.

  • #242b30

Step7: Working with About Me

Select the About Me folder , now we are going to add the about me header and information, so select the Text Tool(T) and write text the same ways as in the screenshot. I use the same formatting in text as we id in our What I Do section.

Step8: Working with My Portfolio

Select the My Portfolio folder, now we are going to add the about me header, so select the Text Tool(T) and write text the same ways as in the screenshot.

Select Rectangle Tool(U), and place the shape as shown in the screenshot.

Add this Blending Option:

Drop Shadow


  • #161b1f

Now place your sample images at the top of this layer and link it together the same as we did in our slideshow.

Now we are going to add the my portfolio information, so select the Text Tool(T) and write text the same ways as in the screenshot.

Step9: Working with Footer

Select the My Portfolio folder, now we are going to add the footer background, so select Rectangle Tool(U) and set the color to #171c20, place the shape the same way as in the screenshot.

Add this Blending Option:

Outer Glow

  • #111417


  • #364148

We are going to add copyright text in the left side and some links in the right side, so select Text Tool(T) and write text the same ways as in the screenshot.

Step9: Working with Background Light

Notice that our background is just flat. In this step we will going to add more brightness in the slide show area and in the middle area. Now Select Background folder, create a 2 layers inside and name it Slideshow_light and the other is whatido_light. Select slideshow_light layer, select Rectangular Marquee Tool and make a selection as shown in the screenshot.

To create the light select Brush Tool(B) size 700 hardness 0%. Brush at the center top of the selection and at the layers panel set the blend mode to Soft Light Opacity to 70%.

You should have lightning effect the same in the screen shot below.

Now select whatido_light layer. Select Rectangular Marquee Tool(M), make a selection the same on the screen shot below.

Now when you’re done set the layer blend mode to Soft Light and Opacity to 70% this will create a lightning effect that blends to our background shown in the screen shot below.

Finally were done! Hope you learn something on this tutorial and hope you like it. If your have any question or tutorial request drop some comments below. Thanks!

Final Preview

January 10 2011


How To Write Well The Ernest Hemingway Style

Ernest Hemingway, minimalist, good at writing. The first thing everyone will know in a skill are the basic principles and exercises which will be the foundation for the more advanced levels. Take for example the masters in martial arts, every day they practice their basic footwork, basic kicks and punches, everything basic. Why? Because mastering the fundamentals of a skill is the correct path into becoming awesome! Master the basics of writing a sentence and you’re on your way to becoming a superstar.

“Eschew obfuscation, espouse elucidation,” meaning “avoid being unclear, support being clear” as written in Wikipedia. But no matter how much you want to be clear on the things you write there will come a time when you simply can’t be clear. Why? Read on.


You know you can’t write the Hemingway style if you are experiencing the following:

1. Nothing to say


Image by: Penny Mathews

Without anything to say writing becomes slower and harder. You are forced to blabber around for the sake of producing something. Sometimes even becoming redundant. But redundancy has its good effects too, Ernest Hemingway uses it with some of his short stories and they add color to the whole story.

Now, my dear readers, the above paragraph is an effect of having “nothing to say” for this item. Notice that the fourth sentence has nothing to do with “nothing to say”. Do not imitate this very bad example. *laughs*

2. Unable to express

When trying to explain something complicated people tend to use complicated terms for the sake of expressing it. No matter how great your vocabulary is, if your readers can’t connect with the things you say you’re not effective, they will leave.

Not being able to express a thought in a word or two results to a convoluted difficulty in understanding.

3. Word count, so important


Image by: Brenton Nicholls

Writers who are paid per words written will not benefit from this article mainly because this article’s conception is to minimize the use of words as much as possible to attain the highest quality possible through minimalism. However, there is a way. If your quota is 1000 words, write 1500 and eliminate 500.

If you are used to using many qualifying words, flowery adjectives, and would want to reduce that for better quality then this article is for you.


How to write a simple, exact, and great article the Hemingway style.

1. Use Simple Sentences


Image by: Dani Simmonds

You are writing either because you want to explain something or tell a story. The best way for people to understand what you write is to avoid using complicated sentences. The shorter the better. Use words that won’t make the reader reach for a dictionary.

Contrary to my writing tips number 2 “if there’s a word for it, use it” and tip 5 “strong words, strong memory”  do not use strong and exact words if these words are hard to understand. You know, ninja-level words.

If you have seen any of Discovery Science’s shows you will never feel “left behind” even if the topic is about hyperspace and wormholes (…what?) you will understand everything that the narrator and scientists say without having to grab a dictionary. Why? Because they are well-versed in using simple sentences to convey even the most complicated topic. If the topic they are dealing with is far complex than yours, does it not make sense if your sentences are easier to simplify?

Have you read Wuthering Heights? I did and I experienced brain hemorrhage, took me quite some time to love it. The book.

2. Be Positive


Image by: Jonathan Natiuk

Instead of saying “it is hard to walk into Mordor” say “one does not simply walk into Mordor”. The word “simply” gave a lighter feeling in the sentence. No wonder Tolkien made it that way.

Instead of saying “beware of dogs” say “not safe, dogs bite”. The word beware gives everyone chills.

Now why is it important to write positive? Writing in a positive tone does not mean eliminating the use of negative words, it means making the tone lighter. This works when writing instructional articles. The lighter the tone is, the better the readers grasp the ideas presented.

3. Do not be afraid to omit things


Image by: Zsuzsanna Kilian

There are things that require no explanation, just like when I said “use words that won’t make the reader reach for a dictionary”, most of you automatically know why even if I did not explain the reason behind it. That is the beauty of simplicity. You can tell people without actually telling them. How? Below:

  • Use negative words (as opposed to tip 2) to express a positive idea like “suffocating colors” denotes “please change the dark colors to lighter ones, I don’t like it.” Nobody wants anything that is suffocating, saying the word expresses dislike.
  • Figures of speech to explain complicated stuffs, eliminating technicalities. Analogy is a good example.
  • Sometimes you’ll just have to give hints and let the readers form the connection, also saves you the trouble of explaining things when you can’t be so direct to the point to avoid over-explaining things. An example is “early to bed and early to rise, makes a man healthy, wealthy, and wise.”

4. “Write drunk; edit sober.”

Write drunk; edit sober? Just don’t take it literally, you can write great without being drunk, yet.

Write everything related to your topic and leave it for a while, edit later. This is important because you are then giving yourself time to think. This is usually what I do before submitting my articles. After a day of not seeing my article I’ll begin re-reading it and find things that are not supposed to be there, things missing, modifying, and the likes.

5. Integrate with your style

You already have your own style of writing and I’m not suggesting that you abandon it, instead you should integrate it with these tips as you see fit. These tips should be applied when deemed necessary, depending on the audience. For instructions and tips like this article it is best to write simple. But I’m not saying that I have written this thing well, in fact I’m still on the process of making my writing “simple” with a personal touch.

Reasons to write simple

As writers of the online community we only have one goal and that is to give people what we know, to give back and let the process continue. Gone were the days when precious information was kept from the public, when textbooks were only for the high class. Many would agree with me when I say that those written information are still subject to many interpretation and decryption simply because no one understands! Those were the days when the worth of an author lies with how complicated the sentence’s structure is and on deep vocabulary. If we want to inform we need be clear in everything we want to say in order for us to be not subject to misinterpretation.

  1. To avoid misunderstanding
  2. To make information easy to recall
  3. Because you write to inform, not riddle people

Have you ever experienced in your school days when you have something to read for a homework or project but in the most ill of luck you can’t understand a single thing from the encyclopedia? Not fun, right?

January 09 2011


How Can Web Design Affect A Website’s Bounce Rate?

One thing a blogger or an owner of a website needs to take into consideration of is its bounce rate. This is very important for it tells you on how many visitors are “bouncing” away on your site. A bounce rate determines the success or failure of a website.

Wikipedia defines bounce rate as:

A term used in web site traffic analysis. It essentially represents the percentage of initial visitors to a site who “bounce” away to a different site, rather than continue on to other pages within the same site.

Mr bounce rate

Image by: ddablogimages

With this definition, we may say that the lower the bounce rate of your website is, the better. For this means that visitors are exploring more through your website’s content.


Reasons on Having High Bounce Rate

These are the common reasons why a website may have a high bounce rate:

1. Loading and Error Issues

Viewers are impatient when it comes in loading a website. If it takes too long to load, users tend to just close the window or find another site related on what they are looking for.

Fully loaded

Image by: Doomgiver…

Few Reasons That Can Slow The Loading Performance of your Website:

  • Too much Flash effects.
  • Huge sizes of images.
  • Videos that automatically buffers.
  • More requests submitted on the server.

Have you experienced where you went to a site and all you see is a code instead of the content that was supposed to be shown on the screen? Of course you will feel bad about it, so you just close it and find another website.

Website error

Image by: pneff

2. Poor Web Content

Another element viewers are looking for on a website is a good content. Good and enticing content gives your viewers a drive to read more and explore your site from one page to another.

Lorem ipsum content

Here are some characteristics a web content must have:

  • Well-Informed

Viewers are good at recognizing if a website offers a well-informed content, for they are trying to find the most relevant and quality content related on what they are looking for. Put all the relevant information that is needed by all kinds of viewers. Also, always start from the most significant information. Your text is one way of promoting your site, so your better put relevant information on your content.

  • Well-Written

Grammar is very important to consider in writing an effective web content. When viewers see that your content is in good grammar, it gives them an impression that you are knowledgeable. A content that is well-written tend to bring viewers back again and again on the site. Also, it must be constructed well to give a professional look on your content.

  • Brief and Precise

Your viewers are impatient to read a lot, and they are always excited to have the information they want and go on. Make sure your content is brief, maybe at least 300 words and 600 at most. Also, you should balance your content to have a brief yet well-informed content.

It should also be precise. Your site’s content must give a clear explanation on what you want to convey.

  • Interesting and Entertaining

Even contents must be interesting to the eyes of your viewers and must give an entertainment. In this way, your viewers will have that excitement to read and explore on what your website offers. This also lessen the boredom they would feel even they are purely reading a text.

  • Original and Unique

Originality and uniqueness matter in everything.

Originality makes your content, as well as, your website to stand out from the rest of other related websites as yours. You can get ideas from others but never copy the same content.

Also, viewers does not want to read a content that is the similar with the most. They always want something new. Always try to put a twist on what idea you have in mind to make it unique.

  • Relevant and Attractive Headings

Headings are very important, because these are the first phrase your viewers will read. It should be relevant, where it directly describes your topic and if possible sums up everything you write. It should be attractive and drives curiosity on your viewers. You may read our article about writing effective headings here.

3. Poor Web Design

There are a lot of ways where you can decrease the amount of your bounce rate. But before anything else, start from the thing where you have all the control on what to choose from. Start decreasing your bounce rate by designing your website properly.

The design of a website is a great factor where you can decrease your website’s bounce rate. I have here the different components of a website and some tips on each to help you in getting a lower amount of bounce rate:

Domain Name


Image by: piestobis

A domain name is a combination of letters, symbols or numbers that labels an entity on the Internet. It should be specific, unique and captivating. Remember that your domain name must reflect on what you are advertising for.

  • It should be brief. One or two words with five to eight letters could be enough for your domain. Viewers does not want to type a long URL, this annoy them so much.
  • It should be easy to remember. Your domain name is your trademark that reminds your viewers that this name has this kind of website.
  • It should not be complicated. Do not make it too complicated to pronounce and understand, so your viewers will easily remember your address.

Web Interface

A website with a boring design makes viewers look like this:


Image by: Chelsea

I know you don’t want your viewers to feel bored when viewing your site. Each viewers are expecting an attractive web design to make them feel excited to explore.

Usability is also one factor viewers are expecting on a website. A site with a user-friendly interface and navigation is a thumbs up on your viewers. This gives them comfort in browsing your website.

Creativity should also include on your component when we are talking about web interface. A beautiful background can attract viewers to explore your website, just make sure that your background is related to what you are promoting for. Also, never use more than one background on each page. This gives a thought to your users that when a background changes, they are stepping on another website.


Image by: Donna *deestea*

Colors are also one way of bringing your viewers to go on your web page onto the other. Capture their attention by using attractive colors that is relevant on what you promote. Never use bright colors, this can irritate their eyes. Also, choose a color combination that could reflect your business or personality.


The first things your viewers may notice on your site is the header. Today, many websites have artistic or creative headers. In this way, you catch your viewers’ enjoyment and able to explore your website. So if your website does not have a nice header, they just tend to leave your website.

Take a look at these websites that have attractive headers:

Daniel J. Quinn

Daniel quinn

That INDIE Dude





Navigation is very important on your website and for your viewers, this is their way on browsing the rest of your pages. So, if your navigation is not well-designed your viewers will just “bounce” away on other site.

A navigation should be:

  • Noticeable. As what I have mentioned awhile ago, navigation is your viewers’ way to explore your website. Making them easily noticed gives your viewers the urge and curiosity to “bounce” on one page to another. The color of your buttons must contrast your background’s color, so it can be easily noticed.
  • Easy to understand. Navigation must be easy to understand by your viewers. The moment they see it, instantly they should know on how the navigation works.
  • Attractive. One component of a website that could capture viewers’ attention is with your navigation. Make your buttons attractive by putting a hover and a release effect. Putting sound effects may attract too.

Here are some examples of websites with well-designed navigation:

The English Riviera Comedy Film Festival

The web design itself is creatively designed. With the navigations, they are put into contrast colors to make them noticeable.

The english reviera

Hug My Mac

This is a good concept where links are separated by using different images and circles. In this way, viewers already have an idea on what to expect when they click a button. A well-designed navigation indeed.


Time For Cake

I find the navigations so unique to put it as a list and the font used are very attractive.

Best colorado web


Typography plays a big role in conveying a message on your site. You can use typography when you want to focus on something. Here are some tips when it comes to choosing your fonts:

  • Readable

If your viewers find it hard for them to read your text, they would just close the window or find another website. Make sure you fonts are in a size where it can be read properly. Most designers use 12px for the body text and H2 for the header.

  • Appropriate

Be appropriate. For instance, if you are creating a website for a company it would be better if you

  • Creative

Did you know that you can be creative evener  with the fonts you are using? Yes you can. For instance, if you want to emphasize something you can put your fonts in bold letters. If you want to put more life on your site, use lively font colors. Just make sure it still look readable and professional.

Here are some websites with a good typography:


The fonts are creatively done. I like how the designer use typography to make the website look attractive.



The fonts are very readable and clean. Make sure you put your font colors in contrast to the color of your background.


Hull Digital Live 09

Even there are several fonts used on this site, I still find it very clean and well-designed.

Hull digital live


Putting media is a great way in attracting viewers. When they got attracted, they tend to explore more of your site.

  • Audio


Image by: Northwest Folklife

Music is relaxing, but not appropriate for a website. It is not good to put a music on a website. First, it adds to the loading. Second, it can annoy your viewers. There is an appropriate place for music, but it is not for a website.

If you want, you may use sound effects but do not put too much. It will make the website look unprofessional.

  • Images

Image icon

Image by: ArtsySF ©

Images are great way in attracting viewers. Research says that viewers are more into viewing images than reading.

    • Put images but be sure they are related on your content.
    • Do not put images that is too large in size.
    • Pure texts can be boring, as well as pure images. Combining the two can make your website look good.

If you are promoting a product, you can post a picture of that product. This is a good way of informing your viewers on what your product looks like.

  • Videos


Image by: Rhor

It is okay to put videos, just make sure that they are related. Also, do not put it in an automatically played setting. This makes the website load slowly.

Balancing media and text is equal to a perfect web content.

Here are also some of the components you must have and must not have on a website to reduce your bounce rate’s amount.


Image by: Snæþór Halldórsson

These are the things viewers might consider as distraction when viewing a website:

  • Automatic Pop Ups
  • Scrolling Texts
  • External Toolbars
  • Automatic Downloads

Never put these on your website. I tell you, your viewers might get annoyed or distracted and just leave your site.

External Links

External link

Image by: Courtney Bolton

External links are hyperlinks on your website’s page where will lead you to another website.

As the definition says, it leads on another website. This is not your purpose, your purpose is your viewers to stay on your website as long as possible. So, avoid putting too much external links on your site to avoid high bounce rate.


Interaction between you and your viewers is a good way on letting them be back again on your site. For bloggers, interactions can be a great way to give a good amount of bounce rate on your blog.

Here are some ways to create an interaction on your site:

  • Feedbacks

Feedbacks are good ways to know on what your viewers or clients think of what you advertise. In this way, you will know what they like and they don’t. This also gives an impression that what they say are important to you.


Image by: Jorie O’Brien

There are a lot of tools you may purchase on the web in collecting feedback on your site. Here are some of them:

Concept Feedback

Concept feedback

Five Second Test


Please Critique Me






  • Comments

Comments build communication and relationship between you and your readers. The more interactive your site is, the faster it will become popular.


Image by: premasagar

I have here some comment system you can use on your website or blogs.


In our blog, we are using Disqus. Disqus is a platform that can help you build an active community within your website.



  • Realtime comment system
  • Social integration
  • The Community Box
  • Connected communities

Intense Debate

A comment system for WordPress, Blogger, Tumblr and other blogging and CMS platforms.

Some features it has:

  • Commenter Profiles
  • Reply-by-Email
  • Comment Threading


Click here to see more of what it can offer.

About Echo

Publishers can quickly embed Echo on any site and turn their static pages into a real-time stream of Diggs, tweets, Facebook updates, comments and more.


  • Increase Traffic
  • Increase Engagement
  • Increase Time Spent


Web design plays a big part in gathering a good bounce rate. All you have to do is to attract while advertising your own or your business. Attract while advertising. Advertise and inform.

Your Thoughts

What about you? Do you have anything to share regarding this? Feel free to share it on the Comment section.

December 29 2010


4 Reasons Why Designers and Developers Should Learn to Write

Let me tell you a secret that involves writers, designers, photographers, developers, and everyone who make a living by using their technical skills. If you are using the internet to gather and share information you really must learn this secret. What is the secret, you ask? The secret is that everyone should learn how to write in order to advance well.

The days of people who focus only on one skill is numbered. Slowly, and steadily, a rise of designers, photographers, developers, and anyone who knows what a blog is are starting to write.

This will be harsh for people whose desire is to focus only on their trade. People in the online community will soon eradicate specialists, the internet will be filled with Jack-of-all-trades and if you are not one you won’t get noticed.

Reason #1: To be noticed


Image by: Peter Suneson

Yes, you are a great designer but do people even notice you? It is actually all about ego. Learn to write and start a blog to let people know who you are and finally create your online persona –  how people look at you in the online community. This is important, ego too, because when you finally get noticed by a large community, that itself becomes your ticket to becoming a superstar.

Why do you need to be noticed? Simple. Wide audience spells more business opportunities. Once known by thousands of people you can actually say that your life is secured. It’s like planting your roots so deep that even frost won’t reach. (LOTR reference, cool!)

Reason #2: To build confidence


Image by: Kevin McGee

Of course everybody knows how to write, what I mean is to write things that people would want to read. When you become more knowledgeable in your field you can gain more authority by giving people tips and tutorials. Share your experience and inspire people.

Think of the first website you run into whenever you have questions. People who can answer your questions in forms of a discussion or an article sure are impressive. Why? Because they are confident enough that the information they give will be of help, mind that anyone can view information on the internet.

TL;DR version (Too long; didn’t read):

It takes guts to write a tutorial. If you do, you are on your way to a distinguished road.

Reason #3: To start a business


Image by: Michal Zacharzewski

Perhaps a goal that every freelancers share is to have a business of their own. And business entails lots of writing. To kickstart a freelancing business you need, of course, an avenue to showcase your works and for people to see you. Meaning you must have a website. There you must tell prospect customers why should they choose your services and what makes you reliable. Refer to #1 and #2.

It is practical to do more with less people involved. If you can write, you won’t have the need to hire a writer. Or in the case when you will really need to hire one, at least you have already experienced writing and know how things work (one way to avoid a scammer). *laughs*

Reason #4: To mentor


Image by: Quynhyen

Days will pass swiftly and many will not even notice until they’re already about to retire. It will be a liberating experience for a few months until you realize you are actually no longer being productive. Depression will kick in and wrinkles will be carved. Nobody wants that, right?

Realize that you can actually be more productive while helping people get up their feet. A simple analogy for MMORPG gamers: when you finally reach the maximum level what do you usually do? That’s right, help people. With all the experience you have your knowledge of things will surely benefit young people, and they will love you for that. And mind you, the internet has overcome the Great Wall of China, which makes connecting to people very easy. Because of the internet and its fast revolutions you can reach millions of audience. You can be a mentor.

What about writers?!

Writers should go outside of their comfort zone and write on different niches. Practice different writing styles, imitate famous journalists and novelists, and you will be super! By stepping out of your zone you make yourself vulnerable to harsh elements like criticisms for a poorly-written article or worse no audience at all. But the risk and pain involved is inversely proportional to the knowledge you will gain.

I love sharing personal experiences (in case some of my readers have noticed) and now I will tell you a very short one.

I began writing love poems back in high school, they were so terrible that I dared not show them to anyone. Soon I started writing short stories and I joined my school’s official paper. I wrote feature articles and became an editor. And during my last year in college I was an editor of my college’s official paper. Now I am writing for 1stWD and I am very happy. From pesky poem writer to short stories to more serious business I daresay I have improved quite a bit, but there’s still an ocean of knowledge I need to swim on. And I will!

/Boring Story

It is good to write things you know because:

When you write, you share

When you share, you help

When you help, you make the world better

When the world becomes better, living becomes easier

Living easily means more happy people

Happy people are inspired people

When people are inspired, they share

And what they want to share, they write

Need Help?

I know my writing is not that great but I am willing to help people! Just ask and I will be there, I’m pretty quick at replying. Feel free to criticize (creatively) things because when you do, you help people improve. Share your suggestions or violent reactions below. Please?

December 03 2010


How To Actually Use Negative Space As Design Element

Negative space is an important element in making website layouts and logos although it is very tricky to combine negative space in designing but once you are able to do it, it is not something to be overlooked or avoided. I usually call it white space, and to be honest many new designers usually make a mistake of creating chunky websites with too much information in it and without any spacing.

But believe me spacing does wonders, for even young designers – you can look professional quickly with minimal website..just put less content use negative space and you’ll be more successful than others starting just out.

But note  - great design takes all the space available into consideration, both used and unused elements.

What is Negative Space?

Negative Space is also called white space. These are spaces without content although they are called white space, “Negative Space” doesn’t have to be white. It can be any color, it just doesn’t have any content. Negative space is also a design factor although it is not easily recognizable, basically the use of negative space is to add symmetry to your layout and make it look clean, natural for visitors.

Even if your website has great content but will have a poorly designed layout, it just won’t work – you will fail to create effective website, I think good layout design and native navigation through it is even more important than content!

Negative Spaces Revealed! – Examples

Here’s an example of an optical illusion that uses negative space.

It’s a chalice but with the white space you see the faces of two people facing each other. This is how you spot negative space, with only 1 object but can be interpreted as two or more different things.

Negative Space in Web Designing

Designing a webpage layout includes objects, text and images in an attractive manner.  This also includes negative space – the spacing of objects from one another. You don’t make a webpage layout with images that overlaps with another image right? That is how negative space is used. It keeps the viewer’s eyes focused on the objects. Negative space should be used to balance or align objects in a design to make it more appealing to the viewers.

Filling your navigation with big fat buttons might be a good idea but just because there is a space that could be filled doesn’t mean you should place something in it. For navigation I would suggest just to use small icons with little but noticeable text just to make it sleek, simple..and don’t forget to use nice spacing.

Here are two images that I made to demonstrate how negative space can affect web page layouts. It’s a typical webpage template that has a navigation bar/buttons, logo, content area, and Latest News part. I simplified it to black and white so that we can easily spot negative space.

Let’s identify the parts:

  • The upper left black box is where you put your page title or logo.
  • The three boxes are your navigation buttons
  • The rectangle on the left is where your main content are.
  • The rectangle on the right is where your latest news are.

Here is a negative-spaced layout.

See the consistency of the spacing? You can see the objects neatly and can focus on them with ease. The spacing between the objects is consistent, producing a good design.


Now here is the not-so-negative-spaced design, although a bit exaggerated. The navigation boxes aren’t aligned on anything below, the part where you put your page title or logo is a little large and occupies the upper left of the page, the main content occupies the left to the center portion of the page and the latest news part might be distracting for the scrollbar.

This is just an example of how negative space can destroy a web layout. You can easily spot the inconsistencies in the spacing of objects, it might create distractions to viewers.


Negative Space in images.

Here are two images that I also made, one with much negative space and the other not so much.


You can focus on “the box” easily on this image because the object is not occupying the whole page.


You find it difficult to focus on “the box” since you can’t look at the square and the text at the same time because the object is too large and it occupies the page completely.

That is how negative space works, it should help viewers focus on the objects that they should see instead of making their eyes look all over the place. If that happens they might not see what they are looking for in the website making them close their browser tab or go to another website.

Considering Negative space in Making logos

Nothing can beat a logo with a clever mix of design and negative space, you include 2 or more objects in only 1 logo.


See the negative space between the E and x that looks like an arrow ?

Here are some logos that uses negative space effectively.

1. Martini House

Two wine glass combined forms a shape of a house.

Image by EBrown

2. Wooden House

A tree with a negative space shaped like a chimney and a roof.

Image by iskender


An upside down tack and a triangular white space forming a letter A.

Image by Logomotive

4. Babelfish

Letter B with a white space in the middle that is cleverly shaped to look like a fish.

Image by Rokac

5. Paint the City

White space that is shaped like skyscrapers while the red color forms the shape of a bucket.

Image by HitByReindeer

6. Yoga Australia

The shape of Australia’s territory/map is formed inside the leg and the arched back.

Image by RoySmith

7. Helping Hands for Pets

Here shows the shape of pony and a cat in green portion, a dog and a bird formed by the white space.

Image by PixelJuice

8. Wiesinger Music

Piano keys that forms the letters W and M.


9. Spartan Golf

An arc that looks like what’s on the top of a Spartan helmet and a golfer that forms a Spartan face.

Image by Lexlogo40513

10. Quotekid

Single opening quote and a single closing quote combined to form a face.

Image by tabithakristen

Negative Is Actually Positive!

Negative space can be really tricky to incorporate in designs and especially in logos but once you are able to pull it off it can really make your website easier to view or help you in advertising your product.

What’s your experience designing layouts using white space, some valuable tricks you learned you would like to share here? Open to discussion!

December 02 2010


Using Flashy Product Photos to Improve Your E-Commerce Design

The main most important design aspect of any e-commerce website would be product photography. Being unable to touch, smell, taste and hold, alternatively handle the product they find interesting, the closest interaction the client could get are the images. Basically, the softer, tastier, flashier and more attractive your products look to shoppers, the more confident they’ll feel about purchasing from you and the better your conversion rate will be.

Knowing how deceivingly great product photos can look , keep in mind that your images should complement your website’s overall aesthetic and your company’s image. Let’s start with a few great examples of how online retailers have incorporated best quality product photos onto their websites and focus on images of actual items, rather than models, events or landscapes.

Great Examples of Flashy Product Photography

1. Mutant Shop

Very funky and uniquely crafted toys. Its clean product details and catchy colors invites the users to click on further and view their products.

2. Apple

Known and loved by gadget enthusiasts, Apple showcases their products that they can’t resist. With an additional limited number of images and a simple twistable 360-degree viewing mode, designers behind this website visually sum up Apple’s chant of fun and simplicity.

3. Better Closet

Provided with navigational options, users can search for their desired product easily. And with vivid detail of their products, they attract costumers even more.


One of the many known T-shirt companies. This one has a super-clean website and keeps the product well in focus, despite the human models (may sometimes distract from the product).

5. Soup Studios

This site sells very unique and one of a kind pottery, and ornaments. Their straightforward value proposition is strong and the content and labels chosen have shown customers why they should buy from them.

6. Bang & Olufsen

At first glimpse, it seems a bit less appealing, audio-video manufacturer Bang & Olufsen opts for a harder, more architectural aesthetic than some of the other websites we’ve looked at. While there is plenty of black, gray and white throughout, this website is far from cold and sterile, thanks to the side-sweeping product photos, which are bright but do not compromise the futuristic feel of the design. The pages of Bang & Olufsen’s collection have another nice touch: product thumbnails glow when you hover over them.

7. InCase

InCase offers not only neat and catchy product details, it also has the images of the product in different views. Thorough product details and reviews allows users to decide on their purchase more meticulously too.

8. Leica

From one of the world’s biggest names in photography and imaging technology, Leica has some high-quality images, especially of its camera equipment. You won’t find a ton of photos here, but in keeping with the brand’s no-frills, no-nonsense approach, the pictures you do see are high-res and sharp, a perfect example of how to do more with less.

9. Dog Funk

Touching up with a soft grunge style, this website sells snowboarding clothing and gear. Showcasing products with high quality images that would allure snow sport athletes and enthusiasts.

10. Chocomize

The ultimate playground for chocolate lovers. Provided with a wide variety to choose from, sweet-tooths can customize their own chocolate of their favored chocolate, fruits, nuts, herbs & spices, candy, decoration and other ingredients to satisfy those taste buds.

11.  Accessories Online

This site is a good example of clear Call to Action at above the fold of the site. Which caters to a wide selection of categories for different user needs.

12. Ties ’n’ Cuffs

This is another e-commerce store with a huge selection of cufflinks, ties and other accessories. Just like, it offers a handful of photos for each product. But Ties ’n’ Cuffs gives a super-clear picture of product details, letting customers zoom in to the image, that one might miss in a wide shot and showing how the crystals reflect the light. Browse around this website to see how they’ve implemented their zoom function for many different products.

13. Toys R us

This site displays high quality photos of their products with vivid bright colors and detail. The site attracts customers from toddlers to moms and dads.

14. Abel & Cole

This homepage states very clearly why people should shop with them together with 4 reasons. This is their up-front value proposition and the core value that is well blended into the design and the organization.


This site clearly invests on good photography on it’s cufflink products. It offers customers a good view of its cufflinks from all angles. It also shows the packaging or box that the cufflinks will ship in, giving us a well-rounded impression. Fortunately for this company, the size and inflexibility of cuff links make them a relatively easy product to photograph. Take a look at their many other products and the different angles the shots have been taken from.

16. Dune

Using a large high-quality photo on the background gets the customers’ attention. Displaying their designs in such a vivid manner, this site delivers their message upfront.

17. Archiduchesse

What’s great about this site, is that the user is just 2 clicks away from the ‘Check-Out’ button. This increases the functionality of the site, and easy purchase could also mean higher sales. Very smart and creative at the same time.

18. Victorinox

This brand is known for precision equipment. Victorinox has a remarkable range of visual content on its website, especially in the product area. The website has a high-profile on its great examples of selective focusing and dramatic lighting, which really make the products outstanding.

19. Chrome Bags Store

This site displays realistic photographs of people on the move, while using their product. Using awesome photography skills and carefully choosing the best shots to display.

20. Pong Cheese Shop

This site offers a convenient gift-giving service. You can put in a personal message in the checkout and they will hand write it onto a card for you. They display high-quality and clear images of their dairy products.

21. Harry Winston

This high-end jewelry line website, uses very vivid and close-up photographs of their pieces. Showing every great detail of their celebrity-chased collection of jewelry.

22. One Horse Shy

This site uses very clear shots of their tees and the prints on them. Giving customers an emphasis on what design would suit their interest.

23. Munich My Way

A clean and simple site, that gives focus on their products. Displaying very clear and consistent images, helps customers see the details and size of the footwear.

24. does an excellent job of showcasing its products from multiple angles and perspectives without disorganizing the website or making the images feel redundant. The selective use of color throughout the website directs attention to the products themselves, while giving the overall design a sleek minimalist feel.

25.Fugitive Toys

This site showcases their products with vivid and colorful images that catches the customers attention. They also give the customers a clear view of their toys in various angles and gives full attention to details.

26. Itself

This site clearly states what their products are all about. This minimalist design gives a more focus on the product images which is good for the customers viewing.

27. Big Brown Box

The site showcases their appliances using alluring images that would invite shoppers to view more. They display high-quality and detailed photos of their products.

28. Trolley Cards

This site does an amazing job on showcasing their cards. Using great photography in various styles that allure the shoppers to buy their products.

29. Rapha

This site clearly invests on high-quality photography to sell their products online. They use photos that has subjects who actually are using the products rather than just using plain boring product photographs.

30. Pure and Little

This site showcases their products by showing cute, dramatic shots and good lighting. They clearly know how to pick effective photographs that will captivate the shoppers’ attention and click for more.

31. Tillymoss

The showcase of various designs and clear shots of details makes it easy for the customers to pick their favored choice. Using great lighting and best angle shots, the products are very eye-catching.


Give your customers the best quality images to help them decide and give them a clear view of  the products you sell. It is important as well to provide user-friendly navigation and guidelines to assist the shoppers work their way to buying your goods.

November 02 2010


Why Focus on Money and Then Traffic (and How to Do That in Google Analytics)

If you’ve ever had your own website, you probably know that the first thing you need to do in order to promote it is to get traffic. Then you can install Google Analytics and track that traffic, learn more about visitors, where do they come from etc.

The need for getting traffic is emphasized a lot. Actually, it is emphasized to that extent that people forgot one fundamental thing:

- A visitor to your site, by itself, is useless. If a particular group of visitors from a traffic source don’t do anything then why bother attracting them in the first place? Yet, millions of webmasters do it every single day. They put traffic before money. All of this because of one fundamental assumption.

If you have traffic, you’ll eventually make money. THIS IS NOT TRUE.

How do I know this?

Because I’ve taken this concept the extreme. I created a site which ranked in the top 10.000 most visited websites in the world (according to I got all my traffic from Digg/StumbleUpon, thousands unique visitors per day. I actually got on the Digg front page 5-6 times and frequently got 30.000+ views from Stumbleupon on each of my articles. The whole site got over half a million unique visitors in 6 months.

My assumption was: Boy, I have so much traffic, once I put something like AdSense, I’ll be making decent amount of money. Maybe like $10 a day. So I put AdSense and waited for 3 days…

…and I made less than $1 a day. The CTR was less than 0.1%. Ouch! The sad thing was that I was working on the site for more than 6 months (you think getting into top 10.000 on Compete is easy?) and was operating under this flawed assumption.

I could have also made money via pay-per-view (some sites pay max. $2 per 1000 views) but still that would have been less than $1000.

Traffic = Money Sounds EASY

This is the reason, I think, people accept this assumption without being critical of it all. It sounds easy, comforting. Something like having a day job, you know that if you work for a month you’ll get the salary. Same here, just work on the traffic and the money will come. As we’ve seen, this is far from the truth.

What about Facebook?

There are exceptions, though, and this is where traffic is taken to the extreme. If you capture an enormous number of visitors (20.000+ a day) then you should make some money. Facebook has millions of visitors per day and they make a lot of money. What about Twitter? Well, they also have a lot of visitors but haven’t figured how to make money yet. Some people take Facebook/other high-traffic sites as an example that traffic = money. However:

a) Not everyone can have millions of visitors on their website per day. The number of people online is limited, so you’re way better off focusing first on monetization and then on traffic.

b) You will need a lot of luck to get to the size of Facebook. You also have a big competition for traffic. Many people are myopic in terms of blindly competing for traffic without realizing that, if they were to have a business online, their first priority should be MONEY, not traffic.

And if you think about this, the sheer amount of volume Facebook got allowed them to attract a whole different range of advertisers a smaller site would have no way of attracting.

5000 Visitors Per Day and Making $1  or 500 Visitors Per Day and Making $20?

I met people who are making barely $300 with 100.000+ visitors coming from Stumbleupon/Digg. On the other hand, I’ve met people who are making $10.000 with around 30.000 visitors coming from Google/other high-quality traffic source. The idea I want to propose here is to focus on MONETIZATION first and TRAFFIC after that (like most businesses do).

When was the last time…you’ve seen a fastest growing business focus on getting prospects first without selling anything? Most of them actually have their own products which is (and will probably always be) the best way to make money in any industry. The reason for this is probably because you have the most opportunities when you’re making your own product: you can do PR, SEO, paid traffic, pay bloggers to blog about your product etc. You can then carefully analyze and see which traffic source brings most sales and focus on that. Then you have the word-of-mouth advantage, you’ll have people that will spread the word to their friends and you’ll also have repeated customers.

How to Focus on Money Using Google Analytics

There’s one great feature in Google Analytics called GOALS. If you have an Adsense account, you can automatically link Analytics + AdSense and the goals will be set up automatically for you. In case you’re selling a product you’ll need to do the setup yourself.

For example, you can count as ‘goal’ the moment someone gets to the ‘thank you for purchasing’ page. What that means is that they’ve gone through all the steps like taking a look at your product, going through the shopping card, entering their payment details and purchasing.

Google Analytics can then tell you what referrers sent you the biggest % of people who completed a goal (purchased your product). For example, if you’re selling an anti-virus software, you might discover that 3% of the people who type ‘good antivirus software’ on Google but your product. You might also discover that you did a recent PR campaign and people coming from some famous magazine tend to buy more  than average.

In that case, you’ll want to do more work for those traffic sources. Let’s take the previous example. If you rank #4 for ‘good antivirus software’, you might want to get to #1 in order to receive a bigger number of people who will eventually convert at 3%. Or you might want to create a deeper relationship with that famous magazine so they do more cover for your software.

Another good strategy is to focus on the low-hanging fruit. Identify traffic sources outside of the top 10 that brought you a sale or two. Do some research on them and see if you can bring more visitors from these traffic sources to see how they convert at a bigger scale. For example, you might notice that you got 2 sales from some old guest post you did. What about doing another guest post on that blog? Let’s suppose you did another guest post and saw that people convert consistently from that blog. Here’s an opportunity for forming a deeper relationship and posting regularly there.

Mark Joyner, the founder of Simpleology told one really profound story. While Mark was in the U.S. Army Officer Candidate School, they had an instructor whom they called Yoda because of his superior skills/accomplishments. One day they had a class from Yoda. He asked his students “What is the one skill that defines a leader?” Many people tried to guess. Some guy said “Communication skills!” Yoda replied: “Oh really? So let’s have you have a suicidal tactical and you communicate it oh so clearly to your troops. That makes you a leader?”

Another fellow student tried to guess: “It’s charisma!” Yoda replied: “Oh, are you joking? So you’re a tactical moron but you look good in your BDUs. I just wrote your tombstone for you. No charge. Next!”

And so it went and nobody was able to say what’s the defining characteristic of a leader.

Then Yoda finally told the answer:

“The one skill that defines a leader is the ability to see the battlefield”.

A really profound lesson. When you think about it, it might have been obvious…what’s the use of communicating clearly or having charisma when you can’t figure out what’s going on the battlefield?

In the business battlefield, money is the main way businesses keep score. But can you see the battlefield? Can you see where money comes from? You decide. Focusing on traffic for a long period of time without focusing on promotion is ignoring to see the battlefield for a long time.

WHEN to Focus on Traffic

Of course, you should focus on traffic but always ask yourself whether it brings you money/any other benefit. For example, you might want to test some traffic source. Bring some visitors from it and see whether they buy your product/affiliate product/click on ads.

The main point is, traffic does not always equal money. The best way to see whether a particular traffic brings money is to test and not just assume.

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

Don't be the product, buy the product!

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