Google is the world’s largest business directory – any search brings up a huge number of competing organisations trying to get noticed.  As more traffic is driven by Google each day, it is becoming a necessity to stand out in search listings.

 

Since June 2011, you may have noticed pictures of authors next to search results for their articles. These authors have linked their work to their Google profiles in an effort to attract more clicks – a picture and byline can draw attention towards a page, and can link to other work by that person.

There are obvious potential benefits to a Google authorship profile – a photo and name are eye-catching and will make a website stand out next to other search results, but some have suggested that it isn’t worth it.

Having your name and picture displayed in search results requires setting up an account on Google plus, the search engine’s answer to Facebook. Authorship has been criticised as just one way for the search engine to use its domination to promote Google plus.

Tying your professional design work to your Google profile can make some people uneasy, especially if you use Google plus in a social capacity – mixing your personal and professional life online can be a concern for some people.

However, there are other benefits to having an authorship profile beyond seeing your picture next to search results. As Google gives better rankings to websites linked to Google profiles, authorship can boost your visibility to potential clients. Perhaps most importantly, a Google profile makes your work more personal – if a client can see who is behind a website, they will feel a more personal connection, and may feel more comfortable hiring you.

Your Google profile can also display a wide range of other design projects you have done, in effect an online portfolio.

A Google authorship profile does require work to set up, and a degree of professionalism on your authorship profile, but the advantage of adding a personal touch to your work will make it worth it for many.

How to set up a Google authorship profile

First, you need to set up a Google plus profile at plus.google.com. Fill in your details, including a professional picture and some of your details. For Google to verify you as a legitimate author, your profile must be fleshed out with some detail about you, but edit your privacy settings to make sure that certain private details, such as your telephone number, are not made public. The more active you are on Google plus, the more Google will trust you, resulting in higher search rankings.

When editing your profile, add the websites where your content is hosted to the ‘contributor to’ box. You must then link your website to your Google plus profile, which can be done by providing an email address that links to your website, or by adding some simple code to your website.

Google will then take some time to verify you as the author of the work, but eventually your authorship profile will show up alongside your search listings.

As potential customers, people come to an exhibition or to your office to find the next diamond in the rough, the designer that will understand their business needs and someone with a creative streak.
In one short meeting, or even if they simply visit your stand and you are too busy to talk, how do you make sure that the opportunity to convert them from potential customer to actual client isn’t wasted?
First impressions are important! Often at product launches or industry conferences and exhibitions you get just one chance to make an impact on that prospective client. Scribbling your name and email address on a tea-stained post-it note will get you remembered, but for the wrong reasons! Always be prepared – carry a few business cards on you and regularly top your wallet up.

Prospective clients will shop around at an exhibition and will end up taking a bagful of brochures, leaflets and business cards home with them. We have all done it. The likelyhood is that they will only contact a small fraction of these so the aim is to be as different and innovative as you can so that you are remembered for the right reasons. Avoid having a typical corporate business cards design – aim for something more unique.

The way people do business has changed and as a consequence, business cards have changed too. They used to be standard, the more raised and gilted the lettering; the more important your role in a business, but then they needed more information on them: A logo, your full address, telephone, cell phone number and normally a hook line. Now that people are used to being sent to a website to view your portfolio, you really need to provide three things:

1. A website address
2. An email address
3. A reason to take a look at your website and contact you

So, how do you get the client to contact you first rather than chasing them up?

Be creative, generate intrigue and interest. Have a point of difference! If you’re a designer, show them what you would be doing for their business. If you can’t do it for yourself, why would they hire you?

MiniCards are a great idea. Half the size of a normal business card, they might be little, but they do pack a mighty punch! With a variety of different uses, it’s sometimes tricky to list them all – event cards, name cards, mini business cards, swing tags, gift tags, save the dates, promotional cards and cards to show off your photography or design. Unique in size and shape MiniCards work well with Printfinity, our option to print a different image on every card in a pack. Fan them out and ask people to pick a favorite, fill a giant wine glass with them, attach them to retro sweets, or place them in with customer orders as a cost effective way to brand your products. Printed on thick paper stock and finished with a matte laminate, the cards have a smooth satin feel. They’re smart enough to promote your brand, and a fun way to open up a conversation. You will find that everyone does a double take when they first see a minicard.

MOO Giveaway With Design Reviver

Design Reviver are pleased to be working with the guys at MOO.com in offering a giveaway to win some of their MiniCards and Business Cards! In case you?ve not come across MOO before, they are business card printing specialists, but also love to print greeting cards, MiniCards, stickers, postcards and labels – MOO do it all!

A Little More About MOO

MOO was born from a passion of beautiful, high-quality print and design – they make creating and printing your own unique visions so easy. You can choose one of their business card templates or upload your own artwork to create truly unique, creative products.

Competition Prizes

Grand Prize Winner – 1 lucky winner will win a set of 100 MOO Business Cards AND 100 MOO MiniCards.
Runners Up Winners – 4 runners up will win a set of 100 MOO MiniCards.

How to win

To be in with a chance of winning one of the MOO prizes, all you have to do is leave a comment below and tell us how you would make your business cards stand out from the crowd. Be creative, fun and most importantly unique! If you make us smile you’re in with a great chance of winning some great prizes.
Winners will be selected from the comments below. Please remember to enter a valid email address so we can send you your free stuff.

With bounce rate and time-on-site assumed to be the top trump cards in Google’s new algorithm; there is most certainly a push from Google — and subsequently advertisers — for websites to become more user, in addition to search engine, friendly. Read on to find our top ten tips for enhancing the user experience including everything from Search Engine Optimization (SEO) and rich media, to navigation and mobile device optimization.

