If you work as part of an in-house Web team, you have my sympathy. If that in-house team is within a large organization, then doubly so. Being part of an in-house Web team sucks. Trust me, I know. I worked at IBM for three years and now spend most of my days working alongside battle-weary internal teams.

Web designer trying to hang himself.

It’s hardly surprising that most in-house teams are worn down and depressed. They face almost insurmountable challenges:

• Departmental feuds
  Too often, a website becomes a battleground for pre-existing departmental conflicts. Political power plays can manifest themselves in fights over home page real estate or conflicts over website ownership. After all, is the website an IT function or a marketing tool?
• Uninformed decision-makers
  Rarely does an internal Web team have the authority to make final decisions on a website. Instead decision-making happens higher up in the organization. Unfortunately, although these individuals have more authority, they do not have greater knowledge of the Web. Decision-making is often based more on personal opinion than the needs of users or business objectives.
• Committees
  Committees are the curse of larger organizations. The bigger the organization, the more the number of people who want their say, and that leads to committees. Unfortunately, committees inevitably lead to compromise and design-on-the-fly. Both are the kiss of death to any Web project.
• An inward perspective
  Becoming institutionalized is very easy in a large organization. Eventually you speak an internal language and think in terms of organizational structure. This proves problematic when communicating to end users. Not only do most large organizations have their own internal perspective of the world, some individuals even think departmentally, further aggravating departmental conflict.
• Endless scope creep
  When an in-house Web team is constantly available, calling on their help is easy. This is both a benefit and a curse. The truth is that many Web teams are taken for granted, and websites that should never exist are built and launched because there are no constraints. Worse still, good projects can be drowned as “internal clients” keep demanding additional functionality that the Web team cannot block.
• Problem people
  The bigger the organization, the higher the chance they will hire a jerk. If you work for a large organization, I can pretty much guarantee you have someone in mind as you read this. These people can really hinder the work of the Web team and prevent a website from reaching its full potential.
• Glacially slow progress
  With endless red tape and painful committees, getting stuff done in a large institution can be nearly impossible. It is not unusual for projects to grind to a halt entirely because they become dependant on other systems or projects yet to be implemented. I have even seen something as simple as the roll-out of a content management system take years to implement.

With the odds stacked so high against them, I am surprised in-house Web teams get anything done at all. Their success depends as much on their ability to navigate politics and bureaucracy as it does on their skills as designers and developers.

But do not despair. I can tell you from the over-subscription to workshops I have run on the subject that you are not alone. This is a universal problem and one that can be overcome, as I will outline in this post.

Our Web design agency specializes in complex projects. During my time there, I have developed certain techniques that will hopefully help others keep their Web projects moving.

Let’s look at four areas in particular:

• Improving how your team is perceived within your organization,
• Overcoming politics and problem people,
• Ensuring that a project gets approval from the powers that be,
• Delivering work within scope and on time.

Let’s begin by addressing how Web teams are perceived.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Improving How Your Team Is Perceived

In too many organizations, the Web team is considered the lowest of the low. It looks like something straight out of The IT Crowd.

This is all the more bizarre considering that websites themselves are perceived as being important. Somehow there is a disconnect between those who produce websites and the websites themselves.

This poor attitude toward Web teams boils down to two beliefs:

• The Web team is a road block that needs to be detoured.
  Many large organizations find themselves frustrated by their internal Web teams, seeing them as people who constantly block their more “imaginative” ideas and set restrictions on what they can and cannot do online.
• Web team members are implementers, not experts.
  Management perceives Web team members as “techies,” there to implement the ideas of others. They are in no way perceived as experts who are capable of advising on strategy.

Fortunately, much can be done to overcome these beliefs. For a start, improve your communication skills.

A disturbingly cheerful Web designer.

Communicate Better

Most internal Web teams are terrible at selling themselves. If they were a Web agency, they would be out of business in a few weeks. Perhaps that is their reason for working in-house. But despite what you may think, most internal Web teams could desperately do with communicating and selling better.

To overcome the negative impressions people have of your team, you need to actively promote yourself and the work you do.

Here are just a few ideas to try:

• Hold launch events.
  When was the last time you celebrated the launch of a new feature or the redesign of your website? Holding a launch party is a great way to shout about your successes, and it’s fun, too. Email colleagues, telling them how excited you are about the completion of your latest project, and invite them to celebrate with you. Everyone loves free food, and it’s a great chance to show off your work.
• Publish a monthly newsletter.
  How will anybody know about the great work you do if you don’t tell them? One way to do this is through a monthly newsletter that features work you have been doing and cool stuff happening online. This is a great way to both increase your profile and educate people on the power of the Web.
• Report successes to management.
  Management needs to be regularly informed on traffic levels, dwell time and conversion rates. If you don’t have any calls to action to track conversion, get some. If you have no way to measure success, then the team is simply a drain on resources. Demonstrate that you generate income, rather than just spend it.
• Offer training courses and workshops.
  Part of your role as in-house Web team should be to educate those in the organization about the Web. I’m talking not just about technical training on using the CMS, but rather more general training about the Web and how it can benefit your business. Sessions like this not only educate internal stakeholders, but also increase your credibility and establish you as the expert.
• Hold regular meetings with website stakeholders.
  Set up regular meetings with those who most often use the website. Talk to people such as the head of marketing, sales and IT. Meet with front-line staff who answer customer support queries or those who work with suppliers. These meetings build relationships across the organization and demonstrate that the Web team is always looking for ways to help the business.

By improving communication within your organization, you significantly improve the perceived value of your team.

Create Value

There can be little doubt that internal Web teams are undervalued. As an external consultant, if I say exactly the same thing to management as the Web team, management will listen to me and ignore its own people. This is largely because as an external consultant, the cost of my advice is more evident. They listen to me because they are paying me in a very visible way.

Of course, they are paying as much (if not more) for their internal Web team. But that cost is not as evident and so is not valued as highly. The way to increase the value of your team is to make that cost more visible.

People are less likely to ignore your advice or waste your time if they are obviously paying for your advice or time. The way to establish this kind of value is to cross-charge for your work between departments. Have an internal charge-out rate based on salary, infrastructure, training, etc., and then price any new work coming into the department based on that rate.

This not only makes your value obvious, it also makes “internal clients” think twice before asking you to build some ill-conceived project just because you’re “free.” Nothing will change perception more than making them pay for your time.

Man holding a briefcase of money saying nothing is free, not even your internal Web team.

Of course, you might not be in a position to cross-charge. But that doesn’t mean you can’t go through the process of setting rates and costing projects. When you receive a request for work, respond with a breakdown of tasks, how long it will take and how much it will cost the company based on your charge-out rate.

While not as compelling as charging for work, it still drives home the point that your time is valuable. It might also make them think twice before suggesting a project, especially if they know that pricing will be included in your report to management.

Finally, keep track of the time you actually spend on projects. This will help with scope creep (see below) and show management how efficient you are.

Of course, cross-charging can be perceived as another blocking tactic, reinforcing people’s negative opinion of your team. Therefore, balance this with a positive and helpful approach…

Be Positive

No offence, but most of the in-house Web professionals I meet are a miserable lot. Okay, that was probably offensive. Still, it shouldn’t come as a surprise. With so much negativity aimed at Web teams, some of it is bound to rub off on them. It is up to you to keep the website on course, and that involves telling people “No” or putting constraints on what they can do. The problem is that this damages relationships and eventually forces people to bypass you, often by outsourcing to agencies such as mine!

However, you don’t need to say no to people or even constrain them with rules. Take my situation, for example. When clients pay me, I don’t have the luxury of saying no. I have to be Mr. Positive, or they’ll just find someone else.

The next time someone asks you to implement a stupid idea on the website, try to be positive. Praise positive aspects of the idea (if there are any), and encourage the “client” to explain their thinking behind the rest. Often you will find something workable in the idea.

Even when the idea has no redeeming feature, there is still no need for you to say no. Instead, explain the probable consequences of the idea to the client, and guide them to the point that they reject it themselves. The problem with “No” is that it is a dead end. It leads only to confrontation. By focusing on the positive and educating the client on the consequences of their suggestion, you create an open and honest conversation.