1. Faster is always better.
It is not a newsflash that speed and load times rule the web. Every second a user has to wait, the more likely they are to leave your site. If you’re experiencing some lag time, try reducing the number of HTTP requests by simplifying the design, using CSS and CSS Sprites, combining images into a single file, and reusing elements — like page headers — which can reload from the cache. You can also create the illusion of speed by placing style sheets in the header. This will allow the header and navigation menus to load first thereby showing progress and pacifying user impatience.

2. Simply site navigation.
The foundation to every webpage is the sitemap and navigation. Clear and concise menus are essential as well as a single page showing all links. Online reading patterns lend themselves to the typical “F” pattern (example below). To ensure that the user can easily interact with your content, keep a relatively short list of menu option down the left side and across the top. Be sure that all navigation info stays above the fold and that the logo links back to the homepage. Intuitive navigation outlasts number of clicks, so go ahead and forget about that 3-click rule. Not to imply that the user will stick out a lengthy path, but ultimately clicks don’t cause user frustration, poorly organized sites do.

3. Embed Rich Media
Tickers, videos, animation and other rich media options have changed the landscape of the web and help keep the user on your site for longer while they interact with more content options. Nowhere is this more valuable than on education, news and entertainment sites. The biggest hurtle to overcome with rich media embeds is software compatibility. Consider using a third-party hosting site like youtube.com and embedding the video directly on your site. This will level the compatibility playing field and remove the server-hosting burden from you.

4. Optimize for Mobile Devices
While designing (or redesigning) your site, the need to factor in mobile devices is pressing. There are several schools of thought regarding site optimization, but the most all-encompassing and user-friendly option is to simply use the same URLs as the standard website. Strip down the site content to only the bare essentials. Simplicity is of the name of this game. Avoid using scripting languages or Flash components, as most devices are not equipped to support them. Keep in mind the small screens and use small graphics or ads and content that are scalable.

5. Bookmarking
Listing your site on social bookmarking websites like Digg can drive quality traffic to your way and bump your page views. It can also have a cascade affect where a user will tag your site for yet another site where yet another user will tag it again, and so on. Bookmarking is a handy tool that is relatively easy and doesn’t require a ton of time to achieve.

6. Utilize Social Media links.
Social media sites have taken over the way users share information with one another. Give viewers an easy way to link content they like from your site to their profiles. Not only will it spread the word, it will also get the attention of like-minded users who will not only click out of curiosity, they will probably spend quality time on your site which will help bolster your chances in the search engine pool.

7. Clearly Identify and Brand.
Brand identity is essential in all forms of media, but is most important on a large and complex website. Be sure the company’s logo or name is clear in the header. Choose, colors, fonts and graphic treatments compliant with brand style guides and reinforce that look at every opportunity. The more comfortable the user is with the style, the more familiar they are with the brand and are more likely to come back time and time again.

8. Search Bars are Essential
The more complex the site, the more essential the search bar . For user ease, stick to the tried and true method with an input field and a “submit” or “go” button located at the top, right of the page. Design the search bar cleanly with the font and color style already established for the overall look. In regards to search fields, less is more. Take Google for instance (see below), their entire brand is built upon the search bar and it remains simple and straightforward.

9. Strategically use Keywords and Titles
Be true to your content. Of late, Search Engine Optimization (SEO) has been all the rage, but don’t sell your digital soul for a few extra clicks. Google is working hard to filter and outsmart spammers who abuse the algorithm. Instead of getting caught up in the hype and fortifying your site with endless keywords, focus on how the user would look for your information and what words they might use. Be strategic in your keyword choices and get to the kernel of the matter to effectively garner the largest audience who will also spend the most time looking through your content.

10 Design. Design. Design.
Place big, attention-grabbing headlines above the fold, but don’t be overly concerned about making a user scroll. If you’ve successfully filled your site with quality content that is organized and clearly designed, scrolling won’t deter a user. The presentation of information requires a designer’s eye to ensure a site that is both aesthetically and functionally sound.

They say the grass is always greener on the other side, but which side suits you and your needs best? Before making a potentially life-altering decision, read on to discover the differences between, benefits to, and drawbacks of being full-time or freelance designer.

 

The In-House Designer

Due to the varying nature of business models, responsibilities appropriated to the in-house designer varies greatly from company to company. On the most basic level, however, an in-house design position includes meeting with internal and external customers, creating concepts, mocking up proofs, presenting those ideas to the team, executing the overall layout, processing proofs, production of final files, archiving of native and final files, and updating all projects as needed. Further responsibilities can also include acquiring bids from printers, illustrators, photographers, and other freelance designers, press checks, project management, and image or topic research.

The upside?

• The team succeeds or fails as one. Everyone is in the foxhole together. Working in such close and constant contact propagates a feeling of camaraderie with coworkers. The team environment comes with a vested interest in the company as a whole and includes everything the company releases for public consumption.

• The in-house designer is often more involved with varying projects which don’t necessarily fall under the “design umbrella” as well as the conceptual or brainstorming process than a freelance designer may be. Fulltime, in-house designers are often valued by other departments as an equal team members whose opinions carry more weight. With this level of involvement, the designer can take pride and ownership in their work and give them a receive a true feeling of career fulfillment which some freelance designers find lacking in their day-to-day transactions.
• There is something to be said for getting to know a brand and style so well the designer becomes the go-to style expert. Once the brand requirements are second nature, a new layer of design can begin. On this level, constantly refreshing and updating projects or pages is an art in and of itself. Success as an in-house designer often means appreciating the little things, and understanding that small changes make big differences.

• And most obviously, a consistent paycheck is quite favorable and reassuring. The security of knowing that the next paycheck is only a few days away helps to keep many-a-graphic-artist from starving, not to mention the added benefit of paid vacations and sick leave. Many companies also subsidize part of the employees’ health, short-term and long-term disability insurance, and provide a group retirement plan (in some cases, they even match the employee contribution up to a certain percentage) and reimburse continuing education efforts.

The downside?

• Working within the same style can feel repetitive, and it is difficult to keep the design feeling original and fresh.

• Organizations sometimes confuse design with production, and designers are often expected to simply execute what has been dictated.

• The constant proximity to coworkers can be difficult if the tense and subjective design environment causes personality conflicts.

• Most positions are salaried instead of compensated on a per-hour basis, and the modern day in-house designer will be working far more than the standard 40-hour week without any additional monetary gains. The economy also plays a role in the designer’s day-to-day workload. When companies down size, the responsibilities of the remaining staff are exponentially increased.

• Typically, an in-house designer makes less per hour than their freelance counterpart, they have to work more and take home less. This trade off is made to finance the aforementioned benefit package.

The Freelance Designer
Freelancing truly requires a jack-of-all-trades mentality because the designer’s success or failure depends on how well they advertise and sell their skills long before the actual act of designing is able to begin. In addition to the networking and marketing necessary to grow a client base and build lasting business relationships, the freelance designer is also responsible for their own administration and accounting needs. The freelancer must also be comfortable creating and writing bids for projects, presenting proposals and ideas, and be available to the client at all times. Once a client and project have been won over, the actual design work can begin and includes spec and design work, reworks, proofs, production and archiving.

The upside?
• A freelance designer gets the luxury of variety. The variety of projects, styles, clients and hours is a great way to keep day-to-day work and a portfolio fresh impressing.

• There is great independence in working for one’s self. The designer may not be calling all the shots (after all, it is the client’s project), but they are definitely at the helm and as such can create a work environment, flow and process of their choosing.
• Repeat business is the equivalent to money walking in off the street and is a marker of a job well done. The in-house designer does not get paid per project or hour, so repeat business doesn’t always feel like a positive, but to the freelance designer it means dollar signs. The trust a client shows by returning validates the designer’s design skill and business acumen. As client lists grow, the designer is able to spend less time on marketing and advertising and more on the design work. As these relationships solidify and grow, natural working relationships and rhythms emerge and speed the process as well as underscore the client’s confidence in the designer.

• The ability to truly control one’s income is quite empowering. Freelance designers can make as much or as little as they want by effectively managing time to achieve whatever goals they may choose.

The Downside?
• All business ventures have highs and lows, emotionally and economically. A freelance designer must be prepared to withstand inconsistent paydays, delinquent clients, and poor communicators.

• Building relationships, winning projects, and proving not only design agility but also professionalism are all important and time consuming pieces to the freelance puzzle. A considerable amount of time and energy must be devoted at the outset of a freelance career to things not necessarily design- related but instead to tasks that don’t qualify as billable hours which makes a long day feel even longer.

• When bidding on projects, the designer must track the pulse of the economy and constantly price themselves within the competitive ballpark without under or over charging for their services. Charge too little and the quality of work may come into question, charge too much and business may be driven away.
• There is not a benefit package waiting to backup the designer should they fall ill or take a holiday.

When it comes down to it, every position has both positive and negatives. The trick to finding your niche in the design community is to be perfectly honest with yourself about your strengths, weaknesses, and career expectations. Armed with the guide above and the career goals you’ve set for yourself, you should have all tools you need to get started on the right path for your future.

Typefaces come in all shapes and sizes, and much like smells and sounds, have the power to conjure emotions, meanings, and correlations. But instead of being paralyzed by the overwhelming number of typefaces in your drop-down menu — or worse, inadvertently misrepresenting the information with an uninformed typeface choice — peruse the following guide to help navigate these sometimes confusing waters.

CLASSIFICATIONS

The contents of a typography library can be broken down into four primary classifications: serifs, sans serifs, scripts, and decorative typefaces. Before delving into the sea of available typefaces, start by understanding the types and generally accepted uses of each classification.

• Sans Serifs are best recognized by their lack of ornamentation. With the advent of the internet and ever-evolving printing techniques, sans serifs are used consistently in almost every capacity due to their easy legibility at nearly every size. Sans serifs are most effective at quickly and concisely displaying information to the reader without any underlying emotional or visual triggers. Designers have also adopted the sans serifs’ simplicity to create a modern or minimalist feel when relevant to the design of their project. On the flipside, take extra care when using a sans serif for identity or branding efforts. The lack of decoration leaves little to brand as specific to one company or a visual identity. Common Sans Serifs: Helvetica, Arial, Verdana, Tahoma, Futura, Franklin Gothic, Gill Sans, and Univers
• 

• Serifs, in the most basic form, are a sans serif typeface with small finishing strokes at the beginning and end of each letter stroke. Serifs are commonly used as the default typeface by nearly everybody from the average email user to professional designers. From the design perspective, serif typefaces are often used for body copy because it is widely believe that the smooth arcs help lead the eye easily through large amounts of text. They are also a good choice for business and formal correspondence, marketing materials, and myriad media due to the under current of credibility and professionalism they project. Within this classification, there is a subset know as slab serifs, which feature block-like, heavy serifs that do not naturally run into or join to the next letter. Due to their weight, slab serifs should predominantly be used for headlines. Common Serifs: Times New Roman, Georgia, Book Antiqua, Garamond, Century Schoolbook, and Bookman (Common Slab Serifs: Courier and Rockwell)
  