The process of educating the client on the potential pitfalls of their suggestion also demonstrates your expertise…

Become the Expert

The ultimate aim of improving your reputation is to establish yourself as an expert. If people see you in that way, then they will listen to your opinions and follow your advice. But if your reputation is already damaged, coming to be seen as the expert is hard.

One way to be perceived as an expert is by association. This comes in two forms: referring to another expert or having an expert refer to you.

Referring to an expert is easy. If you have no credibility in the eyes of internal stakeholders, borrow the credibility of others. For example, the next time a client asks you to put all content above the fold, don’t just tut and say that it’s a stupid idea. Instead, refer to a study on the subject, such as one of the several by Jacob Nielsen. This lends weight to your argument and demonstrates that you are well read on the subject.

The second approach is to get an expert to back you up. Essentially, this is the very reason why I am hired by many Web teams. I am brought in to reinforce the arguments they have been making all along. Because I am perceived as an expert and support what the Web team says, I add creditability to the team and increase their expertise in the eyes of management. It’s ridiculous, but it works.

Web designer suggesting a better way of working.

Finally, don’t try too hard. A true expert demonstrates their knowledge but is not afraid to admit their limitations. They are confident enough to challenge wrong thinking, but not arrogant or aggressive. I speak with too many in-house Web developers who come across as sneering and condescending because they believe they are above everyone else.

While improving your reputation will go a long way to pushing your projects forward, it is not the only hurdle to overcome. No matter how respected you are, there will always be those with agendas that interfere with the smooth running of your website…

Overcoming Politics And Problem People

Politics are unavoidable in large organizations, and yet most of us consider ourselves above them. We claim not to play politics, and we moan about those who we perceive do. But in reality, we all do it. We all have an agenda and want our point of view to be taken seriously. To believe otherwise is naive.

Ultimately, having a holier-than-thou attitude to internal politics is damaging. If you refuse to deal with those who play politics and avoid pushing your own agenda, you will only damage the website.

To get things done in a large organization, don’t shy away from playing the political game. As the saying goes, if you can’t beat ’em, join ’em.

While we’re citing aphorisms, another one is, keep your friends close…

… But Your Enemies Closer

One of the biggest mistakes people make with problem people is avoiding them. A far better strategy is to keep them close. The problem with avoiding your “enemies” is that you are entrenching their position. If they know you are hostile towards them (and trust me, they’ll know), then they’ll become even more hostile towards you. Eventually, the arms race of hostility will get out of control.

A better approach is to keep talking. Meet with them regularly. Ask them what they want from the website? Look for ways to build bridges. Listen to what they say.

Some individuals only want their voice to be heard. As long as you listen and make them feel important, they’ll go away happy. Also, let them win whenever possible. It may dent your pride, but that is a small price to pay for winning the war.

A client refuses to sign off a design.

On the topic of war…

Avoid Confrontation

When I suggest that you meet with problem people regularly, I’m not setting the scene for a monthly showdown. In fact, avoid confrontation whenever possible, especially when other people are around. No one wants to lose face in front of their peers, which is why people become entrenched in their views in group settings.

Instead, use the tactics I spoke of in relation to being positive. Use the question “Why” as a way to encourage people to think through their position. Encourage positive contributions with praise, and explain their consequences in the gentlest language possible.

Finally, when you are criticized in a group setting (such as a committee meeting or group email), take a long deep breath before deciding whether to respond.

In my experience, there is little point in becoming defensive or, worse, retaliating. Most of the time I don’t say anything at all. It’s amazing how often someone else will leap to your defence if given the chance. Better that they say how great you are than saying so yourself!

Of course, it should never come to that, especially if you learn to empathize with problem people…

Learn to Empathize

As Web professionals, we pride ourselves on our ability to empathize. We go to great lengths to get into the heads of our users and understand what they want to achieve and how to motivate them. We have become experts at nudging users towards the goals we want them to complete.

Interesting, then, that we totally fail to demonstrate this ability with our colleagues. Instead, we often dismiss them as stupid or “not getting it.” This kind of narrow-minded attitude causes many of the problems we encounter. Take the time to really understand your colleagues. What makes them tick? What problems do they face in their jobs that the Web could solve? What pet subjects could we use to nudge them in the right direction?

If we tried to empathize with our colleagues and understand their psychology, we would find internal politics much less painful.

A Web designer talking to a client about his problems.

Stay tuned for the second part

The second part of this article will be published soon here, at Smashing Magazine. Please stay tuned for our updates: subscribe to our RSS-feed and follow us on Twitter.

You can also check Paul’s workshop that he ran on the topic of this article.

Related articles

You may be interested in the following related posts:

• Passing The Holy Milestone: How To Meet Deadlines
• Renegotiating The Contract (And Other Tales Of Horror)
• How To Successfully Educate Your Clients On Web Development
• Dealing With Clients Who Refuse To Pay

© Paul Boag for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Recreating electronic devices in Photoshop is a great way to learn. Today, we will demonstrate how to create a Motorola Droid style phone in Photoshop. Let’s get started!

Step 1

Start by creating a new 2000 x 2000 px canvas and save it as "phone.psd." Use the Pen Tool to the outer silhouette of the device. Make sure it is black. Name it MAIN BG.

Step 2

With the Pen Tool, draw a shape for each main section of the phone. Notice that we are leaving a small gap between the shapes to give the illusion of separate parts. Organize your shapes in groups ( Cmd/Ctrl + G ), and rename the layers as seen below.

Step 3

Now make the side of the phone and again organize and rename them as shown below. It is very important to keep your layers organized because this project requires many layers.

Step 4

Now that we have defined the main parts of the phone, let’s start adding some shading. Double click the "Front / bottom / 1" layer , and apply a Gradient Overlay with the settings shown on the image below. Drag the mouse onto the canvas, and with the Layer Styles Window open and Gradient Overlay selected, reposition your gradient.

Step 5

Duplicate the "Front / bottom / 1" layer (Cmd/Ctrl + J), rename the duplicate to "2", and apply a Gradient Overlay and Inner Shadow with the settings shown on the image below. Press OK.

Step 6

Close the "Front / bottom" group. Select and double click the "Front / center / 1" layer. Apply a Gradient Overlay with the same settings on the picture below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 7

Duplicate the "Front / Center / 1" layer (Cmd/Ctrl + J), rename the duplicate to "2", and double click to apply a Gradient Overlay with the settings seen on the following image. Press OK.

Step 8

Close the "Center Group" and select the "Front / Top /1" layer. Double click it to apply the Gradient Overlay with the settings of the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Remember you can drag on the stage to move the gradient while the Layer Style Window is open and Gradient Overlay is selected.

Step 9

Duplicate the "Front / Top /1" layer ( Cmd/Ctrl + J) , rename the duplicate to "2", and double click to apply a Gradient Overlay with the settings seen on the image below. Press OK.

Step 10

Close the "Front " group, double click the "Side / Side_Bottom / 1" layer to apply a Gradient Overlay as seen in the following image. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 11

Now, double click the "Side / Side_Back / 1" layer to apply a Gradient Overlay as seen in the following image. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 12

Duplicate the "Side / Side_Back / 1" layer (Cmd/Ctrl + J). Rename the new layer to "2", double click it to apply a Gradient Overlay with the settings seen on the image below. Notice that now the blending mode of the gradient is set to Multiply because we are making a shadow (not a light) on the right left corner. Drag the gradient to reposition it to the corner. Press OK.

Step 13

Duplicate the "Side / Side_Back / 2" (Cmd/Ctrl + J) layer. Rename the new layer to "3", double click it to apply a Gradient Overlay with the settings seen in the following image. Again, notice that now the blending mode of the gradient is set to Multiply because we are making a shadow (not a light) on the bottom left corner. Drag the gradient to reposition it to the corner. Press OK.

Step 14

Close the "Side / Side_Back" group and double click the "Side / Side_Center/1" layer to apply a Gradient Overlay with the settings seen on the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 15

Close the "Side / Side_Center" group and double click the "Side / Side_Top/1" layer to apply a Gradient Overlay with the settings seen on the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 16