• Script typefaces are modeled after handwriting, and are often used to introduce a human feeling or connection to the reader. Varying from child-like scribbles and chalk letters to elegant calligraphy, script typefaces are effective at introducing fun or sophistication to a computer-generated piece. Scripts are most often used in formal, or decidedly informal projects (see the example below). Scripts rule the world of personal design from invitations to announcements. However, the use of scripts in corporate design should be minimal, as they do not project authority and reliability. Common Scripts: Comic Sans, Monotype Corsiva, Mistral, Lucinda Handwriting, and Brush Script
  
  

• Decorative (also known as ornamental or display) typefaces typically fall into the serif category due to their highly ornamental nature. As their name indicates, they are highly decorative and best used to create or reinforce design styles and themes in large sizes (such as headlines). Their otherwise unique letter shape can be refreshing and attention getting. They can also be used to mimic the emotions and aesthetic of a specific genre or time frame. However, the intricate strokes often used to create these typefaces make them undesirable for use in large amounts of text or at smaller sizes, and therefore are not ideal for body copy.  Avoid using highly decorative typefaces in news or business reports, as they tend to detract from the neutrality for which most organizations strive. Be wary of over using a decorative typeface, or choosing a one inappropriate to the subject matter.
  
  

CONVENTIONS

When choosing typefaces its important to keep in mind the established conventions for the medium at hand. This is not to say that conventions cannot be broken — after all, design s all about breaking rules — but its important to know what the rules are before breaking them.

Websites and online projects require a typeface’s compatibility with the largest common denominator of computers, which usually necessitates the use of otherwise familiar or commonly used typefaces. As such, web standards have been quickly been defined with the use of a sans serif for body copy paired with a serif, script, or decorative typeface for headlines and subheads.

The opposite can be said for print pieces. It has become the collective opinion of most designers that the smooth arc and small leading lines of serifs helps the eye move comfortably through large amounts of text, and as a result, the serif has become the champion of body copy. In recent years, studies have proven that though serifs are not necessarily easier to read, rather our eyes are trained early on to believe they are. From this point the classic nature versus nurture paradox exists. Whatever the case, serifs remain the universal choice for body copy.

CUSTOMIZATION AND STYLING

To further customize or illustrate your intent, try playing with variations of weight (regular, medium, bold, heavy), width (narrow, condensed, extended), italics, outline stroke, and color. The adjustment of any of these components can severely alter the visual cues your typeface relays to the reader.

AVOID OVERUSE

Finally, and this can never be said enough — think twice before using the following typefaces: Comic Sans, Curlz, Papyrus, and Times New Roman. This is not an editorial on their quality or usefulness in the proper context. When observed in a vacuum, each font has its merits. Unfortunately, the designer needs to account for all external influences and these fonts have been overused to the point that even the most unobservant passerby can probably identify them by name. The last thing a designer wants when presenting information is to allow the message to be obscured by the typeface.

When choosing typefaces, classifications and best practices should merely be a guide to jumpstart the creative process. Good Luck!

In this tutorial we will be creating a detailed iPod Nano illustation in Phoroshop complete with menus and on-screen icons. Througout this tutorial we will be utilizing the Drawing and Pen tools along with Gradient Overlay Styles to make our Nano as realistic as possible.

Step 1

The first step is to draw a shape layer, a square to be precise.Go to the Tools bar and select the Rectangle Tool (U) and draw a square (its colour doesnt matter now since we’ll be applying a Layer Style over it). Name this layer ‘Base.’

Step 2

Double-click the ‘Base’ layer and choose the Gradient Overlay style. Set the parameters of the Gradient as shown below:

Step 3

In a new layer, use the Rounded Rectangle Tool to draw a shape within the ‘base’ shape. On its Options bar, set the shape type to ‘Fill pixels’ and the Radius of the corners to 19 px. For greater accuracy, you should enable Rulers (Ctrl+R) and drag from the margins of the ruler, the Guides. Position these Guides within the base shape.

Drawing the rounded square within the guides automatically snaps to the lines of the guides when ‘Snap To’ is enabled from View>Snap To>Guides. Name the layer ‘Bevel.’

Step 4

For a ‘Screen’ layer, draw a square and add both a Gradient Overlay and Stroke Layer styles using the parameters below:

Step 5

To add droplets of water on the screen, download any of these images of your choice from either wallpapers.com or www.sxc.hu.

Step 6

Drag the image into your working window. Desaturate the image of the droplet by pressing Ctrl+Shift+U and have it resized to fit the Nano’s screen. Add a Layer Mask to water droplets image and erase a quarter of its bottom part unevenly. That done, reduce the Opacity of the layer to 54%.

Step 7

For the on-screen menus, draw a rounded square with the Radius of the its corners set at 11 px.

Step 9

Add a Gradient Overlay style to the rounded square and follow up with a Drop Shadow style:

Step 10

Draw three other menus each with its own Gradient Overlay styles as shown below. The settings for the Drop Shadow style are pretty much the same as above.

Step 11

Create a Group for these menus by clicking the fifth icon from the left below the Layers Palette.

Step 12

Now for the text. With the foreground colour set to white. Select the Text Tool (T) and set the text type to Arial Rounded MT and Font Size to 4.0pt from the Character Palette. Type ‘Playlists’ for of course, the ‘Playlist’ menu.

The completed texts for all menus:

Step 13

To add a glossy or shiny overlay to the menus, select the Rounded Rectangle Tool and draw an outline of  the same size as the menu’s. Right-click and select ‘Make Selection.’ Select the Paint Bucket Tool (G) to fill the selection with white. Press Ctrl+D to deselect and with the Rectangular Marquee Tool (M), cut out right about half of the shape by hittting the Delete key.