Now, close the "Side" group, and with the Pen Tool, make the shapes for the buttons and the speaker. Make a small circle with the Ellipse Tool (u) for the microphone. For the center part of the speaker make a shape and paint it grey (bfbfbf). Organize all shapes following the image below.

Step 17

Double click the "Buttons / 1" layer, and apply the Inner Shadow and Gradient Overlay following the settings of the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 18

Do the same with the "Buttons / 2" layer, apply the Inner Shadow and Gradient Overlay following the settings of the image bellow. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 19

Do the same with the "Buttons / 3" layer, apply the Inner Shadow and Gradient Overlay following the settings of the image bellow. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 20

Do the same with the "Buttons / 4" layer, apply the Inner Shadow and Gradient Overlay following the settings of the image bellow. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 21

With the "Buttons / 4" layer selected, create a rectangle anywhere on the space using the Rectangle Tool (U). Rename the layer of the rectangle you just created to "All". Now select the Path Selection Tool (A), select the path of the "Buttons / 4" layer, copy it (Cmd/Ctrl + C), and paste(Cmd/Ctrl+V) it onto the path of your "All" layer. Do the same for "Buttons / 3" layer, the "Buttons / 2" layer, and the "Buttons / 1" layer. This may be a little tricky to understand, but following the image below illustrates how it is done.

Step 22

Now double click the "All" layer and apply a Gradient Overlay and Inner Shadow following the settings of the image below.

Step 23

Close the "Buttons" group and select the "mic / Mic" layer. Make sure it is Black and its Fill is at 100%. Apply a Bevel and Emboss with the settings of the image below. Press OK.

Step 24

Close the "mic" group and select the "speaker / Speaker" layer. Apply an Inner Shadow and Gradient Overlay with the settings shown on the image below. Press OK. On the Layers Window, turn the Fill of the layer to 0%.

Step 25

Now lets make the center part of the speaker. Create a new document with size 4 x 4 px. Zoom in as much as you can. With the Mask Tool (m) make a selection like in the picture below. With the Paint Bucket Tool fill the selection with black. Deselect all (Cmd/Ctrl + D) and go to the menu Edit/ Define Pattern , a window will prompt for you to write a name for the Pattern, write any name and press Ok.

Step 26

Go back to the file phone.psd and double click "speaker / Speaker center" layer. Add a Gradient Overlay, Inner Shadow and Pattern Overlay with the pattern we just created. Check the picture below for the settings.

Step 27

Let’s create the HDMI plug. Start by selecting the Pen Tool (P) and drawing the outer shape of the plug. Rename it to "1" and press (Cmd/Ctrl + G) with the layer selected to make a group. Rename the group to "HDMI plug". Then apply a Bevel and Emboss style to the "HDMI Plug / 1" layer following the settings on the picture below.

Step 28

With the Pen Tool, create another Shape over the last one, make sure its color is CCCCCC and apply an Inner Shadow Style with the same settings as those on the following image.

Step 29

With the Pen Tool, create another Shape over the last one. Make sure its color is 797979 and apply an Inner Shadow Style with the same settings as those on the following image.

Step 30

With the Pen Tool, create another Shape over the last one, Make sure its color is 343434.
And your HDMI plug is done.

Step 31

Let’s make the USB plug. With the Pen Tool, draw the outer shape of the plug. Make its color 0e0e0e. Rename it to "1" and press (Cmd/Ctrl + G) with the layer selected to make a group. Rename the group to "USB plug".

Step 32

With the Pen Tool, draw the inner shape of the USB plug. Make it black 000000. Rename it to "2". Apply the Inner Shadow, Inner Glow and Gradient Overlay styles following the image below.

Step 33

Let’s make the display screen. Start by drawing the outer part of the screen. Make it black 000000.

Step 34

Draw the inner part of the screen name it "2" and hide it. Paste the image you would like to be in the screen over the "Display / 2" layer and rename it to "wallpaper" (I am including a beautiful image with the source files in case you wish to use it). With the Cmd/Ctrl key pressed, select the Vector Mask Thumbnail of the "Display/2" layer. That will make a selection. With your "wallpaper" layer selected, press the Add Layer Mask button to hide the part of the wallpaper that is outside the screen. Now click the small chain links that appear on your "wallpaper" layer to disable the link between the layer and its mask With the thumbnail of your "wallpaper" layer selected, press Cmd/Ctrl + T to transform it, and press the Cmd/Ctrl key to distort the image you are using as wallpaper to match the phone’s perspective. Press Return key when you are done. Apply a Gradient Overlay and an Inner Shadow style to your "wallpaper " following the settings shown at the bottom of the image below. Press OK. Finally, again enable the link between your "wallpaper" layer and its mask.

Step 35

Let’s do the glare of the screen. With the Pen Tool, make the shape of the glare over your "wallpaper" layer. Rename the layer to "glare" and apply a Gradient Overlay Style following the settings of the image below. Turn the Fill of the layer to 0%. Press OK.

Step 36

Now go and download the USB, HDMI, and MOTOROLA logos. Paste them into your "phone.psd". Using Cmd/Ctrl + T to transform, and the Cmd/Ctrl key while transforming to distort your logos to match the perspective of the phone. Place all the logos in a group named "Logos". All the shapes of the logos should be color grey 959595.

Step 37

Now do exactly the same with the icons. The only difference is that you will have to draw them with your Pen Tool using a reference image. Make sure the four icons are color grey d7d7d7. Make a group with all the icons and name it "Big Icons". Do the same with the three big icons, but make them color white FFFFFF, and set their Fill to 50%.

Step 38

If you are still here with me, it means you are an extremely patient and detail-oriented person, so let’s take it a little bit further and add more detail to make our phone look even more life like. Make a new 100 x 100 px document with a black background. In the menu, go to Filter/ Noise Add Noise following the settings on the image below. Press OK. In the menu go to Edit / Define pattern, and name it "Noise".

Step 39

Go back to your "phone.psd" file. Double click the first layer you created, "MAIN BG", and apply a Pattern Overlay style with the pattern "Noise" that you just created following the settings on the image below. Press OK. This will add some texture to the plastic.

Step 40

While pressing the Cmd/Ctrl key, select the Vector Mask Thumbnail of that same "MAIN BG" layer. This will select the entire phone. Now press the "Create New Fill or Adjustment Layer" button at the bottom of the layers window and select "Foto Filter.” This creates an adjustment layer named "Photo Filter 1" over the "MAIN BG" layer. Drag "Photo Filter 1" to place it between the "USB plug" group and the "display" group.

Double click the thumbnail of the "Photo Filter 1" layer and the "adjustments" window will pop up. Apply the same settings as those on the image below.

Step 41

Using the Shift Key, select all layers and groups, from "MAIN BG" to "Big Icons", and press Cmd/Ctrl + G to make a group with everything inside. Name that group "Final Phone". Drag the "Final Phone" group to the "Create a New Layer" button at the bottom of the layers window. This will duplicate the "Final Phone" group. Select the new "Final Phone Copy" group and press Cmd/Ctrl + E to merge all layers inside that group into one layer. Rename it to "Reflected". Select the "Reflected" layer and go to the "Edit / Transform / Flip Vertical" menu.

Step 42

Now drag the "Reflected" layer to its final position. Press the "Add Vector Mask" button at the bottom of the Layers Window. Ensure you have white as your foreground color and black as your background color. Within the Mask Thumbnail of the "reflection" layer selected, drag from top to bottom. Finally, paint the Background layer with gray "c2c2c2".

Final Image

You could also consider a Quick Look submission, an easy way to showcase your app to all our readers.

Billings – Billings’ simple workflow and intuitive interface makes quoting, invoicing, and time tracking effortless.

MiniBooks – A handy iPhone app from FreshBooks that lets you track your time and invoice your clients while you’re away from your computer.

Flickpad – Checking out photos on Facebook has never been this easy and fun. If you have an iPad and like Facebook photos, you need this app!

Cretouch – Dress your device with Creative Touch, a series of delightfully designed iPhone cases and protective covers in a wide range of styles.

iPhone App Secrets – The secrets about how one person created the app Gratitude Journal for just $500 and made over $7000 her first month. Full of great iPhone development tips!

Xilisoft iPhone Magic – Xilisoft iPhone Magic is the ideal iPhone manager to synchronize your iPhone with your computer. Never again will you have to worry about losing your iPhone files.

iPhone 4 Reception Case – The all new Reception Case™ from IvySkin is the solution. The Reception Case™ is an ultra thin protection solution unlike any other in the market.

4Media iPhone Max – The best alternative to iTunes (iTunes 9.2 supported), 4Media iPhone Max for Mac can backup iPhone files to Mac and iTunes, transfer files from Mac to iPhone, convert video/music files to iPhone supported formats, and rip CDs/DVDs to iPhone.

taskList – Capable enough to apply a task management system that suits your style, yet simple enough that you won’t get lost spending more time making a list than doing the stuff that’s on it.

My Virtual Girlfriend – My Virtual Girlfriend is an interactive, 3D girl dating game that combines humor and simulated romance.

Tift Shift Focus – Tilt-Shift-Focus lets you create tilt-shift photos without expensive equipment or professionel image editing skills. Turn your photos into miniature worlds, zoom in on the details and turn a simple image into a stunning visual experience.

Aqua Globs HD – Very easy to get into with the main aim to gain points by joining cute wiggly globs. Touch and drag to navigate them and join them together.

Like his creations, there are many layers to Garry Milne. While some of his images may have dark undertones, Milne is anything but. Here he talks about his inspirations, skateboarding and the importance of being nice to people.

Mark Twain once said, “Clothes make the man.” If such a statement is true then we’re in for a hell of a ride with UK-based Illustrator Garry Milne as he describes his usual outfit as being a skin tight zebra print jumpsuit. That was quickly followed by the obligatory, “I’m kidding,” of course but still…

So do I start with Garry Milne the person or Garry Milne the artist? Both are equally fascinating. Here are some quick facts about him: he enjoys a “super nice” White Russian, can flick his slipper into the air and catch it back on his foot, and chose the 1990s hip hop anthem “Jump” by Kriss Kross as the music to feature on his MySpace page, though on that same page he says his favorite kind of music is “anything with a pan-pipe solo long enough to make me question what I’ve done with my life.” If that alone doesn’t endear you to him then maybe I should mention the fact that his intricate, complicated illustrations have been featured in publications such as 4 Talent Magazine and The Skinny’s Student Guide.

The Secret’s Out

Milne currently resides in a flat in Hertfordshire with his girlfriend Nadine who is pursuing a PhD in Psychology. It makes you wonder if she can read into Milne’s complicated illustrations and discern anything about the inner workings of his mind. He assures me that he never puts any secret images or inside jokes into his client work but “that’s not a bad idea, though…maybe [I] should!” He says he leaves the “strange stuff” for his personal work.

As a child he said he was loud and outgoing, and credits that to having an older brother to look after him. In addition to his older brother Stuart, his family consists of his parents who have always been extremely supportive of his artistic endeavors, allowing him to “make a mess of their living room for many years.” Stuart, who has featured some of his photography work alongside his brother’s in an exhibit titled “Milne vs. Milne”, was a different story in Milne’s early days. According to him, his older sibling taught him his first lesson in perseverance, in a way that only an older sibling can:

"I drew a picture of the Bushwackers- a WWF wrestling tag team back in the day. I was so pleased with it and I was showing everyone. It was sooo bad but everyone was being nice. I showed my brother and he couldn’t keep the laughter in – he cracked up. I got in a strop and tore it up. The next day I did another one which was better than the first. I think that taught me a valuable lesson about not settling on your first attempts."

Lessons Learned

Interesting enough, Milne passes that “big brother torch” to those starting out in design, “Don’t give up. No matter how unlikely it seems – remember why you started art/design – because you love it and things will happen. Also be nice to people. It’s a real cliché, but knowing the right people is a big part of the game.”

Right now Milne has a day job as a Graphic Designer at a local company where he does the typical promotional and corporate work. It’s at night and some weekends when he does his illustrating and creates pieces like Day Dreamer, Head or Heart and Piece Offering. I wouldn’t have been doing my job if I didn’t be a pain and ask him to explain that one, particularly because he describes it on his website as a “Personal comment on how I sometimes avoid explaining my work.” Milne played nice and answered the question for me, but I feel like I’d somehow be taking away some of the mystique if I revealed his answer.

To prepare for his career Milne went to school and then stayed on to 6th form before heading to college to do an art foundation degree. After that he went on to university to study graphic design and Illustration. While at university he chose to specialize in illustration, but also learned a lot about design. About that he says, “That has helped me develop my style and also helps when it comes to commissions – I’m not just providing illustrations.”

After university he started doing some freelance design work and then concentrated on illustration. As is common, it took a while for him to get work and be noticed. This is where his big brother’s earlier lesson in perseverance kicks in again. “Once I was given a few briefs – more seemed to follow. I think it’s just a case of proving you can deliver a job and being in mind when the right job comes up.”

Patience is a Virtue

So far Milne’s been lucky enough to have fairly long deadlines when it comes to his work so it lets him take on more than one project at a time. While he handles those deadlines like the consummate professional that he is, he admits that they can be hard sometimes. "If you get really into a brief sometimes you’d just like to continue working on it, maybe change some things – take it further."

Luckily, though, Milne says he seems to get “fairly open briefs [and] usually the client tell me their loose idea or some aspects they want featured and I get to work.” He always starts with pencil drawings that are then scanned in and colored on the computer. Though he typically has a rough composition in mind when he starts, that often changes while he works using pencils, pens, paintbrushes, a scanner and a Mac. When in the need for some inspiration he turns to his large collection of art books as seeing the work of others makes him want to create something of his own.

Working on that Mac has sped things up when it comes to the amount of time he spends on each illustration and the longest he’s ever spend on a computer-generated one is two weeks. The longest he’s ever spent on one piece was a painting that took him two months. While painting is his favorite artistic activity, it’s something where he finds he lacks the patience he’s mastered with his illustrations. “I really enjoy painting. When you can see the effort that’s gone into a painting it’s hard not to appreciate it on some level. I’m a little impatient though – I want to see the end result now.”

One of Milne’s current projects is a series of skateboards for Motive which will be released soon. Skateboarding is another passion of Milne’s. He’s been very active in it since he was a child and even gave up playing football and basketball in school in order to pursue that more. There was a time when he thought about pursuing a professional career in it but that “didn’t really work out.” While participating in skateboarding may not have worked out career wise, it doesn’t mean that it hasn’t still played a big part in the career path he did choose. The Motive project won’t be his first foray into designing boards. He’s also done a series for Discipline, which he features on his website.

I really enjoy painting. When you can see the effort that’s gone into a painting it’s hard not to appreciate it on some level.

A Clean Slate

Other than skateboarding, Milne never really set out into the world with a clear idea of what he wanted to pursue. Maybe that’s why his favorite part of any project is the blank page. That page doesn’t stay blank for long, though at the moment his workload is heavy since he’s juggling a full-time job and his freelancing. Eventually, though, he’d like to be able to devote more time to his freelance illustrating, painting and exhibiting.

At 27, though, Milne has learned some hard lessons about the design world. “Don’t take things too literally. You can get promised a lot of things and sadly they rarely come through. That sounds a bit pessimistic but just don’t get too excited about things until they’re definitely happening.” It’s safe to say, though, that things are definitely happening with this brilliant illustrator.

More From Garry Milne

On the Web

Check out Garry Milne on the web.

In the article this week, we take a look at the fabulous Chaos Rings and Dungeon Hunter, among others. Like always, if you have a game you want reviewed, please let us know!

Chaos Rings

Chaos Rings

Square Enix are makes of arguably the best RPG ever in the Final Fantasy series and they have now brought their talents to a brand new game just for the iPhone/iPod. In Chaos Rings you must take part in a fighting tournament called the Ark Arena, controlling both a male and female character against other pairs of fighters.

As you progress through the game you uncover more details about your characters’ pasts and each pair of characters have their own storyline twists, leading to a unique experience each time you play through Chaos Rings. The graphics are some of the best on the iPhone and, as should be expected from Square Enix, there are hundreds of hours of gameplay to get through. Don’t be put off by the high price tag, this is a bargain!

Price: $12.99
Developer: Square Enix 
Download: App Store