Step 14

Press Ctrl+T to enter Free Transform mode and then select the Warp Tool. In warp mode, drag the two bottom points downwards to create a slight curve.

Step 15

Create a Layer Mask and then select the Gradient Tool (G). On its Options bar, set the Gradient Preset to a ‘black to white’ one and its style to Linear. Making sure the mask thumbnail is selected on the Layers Palette, drag with the tool upwards within the menu icon, for a fading transition effect.

For the other menus, just simply duplicate your gloss effect and reposition them appropriately.

Step 16

At the bottom of the screen, draw four circles with the Ellipse Tool. One white, the other three, black. You may want to set the Ellipse Options to Circle for a perfect circle if you find holding the shift key while drawing tricky.

Step 17

For the black tabs, apply a Gradient Overlay style to them with the parameters below:

Step 18

For the ‘Now Playing’ menu, select the Polygon Tool and set its Sides to three for a triangle; its fill colour should be #2f2e2e. Drag a Guide to the centre of the menu and draw a triangle along the planes of the Guides. The triangle snaps to the Guides at its axis perfectly.

Step 19

Draw two more triangles and a standing rectangle all partially mashed together. Merged these shapes (Ctrl+E) and then duplicate them pressing Ctrl+J. For the duplicate, ‘Flip Horizontally’ when in Free Transform mode.

Step 20

For Playlist menu, in a new layer, use the Rectangle Tool to draw horizontal bars like the ones below:

Step 21

As part of the musical notation we’re trying to create, draw a standing rectangle as a shape layer and rotate it at an angle with the Direct selection Tool.

(A). Click on the shape to reveal its Anchor points and then select the ‘Add Anchor Points’ Tool from the Pen Tool fly out.

B. Add a couple of more Anchor points to the shape and reposition them along with adjusting their handles. Work on this until you get a curved shape as shown below:

C. Add other shapes such as a standing rectangle and a circle.

Step 22

Next is the ‘Mixes’ menu where we’ll create an atom symbol over it. Select the Custom Shape Tool and then pick a circle shape. With a foreground set to white draw a narrow circle or ellipse.

Step 23

Duplicate this shape and entering Free Transform mode, rotate it. Make another copy of the rotated shape and ‘Flip Horizontally in Free Transform mode.

Step 24

Follow up with white circles (atomic particles supposedly) drawn about the shape. And we have our atom symbol.

Step 25

On the Artists menu, draw a rounded rectangle with radius set at 1 px. Add rectangle for the mic stand and flat ellipse for the mic subsequently in separate layers and merge them all – its just that simple.

Step 26

And now for the tough part: Use the Pen Tool to map out the silhouette of a singer (head and shoulders). Click and drag each new Anchor Points to create curves and adjust these points afterwards to fine-tune the contours of the shape. A ‘Delete Anchor Points’ Tool can be used as well but sparingly that is, to delete unwanted anchor points for smoother curves,

The look of our ipod nano so far:

Step 27

Creating the top buttons of the Nano, draw a rectangle behind the “Base’ layer and make the following adjustments shown below for the Gradient Overlay and Inner Glow Layer style.

Step 28

Add two more buttons and just copy and paste the previous Layers styles of the first button to these buttons. And edits their Gradients by repositioning the Color Stops.

Step 29

For a shiny screen, draw a rounded square outline of the same size as the black bevel and make a selection from it. Fill the selection with white colour with the Paint Bucket Tool.

Step 30

With the Rectangular Marquee Tool, create a large selection and rotate it by transforming it (Ctrl+T, right-click and Free Transform selection).

Step 31

Clear by hitting the Delete key.

Step 32

Create a Layer Mask and with the Gradient Tool (black to white), draw a gradient from the bottom to the top. Also reduce the layer’s Opacity to 43%.

Step 33

We’ll now set out to create a reflection. Group both Bevel and Base layers and copy.

Step 34

Select the Group, ‘Main Copy’ move its contents below the Nano.Delete most part of the Nano copy.

Step 35

Add a Layer Mask and use the Gradient Tool to fade the Nano copy from bottom to top.

Step 36

Not forgetting, we add a clock, mini play button and a battery status icons at the top of the screen. And we have our spanking new ipod Nano!

As web design matures, so do the tools used for web pages. As with any industry there are standards that are widely accepted and used. There are also trends that become popular over time. Modal boxes have recently become a popular tool for Internet marketing websites.

Trends

Internet, network and MLM marketing is big right now. With the recent recession, more people are either out of work or looking to make extra income. This business model revolves around offering expertise or informational products that are easy and cheap to reproduce – to others for a fee. The way to really make money in this type of business to not only increase traffic to your website, but also to convince people to ‘opt-in’ to your email list. This basically gives Internet marketers permission to advertise, instead of spam, a large group of people.

The main reason modal boxes are such a trend right now is that they offer an easy, fast and in your face way to encourage web page visitors to sign up a site’s marketing list.

Modal Box or Window

So what is a modal box exactly? Basically, it is a mini window that comes up when a user visits a website that requires the user to do something before the main page is accessible. They can be used for a variety of purposes – including asking for the user’s personal information, stating emergency or error messages, or to show an item more closely and with greater detail.

Modal vs Pop Up

Of course, the modal box probably sounds very similar to the dreaded pop up boxes scammers and Internet advertising companies are known for. The pop up is such a dirty word in web design that all the Internet browser companies now include features that will block all of them for you.

So, what is the difference between a modal box and a pop up? Technically, they are both miniature windows that ‘pop up’ when you visit a website. However, annoying pop ups are typically used to force advertising onto web traffic or to keep a person at a website longer than they intended to stay. This is why they are so dreaded – the pop ups are distracting, unwanted, time wasting elements of web design.