Undercroft

Undercroft

For those of you who love classic looking RPGs, look no further than Undercroft. You control a group of adventurers who must take on a mysterious evil that has risen from a graveyard. Each character has unique abilities that will help you take on over 60 types of enemies and you head towards the graveyard to confront your fate.

Twenty hours of gameplay may seem short for an RPG but there is a lot of replay value and plenty of side quests to take on. Although the graphics look simple, there is a lot of depth and you can try out the free demo for free.

Price: $4.99
Developer: Rake in Grass 
Download: App Store

Dungeon Hunter

Dungeon Hunter

Coming from Gameloft, perhaps the most seasoned of iPhone developers, Dungeon Hunter is almost guaranteed to be a hit and, thankfully, it is. Creating your own character, you take them on an epic quest through a fantasy world, fighting many mythical beasts as you complete quests and missions across the kingdom of Gothicus.

There is plenty to do and the game looks fantastic, as do most of Gameloft’s titles. It does, unfortunately, hit problems with the lack of a decent save feature, only being able to save your progress when you reach certain milestones. This does let the game down, meaning you’ve got to invest in long stints in order to progress through the missions, but for RPG fans it is still a good buy.

Price: $4.99
Developer: Gameloft 
Download: App Store

Tap Farm

Tap Farm

A slightly different RPG is that of Tap Farm, part strategy game, part role playing game. You play a farmer who must decide what to grow in order to harvest, make money and build up your estate.The more you grow, the more you can sell and the more money you can make.

It’s a simple game executed well and you can visit your real-life neighbours to see how their farms have developed. However, while the base app is free, there are a number of upgrades that cost really money and this could put some people off. It costs nothing to try though, and you may find you want to pay for more.

Price: Free
Developer: Streetview Labs 
Download: App Store

Watson: The Beginning

Watson: The Beginning

A Japanese adaptation of an English classic is sure to raise eyebrows, especially as all my screenshots below are in Japanese. However, please be assured that this game has been translated to English! So, to the game… You play as Watson who has been accompanying Holmes on a trip to the country.

When Holmes is taken ill it is up to you to solve the case as Watson and so you must explore the crime scene, talk to suspects and suggest clues to characters. The manga graphics are beautiful, the controls are simple and it is a challenging game to complete. More episodes are in development and early reviews suggest this will be a winner.

Price: $2.99
Developer: a-games
Download: App Store

What Have You Been Playing?

We always appreciate your feedback and suggestions for other games so please let us know what you have been playing in the comments below.

  

The business of building websites is one of constant change, adaptation and strategy. The way designers and developers build websites is often informed by the methods of others and their own trial and error. In light of this, we can draw a number of parallels — some philosophical, to a certain extent — between Web professionals and one of the oldest and most popular board games of all time (counting traditional and digital games). This game is chess.

Image credit

In this article, we’ll explore the relationship between the game of chess and the Web industry. We’ll learn fundamental lessons from the pawn, rook, knight, bishop, queen and king, and we’ll highlight the factors — both offline and online — that determine best practices. The game is beloved by many professionals, so it seems fitting to apply its great strategy and elegance to the digital age; certain practices might help you lead a more successful working life.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Pawns

Of all the pieces on a chessboard, the most abundant and least strategically useful are the pawns. Acting as soldiers on the front line, these men of honor advance across the board in an attempt to reach the end of the opponent’s side and transform into a more useful piece (i.e. another queen). While this doesn’t happen often, pawns nevertheless play a fundamental role in shielding higher-ranking pieces from attack, and these simple pieces are also used at the outset to gain positions of advantage.

Always Move Forward

Pawns can only move forward. They can get a quick start; players have the option of moving the pawns up to two spaces on their first move and subsequently moving them one space at a time. When you work on projects in a business environment, the principle of moving forward without back-tracking is an inspirational perspective. If you cease to constantly drive your ideas forward, they can become stagnant; progress is critical to a website’s development.

Here are some tips you can use to adopt this mindset:

• Don’t get stuck using deprecated practices when structuring website code.
• Examine your community to determine needed features for future upgrades.
• Change a website’s interface only if it would benefit the user experience.

Be Willing to Sacrifice

The ideal of giving something up in exchange for a greater good is realized by pawns, which, though limited in function, are plentiful and can protect others. In design, shielding the end user from issues that can damage the usability of the website is a worthwhile sacrifice. Having to let go of something that took time and energy is always unfortunate, but knowing when to say goodbye could mean the difference between success and failure.

Here are some tips for internalizing this attitude:

• Ensure that your Web layouts are flexible enough to meet the needs of various devices.
• Weigh the benefits of features against their pitfalls before eliminating them.
• Content is more valuable than design; never dilute its quality for eye candy.

Aim for Change

The pawn’s greatest moment is arriving at the opponent’s side of the board. Striving for betterment and aiming for your goals are behavioral ideals firmly upheld by professionals. This requires dedication and careful planning. When undertaking a creative project, it’s important to think beyond the current ask and consider the long-term project.

Here are some tips to get into this mode:

• The website-building process is never complete; ensure that you maintain a steady flow of updates.
• Think of ways to enhance the website to better cater to your visitors’ changing needs.
• It never hurts to have a business plan when scoping out a Web-based project.

Rooks

Rooks (or castles, as some people call them) are fortresses of strength that move across the board either horizontally or vertically. Their nature is similar to that of bishops in that they move in a straight line (although bishops move diagonally). Progress can be hindered by barriers, and interaction with other pieces is sometimes required, but the rook’s overall benefit is stamina and longevity.

When working on Web projects, we often put a great deal of thought into things like conventions and patterns and their theory and implementation. The nature of semantics and following recognized pathways in order to structure a document properly is reminiscent of the way that chess pieces such as the rook have a particular function and invariably carry out unique tasks. Only with logical thought can we hope to change the ultimate goals of an event and avoid obstruction.

Structure With Purpose

A rook represents strength and structure. The castle of stone might be restricted in its interactions on the chessboard, but its value is in its character. Websites need to be constructed well in order to survive the trials of everyday use. Considering how such needs should be met will ensure a sturdy and durable display of data. Take great care when structuring your work to reduce “illegal moves” and syntax.

Here are some tips for strengthening your outlook and code:

• Always validate your code; it will reduce the number of bugs.
• Use the right element for the job to improve your code’s semantic value.
• Keep code minimal to reduce file size and loading time.

Assist Those in Need

Like the other pieces on a chessboard, the rook is always on hand to help out by attacking or defending. Working with others to accomplish a task is only part of their job. In a Web environment, the same is true: if you take the time to assist those who use your website or service, not only will you increase your value, but you will gain the gratitude of the visitors, whom your website requires in order to keep running.

Here are some tips that might be of assistance:

• Providing ways for people to contact you is important to maintaining trust.
• Negative feedback can still be constructive; don’t dismiss it as “bashing.”
• Provide social interaction aids to help visitors feel involved in your community.

Take Precautions

Sometimes things don’t go as planned, in which case you’ll want to hold the strongest position possible. Rooks, like all other critical pieces, are only tools to protect other pieces in play, but caution is fundamental to remaining in a position of power. Thinking of how future scenarios might challenge your strategy can help future-proof your work from obvious flaws. You don’t want visitors to encounter obstacles that make them miss out on the benefits of your website!

Below are some tips for fortifying your website:

• Turn off scripts and styles to test whether your website is still usable.
• Test your websites on mobile devices, a market that is proliferating.

Knights

Knights are unique in their movement, going forward two spaces and then taking a single side-step. This means they can weave past other pieces and take up positions of singular advantage. Strategically, knights are most often used to pin hard-to-reach pieces in place through a clever attack. While this unique movement has its advantages, the knight does not replace the other pieces, which have their own strategic benefits.

Our uniqueness, whether as it is applies to our creative process, our products or our ability to solve common problems, is something we as professionals take for granted. We are able to incorporate creative flourishes when we forge applications, flourishes that can be tracked through the code (such as conditional comments, which give stylistic flavor to Internet Explorer). Like a white knight saving our sanity, our uniqueness helps us side-step issues that could otherwise become complicated.

Be Brave in Adversity

Mythology has taught us the familiar attributes of the knight: bravery, strength and honor. Thoughtful reflection on the Web-building process teaches us to be courteous to others and brave, while sticking to our guns when faced with the prospect of compromising in order to gain market share.

Here are some tips to make yourself more knight-like:

• Never take criticism personally; negative feedback is often the most useful kind.
• Don’t resign in the face of competition; the only failure in life is to quit trying.
• Try to rally support for your project; there’s strength in numbers.

Have a Selling Point

The knight is the only chess piece that move in two directions in one turn; even the queen can’t do this! This attribute teaches us the value of having a selling point. Selling points give visitors a reason to choose one product or service over others that perform the same function.

Here are some tips on finding your selling point:

• Draw from other people’s work, but never steal anything outright.
• Improving on existing services is a kind of innovation in its own right.
• Be focused in what you offer; reinventing too much increases complexity.

Avoid Barriers to Access

The knight is the only piece that can pass over others in its movement. This ability to navigate past barriers is somewhat reminiscent of standard recommendations for accessibility, which ask us to remove barriers to access on our websites. The goal is to allow freedom of movement and access to content.

Below are some tips on removing barriers:

• Consider the types of people who are not as able as you are online.
• Testing your work on an audience is better than going solo.
• Make sure your website works in different browsers to avoid serious breakages.

Bishops

The bishop is a piece that moves diagonally across the chessboard. The bishop scans the board for its next move, minding pieces that block its path, in the same way that a visitor scans content until a barrier prevent their progress. A bishop cannot step off the tile color to which it was initially assigned, ensuring a kind of vendor lock-in.

As Web professionals, we tend to get caught up in arguments about whether frameworks are useful, given their disadvantages (and even with graceful degradation, for example). The benefits of frameworks for certain situations occasionally outweigh their downsides (like trapping users in the environment), so make the most of what you have; dismissing less powerful options is not always the best way to go — in fact it could increase the amount of work required.

Have Faith in Your Work

The bishop, of course, is religious in nature, an agent in the battle between two sides. Faith in a religious sense is not needed to practice Web design, but as a quality of character it does play a part in one’s identity. Faith affects motivation and makes you believe in the project you’re spending so much time and effort on. If you have no faith in your craft, the job is doomed from the outset.

Here are some tips for building faith in your work:

• Create a list of benefits to focus on your website’s potential.
• Set realistic, structured goals to achieve success.
• Encourage visitors to recommend your work to people they know.

Know Your Limits

It may seem frustrating that each bishop is trapped on its own color, limited in impact. But if you make the most of it, bishops can still be useful. Know your own strengths and limitations, so that you don’t attempt the impossible or unachievable — if you do, the result will surely be flawed.

Here are some tips on knowing your limits:

• Get external support or advice when you hit a wall.
• If something can’t be achieved the way you hoped, look for alternatives.
• Reduce your weaknesses by learning new skills regularly.

Stick to Your Guns

While being able only to move diagonally may seem like a disadvantage, this can prove useful on occasion. Having sheer determination to carry out a job in a certain way is admirable. We humans are sometimes stubborn, and we stick to our guns when possible. This can cause us to make mistakes… or motivate us to persevere.

Here are some tips on being determined:

• Reflect on a project’s overall goals whenever possible in order to reassess a plan’s feasibility.
• Mistakes happen, and no one is perfect, but that’s no reason to stop trying.

The Queen

The queen is the second-most important piece on the chessboard. She can move horizontally, vertically and diagonally across any distance, and her power spans the entire board. She is the king’s most agile bodyguard, and losing her can be devastating. You have to use your power responsibly, both on the chessboard and in your profession; misusing your tools could cause you to lose visitors to the competition.

Sometimes we find ourselves swatting a fly off a nuclear warhead. Knowing exactly what to use, when to use it and how to use it appropriately is what ultimately distinguishes professionals from amateurs. In addition, taking advantage of the powerful tools at our disposal can speed up progress and eliminate the complexities that come with attempting the impossible with simple tools.

Realize Your Potential

A potent force, the queen moves freely about the chessboard, with few restrictions. The queen is a powerful piece and reminds us to exert the greatest effort to reach our potential. Rather than staying in our comfort zone, we must always learn new skills and achieve more than what is expected of us.

Here are some tips to stretch your skills:

• Everyone has the capacity to learn; keep your skill set up to date.
• Push yourself to become a better professional and to exceed your own expectations.
• Try not to let any of your skills go to waste when creating something.

Cover All Bases

In our work, we try to minimize error by viewing every situation from multiple angles — this is important. In chess, players use the queen in much the same way, exploiting her power yet shielding her from harm. In the creative process, your only real limitation is being blind to critical elements, which is why getting some perspective from outside testers and users never hurts.

Here are some tips to cover your bases:

• The more time you spend planning a project, the better the results usually will be.
• Information architecture is your friend; make use of wireframes and mock-ups.
• Spend time testing your website intensively for critical flaws.

Strategy and Learning

You have two knights, two rooks, two bishops and many pawns, but only one queen. Her value lies in her singularity; each move of the queen requires strategy and consideration of consequences. We become better players — and professionals — through trial and error, constant learning and foresight. Being cautious in the game teaches us to be wise in business.

Here are some tips to help you strategize:

• Read blogs, books, tutorials, magazines and anything else that can help guide you.
• Analyze your target audience to get ideas on what your website might need in future.
• Researching the competition gives you a sense of what potential visitors need.

The King

No piece is as important as the king; it is the one piece that must evade capture. The king moves only one space at a time, in any direction, and whenever it is in immediate danger, either a piece must be moved to block the attack or the king must be moved to avoid it. The king has no equal and cannot be restored by a pawn — sacrifice, and so prevention is imperative.

Web professionals have to protect what is important, too. We deal with payment details, databases, passwords and other sensitive information. If we lose any of that through carelessness or a lack of preventative measures, we end up losing something greater: the customer. Establishing trust takes time, but it can be lost as quickly as a surprise checkmate!

Avoid Traps

Protecting the king is the primary concern of every chess player. Gaining advantage to prevent loss is important. While Web professionals usually have no reason to evade capture (unless they’re doing something wrong), the benefit of avoiding common traps (the equivalent of “foolsmate” in chess) becomes apparent when testing the cross-browser functionality of a website.

Here are some tips on avoiding traps:

• Try to reduce the intrusiveness and obtrusiveness of your website to enhance the visitor’s experience.
• Actively seek out errors in your work to improve your service.
• Internet Explorer is a pain. Watch out for its rendering faults.

Value and Importance

A common tactic in chess is to weigh the value of the pieces against the benefits they represent. The king is critical because the game is lost without it. Comparing value has an important role in the Web industry, too, especially when losing mission-critical features would undermine the entire process. Comparing value also helps when prioritizing maintenance work or scheduling upgrades.

Here are some ways to tip the scale:

• Accurately pinpoint the value of your service.
• Upgrades are avoidable, but reduce downtime as much as possible.
• Price your service fairly; prices that are either too high or too low create problems.

Know When to Resign

Sometimes we get so excited — or stressed, as the case may be — about complex or next-to-impossible projects that we forget the option of saying “no.” We never like to resign or throw down our sword; we feel as though we have failed because we couldn’t meet the client’s needs. But firing bad clients and knowing when to scrap weak ideas is a part of being a professional. You can’t win every fight.

Here are some tips on recognizing when to throw in the towel:

• Trust your instincts when deciding whether to undertake a project.
• Salvage something from anything you work on.
• Learn how to deal with “clients from hell.”

Chessboard

Chess players focus on the pieces in play and on capturing the king, but they must also understand the chessboard as a battleground on which this drama plays out. This relates to the website-creation process (and to a lesser extent, the Web industry): lessons are to be learned from the chessboard itself.

Image credit

Light and Dark

Like a chessboard, the Web industry is full of light and dark, good and bad. We weigh benefits and pitfalls when performing our roles. A chess game tells a story; likewise, the fruits of our labor and our highlights and disappointments all appear online.

Think Ahead

One of chess’ biggest lessons is to think ahead, instead of in the moment. Being able to predict how your opponent will move helps you gain advantage. This is also true of the website-building process. Unjustified decision-making leads to problems, whereas well-planned strategies that entice people to visit and use your service lead to faster results and greater rewards.