A modal box, on the other hand, can be welcoming and effective if planned and used to benefit the visitor and not the site owner. For Internet marketers, it is used as a way to encourage visitors to sign up for their email lists. A great Internet marketer then uses these permission based lists to send valuable information to those who signed up. Or a modal box can be used to better display inventory so that customers shopping online can get a real sense of their purchase before committing. Maybe there is an important part of the website that the owner wants to draw attention to? It can also be used to protect a page by requiring a user ID and password before permitting access. A modal box should not pop up randomly and should have purpose.

Design

In order to create a modal box, many users incorporate Javascript, CSS, XHTML and AJAX programming. This means the new web designer will need to have a bigger understanding of design than just basic HTML to pull off a good modal box.

Drawbacks

Of course, user traffic has a limited time span. With statistics stating that the average Internet surfer spends mere seconds on a web page – incorporating a box that requires interaction to go away could mean the website will lose traffic. No matter how well a web designer and site owner justify the modal box – some people will cruise on instead of interacting with the box to make it go away. Some users argue that the modal box is just a fancy upgrade from the pop up and is still undesirable. This is a drawback to using the modal box in your design.

Also, overuse of the modal box on a website will make users naturally compare them to the annoying pop ups of old. The overuse of any design element is unappealing and will affect your site in a negative manner. On top of that, spammers have caught on to the appeal of the modal box and are increasingly using this tool to trick visitors into believing what they offer is more legitimate or interesting. As time goes on, the modal box will become just as offensive as the pop up and something new will be created to fill this need instead.

How do you feel about modals windows how do your feel they are better or worse than traditional pop-ups, please discuss in the comment we would love to hear your perspective.

Let’s sit back for a while and admire the truly satisfying geometrical wonders of the universe. Out with squares, circles and other absolutely boring shapes, and in with cleverly crafted and charming bits and pieces! Lucky for you, we have had the extreme pleasure of stumbling through the interwebs, dodging stray triangles and dodecahedrons, on a quest to find the best shapes just for you at no cost whatsoever! That’s right, we’ve decided to bring to you 20 of the best FREE Photoshop shape set downloads!

Banners and Scrolls

The Banners and Scrolls shape set from Obsidian Dawn adds an exceptional charm to your work. Take your designs back to the days of parchment, ink and quills as you indulge in this PhotoShop shape set!
Banners and Scrolls

Birds

Let your imagination fly with these magnificent custom shapes from lukeroberts! Soar through chirpy designs like never before as you implement these bird shapes into your work.
Birds

Urban Designs

Add some extra jazz to your work with this fantastic urban pack from Obsidian Dawn! From barbed wire to skyscrapers and all sorts of urban designs in between, this shape set is perfect for designing concert posters or simply adding a little something to a logo design.
Urban Designs

Butterfly Shapes

Transform your work into a thing of elegance and beauty with these many butterfly variations. Flutter on over to Dezignus to download this elegant set!
Butterfly Shapes

Natural Leaves/Bushes

These natural leaves and bushes made by the Vector Lady are absolutely perfect for any green designs you happen to be creating. Can you imagine just how fantastic logos would look with plantlife growing from them!
Natural Leaves/Bushes

People Silhouette

What better way to add personality to your work than to use these people shapes! This pack contains a large variety of many different people doing various things. These would look lovely in logos, posters, business cards or anything else your creative mind can conjure up!
People Silhouette

Vector Wings

Glide through projects gracefully with this diverse wing shape set! Add any type of wing to your creations and watch the magnificence soar! This set is a must have for anyone wishing to implement elegance and beauty into their work. Vector Wings

Elegant Floral

Feeling a tad bit fancy? Well these are just for you then! The elegant floral shape set is a pleasure to use and works extremely well with designing logo’s, posters or business cards. They would also do well on fancy invitations. Elegant Floral

Valentines

You will love simply LOVE these various heart shapes. Who needs cupid when when you have PhotoShop? These would be great for creating cute stationary designs, or a letter for your love. There are many styles to choose from, so this time you’re allowed to be picky! This pack comes with brushes too! Valentines

Smooth Arrows

This arrow set by Magdalena M Proszows really points to success. The many cartoonish styled arrows would most definitely add a little something to a logo or poster. They would even fit in with graphic novel design, if thats up your alley. Dont be fooled by these arrows though, the rest of the article is actually below! Smooth Arrows

Grunge Splashes

Splash this shape set on your designs for a grungy look. The set contains a very impressive 173 various splash shapes and so chances are you’ll like at least one of them! These shapes could look effective on any sort of graphic design so don’t hesitate to download the set and get splashing! Grunge Splashes

Floral Shapes

Add a twirl to your work with this fantastic and vast set of PhotoShop Shapes. From small sprouts to extravagant floral shapes, this set has it all!! With 258 spirals, curves, and arcs, this set is almost a necessity! Floral Shapes

DS Decor Shapes

For some fantastic fairytale shapes, check out this set by dmitryseliv! The floral intricacy blended with old parchment really makes this pack something special! If ever you need a magical title bearer, you know where to go. Bear in mind that it is only for Personal Use though! DS Decor Shapes

Frame and Border Shapes

Fancy a portrait of yourself in a nifty frame? Or perhaps you want to frame a splendid picture you drew? Look no further! Download Shelby Kate Schmitz‘ Free Frame and Border Shapes and get to it. These shapes would look great on invitations, logos and whatever else you can think of.
Frame and Border Shapes

Chandelier Shapes

Throw yourself a grand ball with this delightfully detailed shape set by hotpinkscorpion. Be a bit fancy and use these shapes to decorate posh invitations or whatever else you find is lacking the rich factor.
Chandelier Shapes

Kiddy Stuffs

Go back to your childhood, where anything you could find was your canvvas and crayons were your tools of wacky art! This pack by hikaridrops is full of cute and nostalgic shapes perfect for designed aimed for children. Stationary, birthday invites or a nostalgic gateway, this pack is waiting for you to download right away!
Kiddy Stuffs

Floral Banner Shapes

Add a little charm and a lot of extravagance to your designs with these impressive shapes by eurochronix! You won’t regret downloading this set. It comes with 5 equally impressive floral banners ready to add text to.
Floral Banner Shapes

Animal Shapes

Having a zoo of shapes at your fingertips will prove to be useful to you again and again. UnidentifyStudios did a fantastic job in capturing sufficient detail whilst still retaining a nice simple style.
Animal Shapes

Gear Shapes

Watch the cogs of graphic design come together with these gear shapes! These are a must have for your shape arsenal. And the best part? There’s 90 of them!!
Gear Shapes

850 Assorted Shapes

And to finish off, here is a massive assortment of various shapes from naderbellal. The set contains over 850 shapes so there’ no doubt something in there that will tickle your fancy.
850 Assorted shapes

Each avenue in the design world has its own unique challenges and tricks, and magazine design is no different. From style guides and gutters to editors and entry points, designing for a magazine comprises its own set of rules and considerations. Before jumping head first into the text-heavy, deadline-driven world of magazines, take a moment to get your bearings and familiarize yourself with the terrain. Using the road map below, your creativity, and a bit of luck you’ll have everything you need to produce a top-notch, reader-friendly magazine.

1. Style Guides and Templates
In magazine design, consistency is imperative not only to branding but also to creating familiarity between the magazine and its audience. This familiarity breeds trust and loyalty, and ultimately keeps readers coming back for more. One of the biggest misconceptions in design is that templates and style guides are restrictive. On the contrary, they open the door for more creative solutions. Just like in web design, style guides, style sheets, and templates create consistency and allow for global changes without hassle. Instead of regarding style guides and templates as rules, think of them as the framework holding up the design for each page.

2. Audience First
It’s really that simple. The reader profile should inform your approach to the material. Designing something you like is important, but are you the target audience? Ask yourself, “Does this service the reader?”

3. Diligently Seek Out Inspiration
Working within the same style issue after issue can quickly zap the creative energy right out of you, and unfortunately this will most likely show in your work. Something should surprise the reader every time they turn the page, and achieving that is your responsibility. When you’re feeling uninspired — and you will, eventually — go to a newsstand and flip through other publications, stroll through an art gallery, or simply take a walk. Design is all around you so keep your eyes peeled and refresh your creativity. Many designers keep folders or boxes full of inspiration they’ve collected (such as tear sheets from other publications, art work, postcards, photographs, greeting cards, patterns, fabrics, websites, etc.) near their workspace.

4. Cover Planning
Covers can be the most sensitive and time-consuming part of a magazine issue. Each cover is obliged to achieve several goals. It must attract attention while sitting on a newsstand, adhere to print and postal code regulations, be intriguing while still falling into alignment with brand standards, and — most of all— stand up to the scrutiny of the design and editorial team. Brainstorm, plan ahead, and have a backup plan … or three.

5. Editors Are Your Friends
Magazine staffs often operate with a strict delineation between editorial staff and design staff. However, stronger ideas and solutions emerge when these departments work together early and often. As the designer, familiarize yourself with articles coming down the pipe. You may be able to offer an outside perspective or new approach. Equally, be open to editorial suggestions and help build on them. After all, this is a team project.

6. Typography and Points of Entry
When talking about mass amounts of text, as is the case with most magazine articles, the way in which text is treated and formatted is paramount. As a designer, you have the power to form the way in which the reader is presented with information. With that in mind, text-heavy pages take extra care as you must provide easy points of entry for the reader that lead them through the page. As you see in the example below, a page with no imagery can still be appealing and attention grabbing with the use of grids, headlines, subheads, drop caps and pull quotes. As with many things in design, hierarchy is key.

7. No Budget? No Problem.
Budgets are being slashed around the world and publishing is taking its fair share. Fortunately, there are several inexpensive stock-art websites and photo-sharing sites such as flikr.com that can help out in a pinch. If illustration is a better match for the feature at hand, foster good working relationships with a small pool of illustrators. Illustrators are much more willing to negotiate if you’re a regular customer and can provide steady work. And when all else fails, create what you need. Choose a visual theme appropriate to the article and bask in the freedom. This is when design truly proves its value.

8. Design is in the Details
Take the time to check over the details of each page. Finishing touches are the difference between a professional end product and an amateur one. Clean up and double-check the file for rule alignment, overlapping text and image boxes, unresolved text spacing and breaks, and color matching (e.g., make sure that the same black is used throughout the whole issue).

9. Get to Know Your Printer
The physical production of each issue is a topic in and of itself, but there are a couple pitfalls that can be avoided by simply communicating with your printer. One of the biggest oversights when designing the interior of a magazine is failing to account for the spine. Depending on the size of your magazine and how it is bound, any element that crosses the gutter may lose necessary information such as text on a sign or facial features. Your printer can help you determine the amount of overlap necessary. Also, ask the printer for output specifications to assure that the high-resolution files you provide are compatible with its system. This saves everyone time and saves you extra processing costs.