Weigh Your Options

In chess, there are literally millions of ways a game can play out, and with every move the number of potential outcomes decreases. Knowing your options and which route affords the best opportunity for success is a critical skill. Website creators have many different methods of production and implementation as well, but missing the mark with scalability or usability can diminish a website’s user-friendliness and jeopardize its success.

Make Your Move

Decision-making can be tricky; in chess, a wrong move can cause you to lose a piece, a good position, an advantage or even the game. The same could be said of building a website. Preparing for different projects, services and eventualities is one thing, but having the courage, skill and understanding to carry them out successfully takes practice. After examining your options, make your move: put all your careful planning into action.

Checkmate!

So many useful lessons can be learned from chess. If you haven’t played it before, visualizing what we’ve gone over might be hard, but the fundamental principles of the game — how the pieces interact and the role of strategy in the big picture — should not be ignored. The game actively promotes logical thinking and strategy — both useful skills.

More lessons could certainly be drawn from the game, but hopefully this article will serve as a source of inspiration, especially if you feel your goals are out of reach. We often learn the most from making mistakes, losing a battle and then returning to win the war. Nowhere is this been truer than in chess, where a mixture of practice, skill and occasional luck is required to become the grandmaster.

So many aspects of the Web industry (such as syntax, design and ideals) change constantly, but the fundamental principles of learning, growing and trying your best often mean the difference between failure and success. Try to incorporate lessons from the chessboard into your own work; while having all the pieces doesn’t guarantee victory, having the basic skills will give you the confidence and awareness that you need to succeed.

(al)

© Alexander Dawson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Another extremely talented designer by the name of Jennifer Cirpici has volunteered to create two exclusive wallpapers for the readers of PsdTuts+. This months exclusive wallpapers feature something for everyone, on one hand we have a beautiful scenery shot with lots of bright colors, and on the other we have something more textured and rough with lots of interesting paint effects. So make sure to check this out, download the wallpaper and then view Jennifer’s other art.

Exclusive Wallpaper – Breaking Canvas

• Jennifer’s DeviantArt
• Jennifer’s Behance Portfolio
• Jennifer’s Portfolio

I always wanted to make a Digital Artwork with a lot of bright colors because colors are associated with happiness. This is a promotional poster for my portfolio website. The concept behind this is that the guy you’re seeing doesn’t want to be stuck in a canvas like the animals but wants to jump out of it, into the freedom, not being tied to strict rules. I always work with a concept; I want my work to be more than just something you can see on the screen but also something to think about, to inspire people.

• 1024×768
• 1280×800
• 1280×1024
• 1440×900
• 1680×1050
• 1920×1200
• 2560×1440
• iPhone
• iPad

Exclusive Widescreen Wallpaper – What Guys Dream Of

For this illustration, I was inspired by Zach Bush and his matte paintings. The concept about this piece is brought out from books like ”Where is Waldo?” I wanted to create this surreal landscape with a woman in it, to see the woman you really have search for it. I made this with my wacom Intous 3 tablet and Photoshop, using different stocks on sxc, crestock, and cgtextures.

• 1680×1050
• 1920×1200
• 2560×1440
• iPhone
• iPad

Some of Jennifer’s Other Work

Swiss Army Beetle

Cheesecake

Dance With The Devil

Special Thanks to Jennifer

Once again I’d like to thank Jennifer for participating and giving the readers an awesome new wallpaper for their desktops. Please make sure to visit Jennifer’s portfolio and check out some of her great art.

Also stay tuned for some more exclusive high quality wallpaper projects in the near
future!

Photoshop and Illustrator compliment each other in many ways. Today we will demonstrate how you can use them in tandem to draw and color a graffiti-inspired illustration. Let’s get started!

Before You Begin

Before you begin, it’s always good to do a bit of planning. For graffiti art, do some research and keep it in mind when you begin planning out your sketch. Use thicker lines for the outline, thinner lines for the inner details, and wispy lines for more defined creases.

Step 2

Sketch out a drawing and scan it at 300 DPI. When you’re finished, go ahead and make a new document in Illustrator. Go to File > Place and place your image on the canvas.

Step 3

Use your favorite brush to do the thick outline of your character and add in the face’s main details such as eyes, mouth, ears and nose. I changed up the eyes and nose for a more flowing appearance. The brushes I used are just the default circles.

Step 4

To add a more Graffiti look to your piece, you’ll create five brushes of your choice but keep in mind to make sure they have some sort of point at the end, and also make one white. Now use these brushes to trace the lines of your sketch.

Step 5

Once you’ve traced your sketch, it’s now time to start adding in the details. I’ve added speckles to the tongue, eyebrows and neck while adding rough lines to parts of the piece. I also decided to add white highlights to it so it would balance out the dense look. Once you’ve finished with the line art, save this Illustrator file and bring it in to Photoshop to add color. You could do this in Illustrator if you wanted to but for the purposes of this tutorial we will do it in Photoshop.

Step 6

Now open up your lovely file in Photoshop. First, I choose where and how I’m going to incorporate my base colors in my piece. I decide to make the outline a darkish brown, while highlights and coloring will be a mix of light brown and blue. I start by holding down Cmd/Ctrl and clicking on my line art layer to make a selection. With the selection still active, delete the line art layer, make a new one and fill it you’re your desired color.

Step 7

Next, choose your base color. For mine, the face will be colored a light brown. First, make a new layer underneath the line art, then take the Magic Wand Tool and select the whole inside of the face. Go to Select > Modify > Expand and expand the selection by 1 or 2 pixels. This is so we won’t have ugly spaces between the coloring and the outline while keeping a smooth appearance. Repeat until every space of this color is filled in, which should only be the parts you’ve decided will have it.

Step 8

Go ahead and choose a slightly darker version of the base color you used, we will be adding the shadows. Pick places where you think shading would look best and use the pen tool to create fills.

Step 9

Take your third color, which will be for filling certain areas of the piece and making it more colorful. As I said, I chose a blue in which I colored places like Eyebrows, tongue, and certain places of the neck. Remember to add a darker shade of blue for shadows in these areas as well.

Step 10

I chose to put more highlights in this piece, which usually gives it a more vibrant and detailed look. I decided to put blue highlights under the line art in creases to add to the appearance.

Step 11

Color in everything else you’ve missed, but remember to balance the colors evenly throughout the whole piece.

Step 12

We can’t just have a plain background, right? Add a gradient to the background. I chose white and blue, the same colors I used for shading.

Step 13

To outline the figure, flatten your coloring layers and outline together to form one layer, which you can easily do by just Right Click > Merge Down. Next Cmd/Ctrl + Click on that layer and go to Select > Modify > Expand and expand by 8 pixels. Make a new layer underneath your character and fill it with white.

Step 14

Take your pen tool and start drawing the desired shapes underneath both the white outline and figure layers. Then fill it in with a color in sync with the rest of your piece. You can keep adding to this layer until you achieve a desired result. One thing to keep in mind though, background effects for single illustrations always make it look more appealing.

Final Image

I’m very pleased you’ve read through the whole tutorial, and hopefully you got some needed tips on how to make a full-blown illustration in the Graffiti style. There are tons of different versions of this style, but I wanted to share my own with all of you and the process I go through. Make sure to keep experimenting and make up your own crazy elements to which you could take to the streets!

In today’s quick tip tutorial we will demonstrate how to create a realistic-looking credit card using Photoshop and Illustrator in just a few short steps. Let’s get started!

Step 1

To speed up the process, we will begin by putting together some basic graphics in Illustrator. Make a 3.5in by 1.9in rounded rectangle, then fill the object with a color or gradient of your choice.

Draw some curvy lines as shown using the Pen Tool. Then go to Object > Blend > Blend > Blend Options > Specific Steps, enter 30 and click OK. Make two different lines with different colors.

Select the line art that you just created and apply a clipping mask using the shape of the credit card. Make sure that the credit card shape is placed on top of your line art and that you’ve duplicated your credit card background as well.

Note: if you are using Illustrator CS5, select the credit card and click the Draw Inside option to Paste (Cmd/Ctrl + V) inside the objects.