10. The Big Picture
Designing a magazine is just as much about balance and organization as it is about the text and images on each page. From ad placement to the aesthetic of each feature, designing a magazine requires both a close eye to detail and, conversely, a healthy distance for perspective. The best magazine designers consider each article individually, how those articles fit into a particular magazine issue as a whole, and then how that issue fits into the larger publication set. The end result should showcase your cohesiveness, consistency, and creativity.

In this tutorial, we’ll be looking at how to transform a photo of a person into a work of art – in this case, a highly illustrated sketch art piece.

Vector shapes and textures will also be added to our composition as this will give our sketch artwork more depth and character. Below are examples of what you could achieve even with the simplest of art forms (pop art etc) to create interesting and beautiful effects from a picture. The final images could used as e-cards, profile pictures/avatars, wallpapers and so on.

Step 1

I start with a new document with a white background layer. The dimensions of  your documents are of course entirely your choice depending on the size of the picture you’re working with. I’ll be using this picture from istockphoto.

Step 2

Remove the background of the image by creating a Layer Mask clicking the third button from the left. Its located at the base of the Layers Palette. Then press Ctrl+D to make sure that the foreground colour is set to black and with a Soft Round brush (B), (have its hardness increased to about 45
to 60 per cent) paint away to remove the background.

When done, Press Shift+Ctrl+Uto desaturate the ‘Man’ layer.

Step 3

Duplicate the ‘Man’ layer by pressing Ctrl+J and head on over to Image>Adjustment>Invert or just press Ctrl+Ito invert the layer. Also, change the layer’s Blend mode to Color Dodge. The image in the ‘Man inverted’ layer would apparently disappear at this point.

Step 4

The image in the layer will be given more visibility when we have it blur a little. Go to Filter>Blur>Gaussian Blur and set the Blur Radius to about 14.2 pixels and this as a matter of fact, all depends on the results that
suits your likings. The result you get eventually, is nicely rendered sketch effect.

Step 5

To further enhance the pencil-like effects of our simulated sketch, select the duplicate the ‘Man inverted’ layer and go to Filter>Sketch>Graphic Pen. Make the adjustments as shown below:

Step 6

Set the layer’s Blend mode to Lighten and reduce its Opacity to about 23%. Name the layer ‘Graphics’.

B.
Not to make the Graphic Pen effect to brash, go to Edit> Fade Graphic Pen or press Shift+Ctrl+F and reduce the opacity of the effect down to about 60% until you’re satisfied with the results.

Step 7

For a new layer, with a Hard brush selected, paint the eyes of the in the image. Use any colour of your fancy. Set the Blend mode of the ‘Eyes’ layer to Overlay.

Step 8

We’ll now create custom pen strokes to enhance our sketch. Please do use your creative license here to express yourself. Well, with the Pen Tool (P) selected, create Anchor Points over the edges of the head. To create curves, just click and drag in the direction you want the curves created. That done, we’ll now add a stroke to the path. But first, run these checks: make sure your brush’s opacity is appropriate, the brush size should be set to about 2px to 3px and the foreground colour is switched to your desired colour.

Step 9

Still with the Pen Tool, right-click the path and select Stroke Path.

Step 10

On the Stroke Path Dialog box, select Brush and check Simulate Pressure. This creates a nice fading effect to your brush strokes. Use the Marquee Tool (M), to clear the Pen path and then hit Ctrl+D to deselect.

Ive disable the ‘Man’ layers to show you the strokes Ive made with Four
colours, thickness and varying opacities.

The final results:

Step 11

Now, we’ll add vector elements to our image. Select the Rectangle Tool (U) and on its Options bar, set the shape type to “Paths.” Draw a flat rectangle.

Step 12

Select the ‘Add Anchor Point’ Pen Tool and then create points at points on the rectangle. 2. Select the Direct Select Tool (A), and use it to adjust the anchor points to form curves.

Step 13

Double-click the vector layer for a Layer style and set the parameters below:

Step 14

In a new layer, draw an ellipse with the Elliptical Marquee Tool. Paint on the base of the selection with a white Soft Round brush. Reduce the opacity of the layer to about 43%. Add some other shapes to the umbrella – handles etc.

Step 15

Duplicate the Umbrella shape layer and right-click this copy and select the Rasterize Layer option.

Step 16

The Paint Bucket (G), can be used to change the colour of the shape. Reduce the the opacities of the both ‘Umbrella’ layers to 63% and 49% respectively.

Step 17

With the Custom Shape Tool selected, pick the ‘Circle Frame’ shape.

Step 18

Create a couple of circles in separate layers and at reduced opacities.

Step 19

Draw a circle and add a Gradient Overlay Style to it with the settings
below:

Step 20

Reduce the opacity of the circle to43%.

Step 21

Download these great looking halftone brushes from Env1ro. 3D halftones they’re called.

Step 22

Set the foreground colour to #ccccccand add these dots to you image.

Step 23

Add some other vector shapes of your choice.
- Swirlsdownloaded from www.brusheezy.com
- Treesdownloaded from snap2objects.com

Step 24

Its also a good idea to add texture your image as this deepens the entire outlook the composition. This rock texture was downloaded from freetextures.org. Place the rock texture over all other layers and
desaturate it. Set texture layer’s Blend mode to Color Burn and reduce its opacity to 69%.

Step 25

Create a Layer Mask for the texture and clear any trace of the texture from the man image.

Step 26

More texturing. Download these set of Grunge Texture brushes
fromART-D. Apply the brush and add a Shadow Overlay style to the brush mark.

Step 27

Erase areas of brush mark via a Layer Mask and this time, use a Spatter brush instead.

And we have our final result!

You can even take your artwork a little further as Ive done below. Just
imagine the possibilities! I hope this post would be of use to you.