Use the Pen Tool to draw the ribbon as shown.

Step 2

We are now finished with Illustrator. Let’s get started by opening Photoshop, creating a new canvas that’s a bit larger than your Illustrator document and then by copying and pasting each element that you created in Illustrator individually. At this stage, you should already have some logos and graphics that you would like to place on the card. If not, go ahead and create some. Add your graphics to the card, as shown. Feel free to use the following fonts in your card as well. Download them here and here.

Step 3

Now it’s time to add your text. Choose the Oval Typeface using #f1efed. Type out some random numbers and a name. Then apply the following layer styles.

Step 4

Now it’s starting to look more like a credit card, let’s add some shadows to make it look more realistic. Duplicate each layer, change the font’s color to black and turn off the Layer Styles, this will give us the base shadow. Now move the shadow numbers about 3-5 pixels to the right and 3 pixels down (do the same with the name as well), now go to Filter > Blur > Motion Blur, then type in Angle: -34 and Distance: 10px; set the Layer Blend to Multiply and 50% Opacity. For final touches of the front side, go ahead and look at your reference credit card and add an expiration date wherever you want it placed and you will be done with the front side, make a new folder and drop all the layers inside and name it FRONT.

Step 5

Now, let’s work on the backside of the credit card. Duplicate the credit card base, move the layer to the FRONT folder, then Right Click on the layer and rasterize, make a selection of it and fill it up with a color you used on the front side (I used the bright red on the top left of the credit card’s front side). Note: don’t use gradients for the back.

Go to the FRONT folder, duplicate the text layers that you used Layer Styles (credit card numbers, name and expiration date in my case) on and drag them to the BACK folder, then flip them Horizontally and change the color of the text to the same as the credit card’s back.

Now we need to change the Layer Styles of the text layers to make them look as if they were stamped and look as the reference credit card, Double Click on the layer and change the values as shown below, do the same for the other layers.

Step 6

Now the credit card looks like your reference, go ahead and arrange the rest of the elements you made for the back side of the credit card.

Some elements like the signature rectangle can be done in Photoshop, if you have a logo of your own you can rotate it 45 degrees and duplicate several times and make a pattern, then select each one and change the color of it with Hue and Saturation (Cmd/Ctrl + U), then Merge them all together, in another layer make a rectangle the size you want for the signature and fill it with white, make a selection of rectangle > select the pattern layer and click (Cmd/Ctrl + Shift + I) to inverse the selection and Erase, then merge both layers.

To make the signature make another layer, select a hard black brush and make a random signature. Finally, add the security codes.

Step 7

If you like, you could end the tutorial here but now we are going to add some perspective to the card. Duplicate each folder, then Right Click on the group folder and select Merge Group, do the same for each folder. Now we have 2 layers, one of the front and one for the back of the credit card, select both layers and Click Cmd/Ctrl + T to transform and make them smaller, then rotate a little and Right Click to select Perspective and transform as desired.

Step 8

Select a layer of the credit card (no matter if it’s front or back) and duplicate, make a selection of it and fill it with a light grey, then move it about 2px to the right. To make the shadow of the card, Duplicate the credit card and make a selection of it and fill it with black, then Click Cmd/Ctrl + T to transform > Right click and select Distort and transform as desired; Go to Filter > Blur > Gaussian Blur > 10 px radius; set the Layer Blend to Multiply at 30% Opacity.

To make the Reflection, Duplicate both credit card layers, select both layers and flip them vertically (Cmd + T > Right Click > Flip Vertical) and arrange them on the tip of the credit card; select a Soft Eraser Brush with 30% Opacity and erase each layer to make the reflection.

Step 9

Let’s make some lights and shadows, make a selection of the credit card, then make a new layer, select a white soft brush, Normal Mode at 20% Opacity and on the top left corner add some light, then change color to black and add some shadows on the lower right corner.

Final Image

Make a background and you are done! To make images of each side of the credit card just turn off the front side layer, remember to turn on or off the corresponding reflection layer as well; you can use this tutorial to make a credit card icon; remember that you can make different color credit cards by playing with Hue and Saturation.

Packing so much functionality into one iPad application is no simple feat, and all too often this type of grand aim results in a fiddly, difficult-to-understand app. If you’re a Flickr user, FlickrStackr offers a promising solution for interacting with photos on-the-go. Let’s take a look and see whether it can pull off all that it claims to!

Connecting to Flickr

Although FlickStackr does have some functionality when not linked to a Flickr account, it’s limited. The first thing you’ll want to do is authorise the application to access your Flickr content – it’s able to do everything except delete your images. This is a straightforward process, and works well.

The only bug I found was that if you enter your password incorrectly, you need to exit the authorisation process and start again – be sure to get it right first time around!

The Interface

The Basic Interface

As I mentioned before, FlickStackr packs a great deal of functionality into one app. The interface is split into the traditional two-panel iPad view, with navigation on the left and content on the right. Broadly speaking, you can either access your own content, or flick through public areas such as “Explore”, “Recent from Everyone”, and “Search”.

Although the interface is fairly easy to understand on the whole, it breaks down in a few areas. The icons, for instance, are really poor. Each one is exactly the same colour, with similar imagery across the board. I’d actually prefer it if these were simply removed altogether.

Typography isn’t perfect, either. Font sizes and spacing aren’t standard throughout the app, and it becomes frustrating after a while. If the developer took the time to hire a professional interface designer, it would make the next version a far more pleasant experience to use.

Browsing & Editing Your Photos

After tapping on your name in the top left, you can browse through your Photostream, Sets, Favourites, and Contacts. Clicking on “Profile” simply pops up an in-built web browser to display your Flickr profile page.

Browsing through your photos is a pleasant experience. They load quickly, and you’re spoiled for choice by the different range of viewing modes available:

Interface Options

If anything, this range of choices could be a little confusing for new users. I’d have preferred FlickStackr to focus upon one design decision and execute it perfectly, rather than leave it up to the user to pick the one they feel is best.

Viewing photos is an enjoyable process, though – you can browse thumbnails, read comments and meta data, or flick through images in full-screen mode if you prefer.

My niggles with the interface design culminate in the wonky layout of the page displaying comments and metadata:

Comment Display

If you’d like to edit the metadata of your photo, this can be instigated by tapping “Edit” towards the top right of the screen. It works well, and lets you adjust the Title, Caption, Tags, Sets, and Groups relating to the photo. You can also change various size and security settings, specifying whether an image is viewable to public/family/friends, and what permissions people have.

Uploading Photos

If you’d like to upload new photos – granted, an unusual thing to do from an iPad – the process is fairly straight forward. You first select the source of your images; Camera Connection Kit, iTunes File Sharing, Saved Photos, or Photo Library.

Uploading Photos

After doing this, you tap on the images you’d like to upload, and set the process going. It’s possible to edit the metadata, sets, and permission information on a photo before uploading.

Once in progress, the interface and feedback is very odd. Providing the application remains open, you receive a small dialog at the start of each photo upload, informing you that the image is being resized.

After that, there’s no feedback until FlickStackr begins uploading the next image. The obvious solution would have been to design a progress bar screen, detailing how the upload process is going.

Other Features

FlickStackr has another few useful features, focused around the public aspects of Flickr. Search is particularly useful, and gives you a range of advanced options for fairly accurate results:

Searching

Because the application is a universal app, it also works great on the iPhone (your $1.99 goes a long way!). The functionality is almost identical, so I’m not going to delve into this aspect deeply today. The interface is very similar, and shares a few of the same quirks as on the iPad:

iPhone Version

Conclusion

On the whole, I’m really pleased with FlickStackr. I honestly didn’t expect to find an application that had so much functionality – especially at the bargain price of $1.99 for the iPad and iPhone version. Everything worked well in my testing, and I didn’t come across any major bugs.

The one thing that might stop me opening the application on a regular basis is the interface. I know how difficult it is to pack so many features into an app and still have it look simple, but I do think that FlickStackr can do better. If the look and feel is improved in a future version, I can see it wiping the floor with every other Flickr client available.

Despite this annoyance, I wouldn’t hesitate to recommend the app if you’re a regular Flickr user. The sheer amount of functionality on offer for $1.99 is incredible.