Aria: Providing Cheaper PCI Compliance for Payment Processors
Achieving Payment Card Industry Data Security Standard (PCI DSS) compliance for online transactions is an expensive and timely endeavor; routinely costing hundreds of thousands of dollars and spanning several quarters in time. According to Gartner, PCI compliance will cost up to an average of $2.7 million among Level 1 merchants and $267,000 among Level 2 merchants. Further, Visa and Mastercard will be imposing new PCI requirements upon online merchants, which will include more frequent on and off site security reviews, beginning in 2010; thus forcing more companies to upgrade their systems to meet compliance standards.
Demand billing and recurring subscription management company, Aria, offers a solution built to manage PCI compliance for companies. Instead of companies investing in the necessary infrastructure to meet the compliance standards themselves–which includes employee background checks, installation of security cameras on-premise, and third party audits of your network–they can have Aria handle the entire online transactions process, from start to finish, taking advantage of their level 1 (the highest and most rigorous) compliance level, thus mitigating costs which would be incurred had a company tried to become compliant.
By taking advantage of Aria’s suite of payment processors, which include the likes of Authorize.net, Chase Paymentech, Cybersource, PayPal, TransFirst, and RBS Worldpay, customers are able to shop around and find a solution which suits their needs. This versatility adds an extra layer of security and functionality. Conversely, if a company wishes to make themselves PCI compliant, they can only use one payment processor, severely limiting their options.
Aria promises to have their solutions “deployed in 30 days or less for $30,000,” but founder and CEO Ed Sullivan says that many times they are able to deliver compliance even sooner. The services offered by Aria are intended for businesses involved in card-not-present transactions and their customer base includes those who are in the cloud, staff, telecommunications, media, and online gaming sectors.
Aria is based in Philadelphia and has a sales and marketing office in San Mateo. A complete list of the payment processors which Aria is affiliated with can be found here.
Crunch Network: CrunchBase the free database of technology companies, people, and investors
How Many Ideas Do You Show Your Clients?
    |
I read somewhere that showing your client the full range of your creative ideas during a project is important, the rationale being that the client is entitled to see the ideas coming from the creative professional who they have hired and invested in. While this approach has some benefits, in some cases showing too many ideas is counter-productive to the natural flow of a project. Proof of how imaginative you are can be shown in other ways.
Spoilt For Choice
Scenario 1
You look at your Illustrator pasteboard and see half a dozen cool logo ideas… not just cool, but super-cool… not just super-cool, actually, but practical and appropriate. You have translated the brief brilliantly. You feel rather pleased with yourself. However, the last time you showed a client all of your ideas, you got caught up in a dizzying merry-go-round, forced to mash up parts of one logo with parts of another, using unsuitable and under-baked concepts.
That client was overwhelmed with ideas and unable to choose one or the other: too many directions, and too many good ideas. You offered all your super-cool ideas on a platter, convinced that you had nailed all possible directions. You worked hard to pre-empt your clients questions and suggestions. But with all of this hard work, you unwittingly set in motion a series of events that many designers before you have experienced.
Putting your client in the position of a kid in candy store can lead to some of the more frustrating experiences in design work. Are we undermining the flow of a project with our need to have our creative ego stroked by the client?
Too much choice can be a bad thing for clients.
Scenario 2
Again, looking at your Illustrator pasteboard, you see half a dozen cool logo ideas: super-cool, practical and appropriate, in fact. You have translated the brief brilliantly, as before.
The client is impressed by your imagination, your interpretation of the brief and your ability to think outside the box. They feel embarrassed — even spoilt — by the choice of amazing ideas; not what they were expecting, given their previous experiences. The client looks at the ideas and realizes you were the right person for the job. They go away to mull over the ideas.
You’re pleased. The client is pleased. Time for a beer.
The client returns with a decisive plan of attack. They have picked out one or several potential winners from among your ideas and are keen to walk through tweaks and changes with you. By showing the client all of your ideas, whether cool or funky, practical or safe, you have covered all bases, left no room for misinterpretation and accounted for that notion of “subjective perceptions.”
As is almost always the case, you have your own favorites, but prior experience has shown that you mustn’t assume the client will feel the same.
Fewer Ideas, Less Choice
We could alter these two scenarios by changing the “showing all ideas” to “showing just a few.” The advantages would be that the client would not be overwhelmed: you will have provided just a few promising ideas. This way, you are being assertive and confident in your ability to interpret the brief. You also believe that the client would be handicapped by more choice.
In both cases, the client might be pleased with the ideas you have picked out and your ability to get the job done. You are a creative laser-guided missile. You don’t need your ego stroked, and you don’t need to show off your awesome imagination to every client. Your portfolio does that just fine.
You have many other cool and practical ideas up your sleeve, but putting all your cards on the table at this time is not necessary. Save them. If the client does not buy any of the ideas you’ve filtered for them, even after you have justified their suitability, you can fall back on those. Even if you lose round 1, you’re prepared for round 2.
Be Aware
Consider these points before attempting a full-360 triple-duck-tailed high-board dive. This is not a comprehensive list but a good starting point when deciding whether to show some or all of your ideas.
Knowing Your Client: A Psychological Angle
Ultimately, your flexibility in your presentation of ideas will be determined by how well you know the client: getting a good sense of their personality, their brief and other personality- and business-related issues. You will also have to know the process that your contact will go through back at their base: are they the decider, or do they report back to a board or senior staff member?
When a group of people is involved in making decisions, you may want to keep a tighter reign on the creative process. Presenting too many ideas to one person can be overwhelming, but too many ideas for a board of six spells disaster.
Being able to read people is not only useful: it can save your sanity over time. Design and creativity are one thing, but if you want to excel at business and attract new clients, especially as a freelancer, being well versed in basic psychology goes a long way.
Cover Your Back: A Solid Brief
A tight brief is always essential and one of the first things to cover before doing anything creative. A firm and assured hand is often required. Research the company. Understand its decision-making structure. Your point of contact may not always be the decision-maker; you don’t want to pander to the wrong person. Pre-empt undesirable outcomes by familiarizing yourself as much as possible with your client and their business. For example, you may have been given a thorough brief, but if the person who prepared it is not responsible for making decisions, it could be all for nought.
The brief can change during a project, and it can change significantly without you being aware of it. The very nature of the creative process and your collaboration with the client can unearth ideas not previously considered. Be fluid and organic in your approach. When you feel the brief no longer reflects the direction of the project, be prepared to revise it with the client.
Take a time-out, and give yourself time to breath and re-evaluate. Don’t feel pressured to commit. Assess the situation and determine whether a realignment is in order. Better to backtrack a little now, because at the end you will just have further to backtrack.
Ask a lot of questions. The more you immerse yourself in the project, the more familiar you will become with the subject matter. Don’t be afraid to keep asking questions if you feel they are important to the outcome of the project.
Communication
For many freelancers, meeting the client face to face is not always possible, and you may run into complications if you haven’t made provisions. Personally, I liaise with clients through email or Skype, but only when the brief and communication are solid. If the responses are short or not forthcoming, then I take it to the phone. Only then am I able to get a sense of what the client is about.
In my experience, we are getting lazy as communicators, trying to deal with all aspects of life — business and personal — via email and text messages. Some clients I’ve had have refused to speak with me by phone, while their written communication failed to inspire me with confidence.
If this happens to you, reflect on whether the project is worth taking on. If you have problems communicating before the project has even started, you will likely hit a brick wall when trying to get feedback on creative ideas or dealing with set-backs. I have on occasion “fired” clients because they were not pulling their weight, yet expected me to bust my gut. It doesn’t work like that.
A true collaboration requires the commitment of at least two people: the designer and client.
To Conclude
There is no right or wrong answer to the question of whether to show all of your best ideas right away. Assess each client on their own terms and figure out what’s best. Would the client be overwhelmed by too many choices, or would they welcome the variety? No one size fits all. On occasion, your experience or a hunch will tell you to focus on only one concept, with perhaps a few minor variations. The work period may be slow, and you have only one project on the go and are happy to spend the extra time on what may be a valuable repeat client.
Sometimes sticking your neck out and giving more than you are being paid to do is worthwhile, but that’s a choice only you can make. Don’t make it a habit, or your clients will come to expect that extra workload of you all the time: a quick path to freelance burn-out.
Being a good judge of character, understanding human interaction, being able to see past the here and now to pre-empt later problems, all of this helps you keep your sanity. Spend time learning and researching not only creative techniques but people, too. Your job and overall quality of life will improve as a result.
Your Thoughts
Are you guarded or care-free in sharing your ideas with clients? Do you have a one-size-fits-all solution, or do you approach each client on their own terms? Have you discovered certain winning methods of dealing with particular situations?
We can all learn from one another’s experiences in dealing with people in business. If you are starting out as a freelancer, take whatever advice others are willing to give.
Image Credits
- Choices by andreiz
- Be aware by pictureperfectpose
- Creative Brief by meine-erde
- Communication by larskflem
- Conclusion by mrtea
(al)
© Graham Smith for Smashing Magazine, 2009. | Permalink | 2 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: brief, ideas, logo design
Yummy! Free Food and Cakes Icon Set
    |
Today we are glad to release something extremely tasty — Yummy Icon Set, a set with 20 beautiful, original and sweet icons in resolutions 48×48px – 128×128px and formats .png, .ico, .incs and .tif. Also, the vector source (.eps) is available for free download as well. This set was designed by our friends Iconeden and released for Smashing Magazine and its readers.
Download the icon set for free!
You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. Please link to this article if you want to spread the word.
- download the set (incl. vector source) (.zip, 3.5 Mb)
- IconEden’s release post
Behind the design
As always, here are some insights from the designer himself:
Dear Smashing Magazine readers, Xmas is coming! And we’re as excited about it as you’re. However, our inspiration comes from the work that we’re crafting everyday. And so, to double the joy, Smashing Magazine and IconEden happily announce the immediate availability of “Yummy”, our new icon set which heavily focuses on, ahem, food!
And it’s all yours. Bake it into your projects, use it in your Xmas greetings, or simply imagine yourself enjoying it! Similar to previous collections, Yummy comes in vector and pixel formats and can be immediately built into your projects at no cost. And of course, we’d love to hear from you. Do let us know what you think about Yummy by either leaving us a comment.
IconEden, the crown jewel of Frexy Studio, provides premium icons for websites and interfaces. We love freebies too! That’s why we’ve regularly released free icons to the world to show you how grateful we’re for being able to do what we love to do.
– IconEden Team
Thank you very much, guys! We really appreciate your efforts.
We wish our readers Merry Christmas with your family and friends and, of course, have a tasty Christmas dinner! 
© Smashing Editorial for Smashing Magazine, 2009. | Permalink | 61 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Freebies, Icons
Design Something Every Day!
    |
As designers, we’re all trying to get better at what we do. We surf the Web daily for hours trying to find useful tips and tricks to enhance our design skills. But what if we spent less time surfing the Web looking for inspiration and more time creating and designing things?
The Challenge
Someone once said, “Practice makes perfect“. While that statement might not be completely true, I do believe that practice makes you better. That is why in this blog post, I would like to propose something to every designer: Why not try to design something every day for one year?
Actors rehearse their lines until they learn them perfectly. Musicians practice their songs until every note is just right. Athletes practice their particular sport so they can excel. As designers, why can’t we do the same? Ask any successful designer in the community about how they have succeeded and they will attribute much of their success to practice. I challenge you today to design something daily. Take fifteen to twenty minutes that you would normally use to surf the Web today and devote it to designing something.
Most of you are probably thinking that I am out of my mind for proposing this. How can you, as a designer working either for a company or for yourself, find the time to design something daily? More importantly, how will I come up with design ideas for a whole year’s worth of projects? Well, to answer those questions, here are some practical tips.
Some Practical Advice
15 – 20 Minutes Daily
This challenge is for you to practice your skills. It doesn’t have to be a final, polished project, so you can limit it to a short period of time. Additionally, you can actually schedule this as part of your daily routine, which will make you more likely to follow through on your decision to design something daily.
And don’t worry or get discouraged if you miss a day due to other more important commitments. The key is to jump back into it as soon as possible. Keep doing it, and try your best to stay consistent. If you don’t find it reasonable to design something daily for a whole year, then you could try instead for one month, or another more manageable time period.
Design Ideas
You’re probably wondering how you will be able to come up with a fresh new design daily for 365 days. Actually, it’s quite simple. You can use a theme for your designs. Maybe for one month you can try to design something retro. For another month, you can try your hand at some typographic posters. The possibilities are endless. A good example is Jessica Hische. She started a project called the Daily Drop Cap, where she designs a drop cap every day and makes her Drop Cap designs available for free download.
Daily Drop Cap is Jessica Hische’s personal project: she designs a drop cap every day and makes her designs available for free download.
Another thing you can do is experiment with different ideas that you have. Maybe you’ve been thinking about doing a collage effect, for example. You might have an idea that you’ve been wanting to try, so this might be the perfect time for it. You can also use this "practice time" to try out different tutorials that have caught your attention.
Be Accountable
Some of us will have a hard time staying motivated during such a lengthy commitment. One way to stay motivated is to create a blog specifically for tracking the project’s progress during the year, and post the results daily. People will be expecting to see something from us and this will keep us motivated.
This method of blogging daily for one year has recently been popularized in the mainstream movie Julie and Julia, which follows American author Julie Powell’s year-long attempt to cook every recipe from a famous cookbook by Julia Child, while blogging about the experience each day. In Powell’s experience, her accountability was part of what kept her motivated for the 365 days.
Another way to stay accountable and keep motivated is to get a fellow designer to do the challenge with you. During the year, you can show each other what you’ve designed each day, allowing for some healthy, friendly competition.
It’s Been Done Before
As mentioned, the concept of blogging daily for a full year has been done before in a variety of contexts. It’s also been done successfully by a lot of great designers. Here are some designers that I have asked about designing something daily.
Stefan G. Bucher – The Daily Monster
How long did you design / have you been designing daily?
I filmed myself drawing Daily Monsters for 100 days straight (including weekends and holidays). I capped it at 100 days since I also started animating the Monsters in more and more elaborate ways as the project grew. Since then I’ve done month-long bursts of Daily Monsters, and also documented the making of the book 100 Days of Monsters as a daily process. These days I usually do Monsters with lots of animation for special events or occasions.
What are some challenges associated with designing daily?
The main challenge for me is integrating a daily practice with the demands of my regular work, and my occasional attempts at having a social life. There are just so many hours in the day, and it becomes a nerdy endurance challenge. The process itself is great, though. The real challenge is to not block out everything else.
Can you give me at least 5 benefits of partaking in this daily project?
- I got to draw every day again after almost stopping entirely for a few years.
- I’m getting better at creating characters every day.
- I’m teaching myself how to animate in the process.
- When I release the Daily Monsters daily it quickly attracts a great, active, and creative audience of kind, amazing people.
- Doing something every day short-circuits procrastination and self-doubt. There’s only time for doing, and doing = happiness.
Where do you get ideas for your daily designs?
The Monsters are a process. As long as I sit myself down and do the work, I don’t have to worry about ideas; they simply appear. That’s the best part. You’d think I’d have learned that lesson now, but I still fall out of the habit, and get right back into my head. “What am I going to draw? Is this any good? What’ll I do next?” When you’re committed to putting something out there every day, you just don’t have the luxury of doubt. And if something comes out a little wonky, well… you know you can redeem yourself the next day.
Any advice for anyone who wants to get started doing this?
Don’t think about it. Don’t plan for it. If I had thought about how much work the Daily Monsters would be, I’d have never started. If you get an idea for something, just sit down and start doing it. Also, you might consider not telling anybody about your daily project until you’re a few days or weeks into it. Commit to it, but allow yourself some privacy to work out the early kinks. Most importantly: Make sure you don’t ever skip a day. If you know you’re going out of town, or if you feel a cold coming on, create a few posts in advance. You mustn’t skip a day. As soon as you’ve skipped one day, it becomes so much easier to skip the second. And then you’re screwed. But here’s the thing: You won’t want to skip. Doing the Daily Monsters was completely addictive. I got to be proud of something I’d done every single day.
Matt Lyon
Make Something Cool Everyday Flickr Group
How long did you design / have you been designing daily?
I’ve been designing on a strictly daily basis since January 1st this year… It was one of my New Year’s resolutions.
What are some challenges associated with designing daily?
Most of the challenges centre upon either time or inspiration, but it’s these challenges that form the reason for doing daily work alongside other commitments.
Can you give me at least 5 benefits of partaking in this daily project?
I’ve discovered plenty of benefits over the year, but I think that these have been the most valuable:
- Keeping the creative juices flowing
- Working in different ways as a means to overcome potential obstacles (e.g. creating a piece of work with limited materials or within a strict time limit)
- Daily work inevitably improves your skills / craft, be it in terms of drawing, using creative software, etc.
- Daily work creates its own momentum in terms of recurring themes, directions and ideas, that will feed into other work.
- The process instills and supports a sense of discipline to work.
- Allows for experimentation and unadulterated freedom to try anything out.
Where do you get ideas for your daily designs?
All of my work evolves from drawing, and for a while many of the themes and ideas in what I create have generated over time through the process of just letting things happen. Simply put, I take a line for a walk and see what happens, be it in response to something I’ve read, heard, or am just feeling. There are no rules – this is my time to do what I want.
Any advice for anyone who wants to get started doing this?
I would recommend anyone and everyone with an interest in image-making to take up the challenge of creating something every day. My ‘drawing a day’ project has been so rewarding to me this year that I’ll be continuing it come 2010. Illustrators or character designers should keep a daily sketchbook to keep their ideas fresh… Alternatively, taking a photograph a day can prove just as valuable for others. Perhaps graphic designers or typographers could do a ‘layout a day’ project?! Who knows?! The sky’s the limit!
Joshua Wysocki – Wysocki Weekday
How long did you design / or have been designing daily?
I started doing those dailies since November 25, 2007 — so over 2 years now.
What are some challenges associated with designing daily?
The biggest is trying to keep at it on a normal pace. You probably noticed how I have missed a lot of days so far. Working a 10+ hour day-job wears me out and my brain can’t handle holding the pencil in my hand.
Can you give me at least 5 benefits of partaking in this daily project?
Benefits? Are there any? Maybe it’s the thought of continuing a project. Training yourself to be expressive and challenge yourself creatively. Making new friends and communicating with fellow artists. And hopefully eventually making some money from selling zines/books.
Any advice for anyone who wants to get started doing this?
Just jump into it and doodle a small event that happened to you that day… from something as small as stepping into a puddle of mud, or watching your favorite TV show.
Brock Davis
Make Something Cool Every Day 2009
How long did you design / have you been designing daily?
In my job I think of ideas every day, but this project for 2009 is the first time I put to task
making a new piece of art every single day for a year.
What are some challenges associated with designing daily?
Coming up with ideas I feel are original. I always strive for originality — it is almost impossible to attain
but the effort often conjures interesting results. Another challenge is simply finding the time to do it.
I have a full-time job in a creative field, so I have to separate my professional ideas from my personal
ideas. I have a family as well, so I tend to work late and think when my children are in bed.
Can you give me at least 5 benefits of partaking in this daily project?
- Keeps my brain fresh.
- Helps me identify my strengths, weaknesses and consistencies.
- Creatively challenging, and I love a challenge.
- Improves my ability to hone in on an idea and learn to execute it quickly as well as meticulously.
- Shows me creative sides to myself that i didn’t know I had.
- An interesting way to visually calendar my year; I can look at a piece and think more clearly about what was going on that day.
Where do you get ideas for your daily designs?
From everything. I try to absorb as much from every day life as i can. Also, memories from childhood, pop culture, observations of how the world is always changing in all aspects (socially, technologically, economically, etc.).
Any advice for anyone who wants to get started doing this?
Have fun and always be a student. No one can know everything, it’s better to absorb and learn all the time. Then apply that to your work and let it influence you to reshape it into something original.
Mike Duesenberg – 365 Album Covers
How long did you design / have you been designing daily?
I’ve had the idea for quite a bit, but I didn’t start actually doing it till October 31st of this year.
What are some challenges associated with designing daily?
The biggest challenge is time. Some days are so busy, it’s hard to make time for this project. The idea is to dedicate an hour or two to the design, but sometimes the day flies by and you aren’t left with much time, which then affects the quality. So that’s been the biggest challenge. The second biggest challenge is trying to stay inspired. For 365albumcovers.tumblr.com, I use http://www.flickr.com/commons as my photo source. The problem I’ve been running into however is that after a while, all these vintage photos tend to direct each piece in the same direction. So to solve that, I’ve been brainstorming up some ways on how to add more variety.
Can you give me at least 5 benefits of partaking in this daily project?
- Daily projects keep your mind working.
- It’s a nice creative break from the typical day-to-day design work.
- It gives you a chance to experiment with ideas that you may not be able to use on other projects.
- It gets your name out there! For instance, like this interview. It can be good press for you, as a designer.
- It’s nice to share these with friends and see what their feedback is.
Where do you get ideas for your daily designs?
I usually wait to see what the photo, band name and album name will be. Usually one of those will automatically inspire me to go towards a certain direction.
Any advice for anyone who wants to get started doing this?
Just have fun with it. Think of an idea that you can manage to do every day. The main reason you should do this is for self progression. If it gets some attention from other people, awesome. The problem I ran into is keeping it fresh. You may notice that I haven’t posted something since mid-November. I consider the first entries a trial run. I learned from it. Now I’ve compiled a few ways to keep the concept new and exciting to myself, which I plan on launching January 1st. So stay on the lookout!
Tom Judd
How long did you design / have you been designing daily?
I spent 1 year from November 2004 drawing a page a day, then in July 2007 I repeated the process for another 365 days.
What are some challenges associated with designing daily?
Keeping the motivation. Maintaining originality.
Can you give me at least 5 benefits of partaking in this daily project?
- It improved my drawing skills.
- It was a great way to generate ideas.
- It emptied my brain.
- It allowed me to fill empty time with something productive.
- It got me lots of work.
Where do you get ideas for your daily designs?
Each day was different. I think that is one of the benefits. You never know what you are going to see on your way to work.
Any advice for anyone who wants to get started doing this?
Make sure you are doing it for the right reasons. As soon as I became aware that other people were looking at my daily output, it started to affect the work I was producing in a negative way.
Daily Projects Showcase
Jessica Hische – Daily Drop Cap
The Daily Drop Cap is an ongoing project by typographer and illustrator Jessica Hische. Each day (or at least each work day), a new hand-crafted decorative initial cap will be posted for your enjoyment and for the beautification of blog posts everywhere.
Thomas Fuchs – A Heart a Day
A Heart a Day is a blog by freelance illustrator, Thomas Fuchs. His goal is to incorporate a heart into one of his illustrations every day.
Chow Hon Lam – Flying Mouse 365
The FM 365 Project is the result of Flying Mouse’s Project of doing one design per day for a whole year! Every week there are 7 new products available! These 7 new products are able for a quick pre-sale at a lower price for the entire week and once the week ends there are 7 newer products to replace them, and so on.
Mark Weaver
Mark Weaver is another designer/illustrator that decided to design something every day for one year. He has a plethora of styles in his designs.
Philip Tseng
Philip Tseng has a unique style that he implemented into his daily designs. He chose a theme of fruits and vegetables and each day he designed something that started with a different letter of the alphabet.
Jonas Buntenbruch – DONE: Daily Design Workout
DONE was the personal daily design workout of Jonas Buntenbruch for 2008.
Every day he flexed his design skills by creating one piece in 30 to 60 minutes. The presented works range from scrap and sketches to photos, typographic experiments and random creative designs.
A New Year’s Resolution
Now that you’ve read interviews and seen some strong examples, I hope that you’re now inspired and ready to start on this wonderful daily design adventure. I want to propose a new year’s resolution to you: design something every day.
Each time you design something, you can submit it for everyone to see. Simply tweet the design along with #daily365 and everyone will be able to see your project. By the way, if you’re just starting out as a designer, this is an effective way to build your portfolio. The Smashing Editorial Team will monitor all submissions and present them in posts here at Smashing Magazine, every now and again. I guarantee that at the end of the year, you’ll be able to look back and say that, because of the daily design project that you completed, you’re a better and more well-rounded designer.
So who’s up for the challenge?
(ll)
© Jad Limcaco for Smashing Magazine, 2009. | Permalink | 182 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:
Essential Habits Of An Effective Professional Freelancer
    |
There’s very little to stop anyone becoming a freelancer. In a highly competitive and, in most places, saturated market, you need to make sure your reputation as a freelancer is well-managed and continues to grow. It’s very possible to get a good reputation without being the best in the world, and it’s even easier to lose that reputation. In this article, we’ll explore 15 habits that are essential in helping freelancers effectively safeguard and grow their reputation, and we’ll also discuss how to make freelancing work for you. The habits are split into 3 sections:
- Marketing
- Business and time
- Specific business areas
Marketing and Relationships
1. The Presentation Habit
Your website should be at the centre of your marketing strategy. It’s where people go to see who you are, what you’re about, whether you know what you’re talking about and what work you have done. It’s your silent 24/7 salesman, and it needs to be right. Fortunately, what your website needs is straightforward:
- Well-presented work with a good description of the roles you played
- A brief history of who you are and why you’re where you are
- Contact details that are easily accessible
- Content that is continually tweaked, added to, and updated
Other than that, you can go wherever you want with your own website — and so you should. Personality is key. Some great examples:
Elliot Jay Stocks carries a very clear message on his site
Ian Coyle goes for pure simplicity
Jason Santa Maria goes the whole hog with a new design for each post — a lot of work but he stands out from the crowd as a result
2. The Networking Habit
They say that within 6 degrees of separation, everyone knows everyone. So you need to make sure that everyone within your 1st degree (i.e. people you know), know exactly what you do. It needs to be exact as well. If you’re a developer you don’t want people saying you’re a website designer, and so on. Your current network of friends, family, and associates are your free word-of-mouth marketing – so get them talking about you right now.
Once this is done, your network needs to be extended and enhanced. Register with any social networking platforms that can work for you — LinkedIn, Facebook, and Twitter. Within those places, start getting into the right circles. On LinkedIn you may join some appropriate discussion groups that are either local or skill based. On Twitter you may start tweeting and including appropriate hashtags so more people can see your tweet on that subject.
There are many ways to network and connect with people, so it’s crucial that a freelancer not be afraid to talk to people and share information and contacts. Learn the networking habit and get yourself known.
3. The Niching Habit
Freelancers can get into the habit of not only finding their niche, but creating niches. A niche in this case is an area in your overall field of work in which you particularly specialise. If you’ve become very good at creating websites for golf courses, for example, then that’s a great niche.
The reasons having a niche is valuable are simple: It’s easier to become an expert in a niche. It’s easier to sell to other prospects within that niche as they can see what you have done before. As an expert in that niche you can charge a premium for your depth of knowledge.
The key to this habit is to proactively build your own niches. Seek out profitable areas in which you can work and concentrate on building niches.
4. The Pricing Habit
How you price your projects can easily be the difference between winning and not winning some work. Your pricing needs to be transparent at all times and should be agreed upon up front. Things go wrong when hidden costs appear later on. Clients like to know how much they’re paying, when they’re going to pay it, and what they’re paying for. So make it clear from the start.
Second part of the pricing habit — protect yourself. It’s easy to get so wrapped up in winning a project that you forgot some simple rules. If you have never worked with a client before, ask for a small percentage of the fee before you do any work. At this early stage, you won’t know whether they will pay! Reduce your bad debt by either only working for clients you trust or having some remuneration first.
Third part of the pricing habit — be flexible. Make sure you find a way to make the commercial deal a win-win for both parties. This could be:
- Monthly payments (regular cash flow over the course of the project)
- Payment when you hit certain project milestones (e.g. project performance)
- Deposit and balance on completion (best avoided for cash flow reasons)
- Possible exchange of services
5. The Growth Habit
It’s been claimed that it costs seven times as much in resources to acquire a new client than it does to grow an existing one. So the growth habit is about proactively looking at your clients in detail so you can discover new ways to help them.
One practical way to do this is to cross reference. Write all your services across the top of an excel sheet, then put your clients down the left hand column. Now place an X in the box where a service you have done matches a client. The boxes without X’s are potential growth opportunities and should all be explored before spending too much energy trying to acquire new clients.
Business and Time
This section is less screenshot, more serious business.
6. The time management habit
Lacking good habits in time management could cause you to over-committing yourself at certain times, which could lead to:
- Missing a deadline and disappointing a client
- Producing sloppy or inaccurate work
- Causing yourself stress because of the pressure to get everything done
The solution to this is an effective planning mechanism. Estimate how long the work will take you, then add a buffer to your estimation. This will ensure that, if it does take longer, it won’t eat into other projects. A 50% buffer works well. That may sound like a lot, but if you go over by 25% and then there are additional client emendations, you’ll need it. Once you have the total time allocation, add it to your diary. Now, here’s the crucial part: Do not move it, shrink it, or change it in any way. If you have to do something urgent that will interfere with that scheduled work, make sure the time is reallocated elsewhere.
A simple calendar application like Google calendar or Outlook can help you plan your time as a freelancer. If you struggle with where all that time goes and want to get serious about making improvements in time management, something like Rescue Time can really help.
7. The Flexibility Habit
Being flexible, responsive, and effective at what you do will allow you to handle unexpected situations, such as when a client contacts you with urgent needs and expects you to help. Having set aside time in advance for such urgent situations will ensure that you earn a reputation as a flexible worker.
What happens if nothing comes up to fill that pre-allocated time? Well you might finish that other project early and can add something special. What happens if the whole day is taken up by urgent project? No problem, you had already planned this might happen, so you won’t let anyone down.
Of course you’re not going to be able to foresee everything, but a certain level of flexibility will allow you to please your clients and be relatively free of stress because of time constraints.
8. The Honesty Habit
Agencies will not use you again if you let a client down, and your chance of repeat work is slim to none. In the same way, you should not over commit your time, but stay within your capabilities. We all need to stretch ourselves on new projects and learn new techniques and practices — that’s not what this is about. This is about promising to do a task in a specified time when, in actuality, you don’t have any idea whether it’s feasible or not. Above all else, people appreciate honesty. You’re better off being honest about whether you can handle a project rather than taking the risk of letting them down.
So how can you grow your skills and help your clients? By being honest and asking some good questions:
- “I don’t think this project is right for me. I don’t have much experience in [insert technology here]“
- “I can really help you with the [insert service here] part of this project, but I know another freelancer who can help with it. Would you be happy if I managed the project for you but outsourced this other work?”
- “I’ll need more information before I know how long this project will take. Would you mind if I spent a couple of hours doing some research so I can give you an accurate timescale?”
9. The Over-Delivery Habit
Do not deliver your projects early. Sound strange? It’s not. If you deliver early, there’s a possibility the client will think you overcharged, and may expect part of his payment to be returned. They might also expect future work to be completed ahead of schedule, which may set a bad precedent.
Instead, use the extra time to focus on whizz-bang elements — those extra bits of polish and creativity that will gain you the reputation you deserve and let you grow. For a designer this might mean spending time adding nice touches to your graphics; for a developer, it could mean more time to implement a cool piece of JavaScript to replace the plain functionality you originally settled for. The “over-deliver” will earn you a solid reputation, whereas finishing early could get you into trouble.
10. The Business Advice Habit
Although as a freelancer you’re skilled at what you do, don’t assume you’ll be able to do your accounts and bookkeeping, fill in tax returns, produce an invoice or write a proposal all by yourself.
Seek regular advice from respected professionals to help you with these aspects of running your business. This might include speaking with people who run their own operations and understand the ins and outs better than you do. Learn as much as possible from their experiences and mistakes.
Specific Business Areas
What’s out there to help you run your business and what areas do you need to focus on? In this section, we’ll discuss some applications that have earned reputations for helping freelancers do their jobs and be more professional.
11. The Email Habit
Email is toxic. As a freelancer you can easily become what’s commonly known as a busy fool. You might spend a significant part of your day just sending and receiving email without ever getting any work done. Instead, be in the habit of controlling email, and not letting it control you.
To do this you need to:
- Turn off all the little reminders, message counts, and other indicators that may catch your eye
- Configure your email client to run a “send and receive” at longer intervals, maybe as little as once per hour
- Set aside blocks of time in the day to deal with all email, then switch it off; if something is urgent, people will use the phone
- Use the ‘touch it once’ philosophy; fully read and deal with every email you open, instead of half-reading some and coming back to them later
12. The Project Management Habit
Some clients will want you to fit in with their processes, while others will not enforce this. You need to have very clear processes for how you start working with a client and start a new project. What questions do you ask a new client? Where do you store the information they tell you? How do you keep track of how close the deadline is? Where do you store all the files they send you?
Email is not sufficient for this! Things will get lost, forgotten or overlooked. You might prefer cardboard folders or ring binders or whatever works for you — but use something and stick to your own system. There are applications like Basecamp and activeCollab that can help with this.
Basecamp is used by many to manage their projects at low cost
activeCollab is a source code editable alternative to Basecamp
13. The Research & Development Habit
Sounds like a big company thing to do but R&D is essential to a good freelance operation. You need to be ahead of the curve or at the very least on it to be servicing your clients most effectively. Be in the habit of investing time for research and development. Expand your current skills and learn new ones.
Never designed a billboard before? That’s development.
Don’t know which email marketing system might help your clients? That’s research.
(Campaign Monitor and MailChimp are good options).
Set aside time every week to do R&D. Build up a list of blogs that feed you new thinking and new ideas. Listen to informative podcasts (Boagworld is a good one).
14. The Sales and CRM Habit
How can you allocate your time and resources and figure out whether or not you need to be hunting for new work or concentrating on servicing current clients? You should know at any given time what your work pipeline looks like, how likely is it all to materialize, and at roughly what value.
There are various applications out there to help, such as Salesforce, SugarCRM (open source edition), as well as 37signals’ popular Highrise.
Highrise is used by many to manage their sales and leads at low cost
15. The Accounts Habit
Making sure you have any easy way to produce, send, and track invoices is essential, as is getting into the habit of running your accounts professionally, because such habits will ensure regular cash flow. Applications like Blinksale, Freshbooks or Simply Invoices can help formalise the accounts side of your business and give a good professional feel to how you operate. Clients will need invoices for their accounts — make sure they’re not hand written or unbranded.
Blinksale can help you create, send, and track professional invoices
Further Resources
- Freelance UK
Host of articles to help freelancers. - BestWebGallery
Inspiration for those times of creative block. - Elance
A place to get freelance work – referral work is better though!
About the author
Rob Smith is the digital director of Blueleaf – helping clients with their digital needs from their website to email marketing to analytics. He also writes in his own blog on digital media and ecommerce
(ll)
© Rob Smith for Smashing Magazine, 2009. | Permalink | 51 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: freelance
Free Christmas and New Year’s Eve WordPress Theme
    |
In this post we release our last freebie for the Christmas and the New Year season: a beautiful Christmas and New Year’s Eve WordPress Theme, designed by Site5 and released for Smashing Magazine and its readers. The theme is decorated using Smashing Christmas Icon Set and its main goal is to give a blog a very festive, snowy, New Year’s atmosphere. The theme has no particular requirements, except that the WordPress 2.8.5+ should be installed. As usual, the theme is free to use in private and commerical projects.
Download the theme for free!
The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.
- live demo
- large preview (.jpg, 0.6 Mb)
- installation guide and documentation
- download the .zip-package (.zip, 0.4 Mb, including instructions)
- release on Site 5
Features
Here are some of the features of the theme:
- CSS-based layout,
- 2 columns of fixed width,
- widget-ready,
- XHTML 1.0 Transitional valid,
- multi-browser compatibility: tested on Firefox, Safari , IE7, IE8, Chrome,
- easy to setup, theme options page,
- JQuery Lightbox,
- AJAX-based based contact form,
- Live form e-mail validation.
Sidebar
Footer
Thank you, Gabi. We appreciate your work and your good intentions. And Merry Christmas, folks!
© Smashing Editorial for Smashing Magazine, 2009. | Permalink | 39 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: christmas, Freebies, new year, wordpress
Free Christmas Stock Photos
    |
The Christmas is coming and Christmas decorations are being prepared. However, it’s not only time to spice up your living environment: your designs could use a bit of the Christmas spirit as well. A week ago our readers asked us to release a set of Christmas-related stock photos; so when a couple of days later Min Thu dropped us an e-mail suggesting to provide us with some Christmas stock photos, we just had to do it.
So, as requested, in this post we are glad to release Christmas Stock Photos Set, a set of 60 original Christmas-related photos in JPG in the resolution 2500×1666px. This set was created by Min Thu especially for Smashing Magazine and its readers.
Preview
Download the photos for free!
You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or otherwise made available for download. Please link to this article if you want to spread the word.
- large preview
- download part 1 (.zip, 11 Mb, 26 files)
- download part 2 (.zip, 12 Mb, 34 files)
Thank you very much, Min! We appreciate your efforts.
Related posts
You may be interested in the following related posts:
© Smashing Editorial for Smashing Magazine, 2009. | Permalink | 23 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Freebies
What You Need To Know About Behavioral CSS
    |
As we move forward with the Web and browsers become capable of rendering more advanced code, we gradually get closer to the goal of universal standards across all platforms and computers. Not only will we have to spend less time making sure our box model looks right in IE6, but we create an atmosphere ripe for innovation and free of hacks and heavy front-end scripting.
The Web is an extremely adaptive environment and is surrounded by a collaborative community with a wealth of knowledge to share. If we collectively want to be able to have rounded corners, we make it happen. If we want to have multiple background images, we make it happen. If we want border images, we make that happen, too. So desire is not the issue. If it was, we would all still be using tables to lay out our pages and using heavy over-the-top code. We all know that anything can be done on the Web.
Made for the Web
CSS 3 properties like border-radius, box-shadow, and text-shadow are starting to gain momentum in WebKit (Safari, Chrome, etc.) and Gecko (Firefox) browsers. They are already creating more lightweight pages and richer experiences for users, not to mention that they degrade pretty gracefully; but they are only the tip of the iceberg of what we can do with CSS 3.
In this article, we will take those properties a step further and explore transformations, transitions, and animations. We’ll go over the code itself, available support and some examples to show exactly how these new properties improve not only your designs but the overall user experience.
CSS Transformations
CSS transformations are a W3C oddity. It is the first time I have sat down to read the full specifications on something and didn’t feel like I had a handle on the subject afterward. The specs are written with the level of technical jargon you would expect from the W3C, but it focuses on the graphic (as in graph drawing) element of transformations and matrices. Having not dealt with a matrix since freshman-year Calculus, I had to do a lot of good old-fashioned browser testing and guessing and checking for this section.
After going through every tutorial I could find and too many browser tests to count, I came out with some useful information on CSS transformations that I think we can all benefit from.
transform();
The transform property allows for the kind of functions also allowed by SVG. It can be applied to both inline and block-level elements. It allows us to twist, zoom in on and move elements, all with one line of CSS.
One of the biggest complaints about cutting-edge design is that the text is not selectable. This is no longer a problem when you use the transform property to manipulate text, because it is pure CSS and so any text within the element remains selectable. This is a huge advantage of CSS over using an image (or background image).
Some interesting and useful transform functions (that are supported):
- rotate
Rotate allow you to turn an object by passing a degree value through the function. - scale
Scale is a zooming function and can make any element larger. It takes positive and negative values as well as decimals. - translate
Translate essentially repositions an element based on X and Y coordinates.
Let’s look at each of these in more detail.
Rotate
The transform property has many uses, one of which is to rotate. Rotation turns an object based on a degree value and can be applied to both inline and block-level elements, It makes for a pretty cool effect.
#nav {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Please notice that in IE 8 (when not in standards mode) it’s required that you type “-ms-filter” instead of just “filter” in your CSS.
Support
Support for transform: rotate is surprisingly widespread. In the CSS snippet above, we directly target -webkit- and -moz- and rotate the #nav element by -90 degrees.
Pretty straightforward, right? The only problem is that the rotation is for a pretty important design element, and many designers will be reluctant to use it if Internet Explorer does not recognize it.
Luckily, IE has a filter for this: the image transform filter. It can take four rotation values: 0, 1, 2, and 3. You won’t get the same fine-grained control that comes with Webkit and Gecko, but your design will remain consistent across older browsers (even IE6).
Is it okay to use?
Yes, but make sure it is thoroughly tested.
Scale
Scaling does exactly what you think it would do: zoom in and out on an element. The scale function takes both width and height values, and those values can be positive, negative or decimals.
Positive values scale up the element, as you would expect, based on the width and height specified.
Negative values do not shrink the element, but rather reverse it (e.g. text is turned backwards) and then scaled accordingly. You can, however, use decimal values lower than 1 (e.g. .5) to shrink or zoom out of an element.
#nav {
/* The nav element width and height will double in size */
-webkit-transform: scale(2);
-moz-transform: scale(2);
}
#nav {
/* The nav element width will double in size, but the height will remain unchanged*/
-webkit-transform: scale(2, 1);
-moz-transform: scale(2, 1);
}
#nav {
/* The nav element width will double in size and flip horizontally,
but the height will remain unchanged */
-webkit-transform: scale(-2, 1);
-moz-transform: scale(-2, 1);
}
Support
The scale transformation is supported in Firefox, Safari and Chrome, but not any version of Internet Explorer (yet) as far as I could tell. Scaling an object is a fairly significant design choice, but it can be applied with progressive enhancement using :hover, which can add a little pop to your navigation especially.
#nav li a:hover{
/* This should make your navigation links zoom slightly on hover */
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
Is it okay to use?
From time to time, yes. But not with critical design elements.
Translate
The name “translate” is a little misleading. It is actually a method of positioning elements using X and Y values.
It looks much the same as the other kinds of transformation but adds an extra dimension to your website.
#nav{
/* This will move the #nav element left 10 pixels and down 20 pixels. */
-moz-transform: translate(10px, 20px);
-webkit-transform: translate(10px, 20px);
}
Support
Translate is currently supported in Firefox, Safari and Chrome when you use the vender extensions -moz- and -webkit-.
Is it okay to use?
Yes, but normal X/Y positioning is just as effective in many situations.
Chaining Transformations
Transformations are great individually, but if you want multiple transformations, the code can pile up pretty quickly, especially with the vendor extensions. Luckily, we have some built-in shortcuts:
#nav{
-moz-transform: translate(10, 25);
-webkit-transform: translate(10, 25);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: scale(2, 1);
-webkit-transform: scale(2, 1);
}
These transformations can be chained together to make your CSS more efficient:
#nav{
-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);
}
The real power of these properties is in combining and chaining them. You can move, turn, zoom in on and manipulate any inline or block-level element without JavaScript. Once support for these properties becomes widespread, we’ll be able to build and design even richer and more lightweight interfaces and applications.
Transition
A basic transition refers to a CSS property that define and moves an element from its inactive state (e.g. dark-blue background) to its hover or active state (e.g. light-blue background).
Transitions can be coupled with transformations (and trigger events such as :hover or :focus) to create a kind of animation. Fading the background color, sliding a block and spinning an object can all be done with CSS transitions.
#nav a{
background-color:red;
}
#nav a:hover,
#nav a:focus{
background-color:blue;
/* tell the transition to apply to background-color (looks like a CSS variable, doesn't it? #foreshadowing)*/
-webkit-transition-property:background-color;
/* make it 2 seconds long */
-webkit-transition-duration:2s;
}
Support
As cool as the transition property is, support is mostly limited to WebKit browsers. -moz-transition already works in the latest nightly build of Firefox 3.7 (so it’s guaranteed for the future). So it’s safe to assume that it is right behind WebKit on this. So you may as well add -moz-transition to your CSS for future enhancements. And even a version without a vendor extension, just in case.
Is it okay to use?
For subtle enhancements, yes, but not for dramatic effects.
Animation
Animations are where the real action in CSS 3 is. You can combine all of the elements we’ve talked about above with animation properties like animation-duration, animation-name and animation-timing-function to create Flash-like animations with pure CSS.
#rotate {
margin: 0 auto;
width: 600px;
height: 400px;
/* Ensures we're in 3-D space */
-webkit-transform-style: preserve-3d;
/*
Make the whole set of rows use the x-axis spin animation
for a duration of 7 seconds, running infinitely and linearly.
*/
-webkit-animation-name: x-spin;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/* Defining the animation to be called. */
@-webkit-keyframes x-spin {
0% { -webkit-transform: rotateX(0deg); }
50% { -webkit-transform: rotateX(180deg); }
100% { -webkit-transform: rotateX(360deg); }
}
All this fantastic CSS animation code and a live example can be found at CSS3.info demo. The demo is viewable in any browser, but the animation works only in the nightly build of WebKit. It looks just like the video above, but it’s worth installing WebKit to see it for yourself (it’s pretty awesome).
SupportThere is, unfortunately, only a limited support for CSS animations yet. 2D CSS animations work in Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira and other Webkit browsers. Safari 4 (Snow Leopard) supports 3D animations.
Conclusion
Right now, JavaScript bridges the gap until CSS 3 comes into full effect. Unfortunately, getting full browser support for these great properties will be a long journey. Until that day comes, we can take advantage of some serious progressive enhancement and rely on JavaScript to enhance our websites and applications. That’s not a bad thing; just how it is at the moment.
With the recent announcement of IE9, I wouldn’t be surprised if the IE team include some of these properties in the new version of the browser especially since talks for CSS3 integration have already begun (border-radius).
The future of the Web is bright, especially with these highly experimental properties such as animation. Although many of the properties are not usable for client or high-level production work, they sure are fun to play with! We can all look forward to the day when we have support across the board to build some really great lightweight applications.
References And Resources
- A Crash Course in Advanced CSS3 Effects
Net Tuts put out a great screencast on a lot of cool CSS 3 effects. - Webkit Announces Support for CSS 3D Transforms
CSS3.info has a great demo of CSS 3 animations that are supported by the nightly build of WebKit. - Jonathan Snook on CSS Text Rotation
Jonathan Snook tackles this up-and-coming CSS3 property. - DEV Camp CSS3 Tricks
A slideshow presentation by Dan Kurtz. - W3C Spec on 2-D Transformations
A resource specifically about 2-D transformations. - W3C Spec on 3-D Transformations
A resource specifically about 3-D transformations. - W3C Spec on CSS3 Animations
The W3C working draft specifications for CSS animations.
We express sincere gratitude to Andy Clarke and Hugh Isaacs II for corrections to this article.
(al)
© Tim Wright for Smashing Magazine, 2009. | Permalink | 37 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: animation, behavioral, CSS
My Website Design Was Stolen! Now What?
    |
Designers spend hours perfecting websites, whether their own or their clients’. When you’ve invested anywhere from a few days to months in a website, the last thing you want is for someone else to steal the design without even giving you proper credit (or compensation). And if you’re a template or theme designer, it’s an even bigger problem. After all, if your templates are available online for free, a lot of people won’t bother paying for them.
So what can you do if you’ve discovered that one of your designs has been ripped off? What should you do? Read on for a complete guide to steps you can take to protect your intellectual property.
I am not a lawyer, nor do I pretend to be one on TV, so the advice here should not be taken as legal advice. Before taking any of the actions mentioned below, check with a lawyer or other legal expert to see what is allowable in your state or country or to see if additional options are available to you.
1. Why People Steal Designs
Not everyone who steals a design is out to rip you off. There are a variety of reasons; one of the most common is that many people just don’t understand that stealing someone else’s design is illegal and unethical. Of course, if you’re selling templates or themes, that probably isn’t the case, but if a one-off design of yours has been stolen, it’s always a possibility.
The myth persists that if content is put online, it’s fair game. Others think that if a copyright isn’t explicitly stated, then it doesn’t exist. In either case, the person who has taken your design likely doesn’t realize that they’ve done anything wrong.
In other cases, someone might take your design because they feel it’s an excellent example of what a website in their niche should look like or because the company behind the website is a leader in the industry. These people may or may not realize that what they’re doing is wrong or at least may not realize just how wrong it is.
Some people steal designs because they can’t afford to hire a website designer but have just enough technical know-how to copy a website themselves. These people rarely suspect they’ll be caught. The same sometimes happens with people who have been hired to design a website but lack the skills to do the job. And so they copy another website, hoping their client has never seen it.
Sometimes, someone will steal the bulk of your design but change small parts and then claim they were merely inspired by the design and didn’t really steal it. Unless they completely recreated the website from scratch and made significant changes (and even then…), this isn’t a good defense, and you can still treat them as though they they stole it outright.
If you sell templates, and someone has used one of them on their website, they may not realize that this is wrong. Plenty of forums and other websites out there make templates available for anyone to download, and some make no mention that these are not licensed to be distributed in this way. So don’t jump to the conclusion that someone intentionally stole your design. Of course, the people distributing your templates are probably guilty.
I tend to give people the benefit of the doubt when it comes to intellectual property theft. If it’s happening to you for the first time, then it can be tempting to go after them with full force, but in many cases you’ll have better luck educating the offender.
2. Initial Steps
So, you’ve discovered that someone has stolen one of your designs. Whether you’ve discovered it yourself or someone has reported it to you, it can be a jarring experience. Your first reaction might be to fire off an angry email, make a comment on their website or out them publicly. But step back for a moment and think through your options.
The way you handle this situation will largely determine how satisfied you are with the resolution. If you attack the person, their immediate reaction will be to get defensive or dig in their heels and refuse to deal with you. They may even contact a lawyer to get you off their back, and that could result in expensive legal fees and even litigation for you: Not exactly what most designers want to spend their money and energy on.
Finding the Website Owner
The first place to check is the website itself. In most cases, you’ll find some kind of contact information there. If not (or you find only a contact form), you can usually find the website owner by looking up the Whois information about the domain. If the domain is privately registered, though, you may have to contact the Web host to obtain contact information. If that fails, your last option may be to use legal channels.
The First Contact
Remember, the person ripping off your design might not even know they’re doing something wrong. Your first contact is an opportunity to educate them on intellectual property rights. Don’t accuse. Let them know that the design they’re currently using is copyrighted and that unless they can prove they’ve paid for it, you’ll need them to take the website down immediately.
It’s possible that the website owner is unaware that their design is not original. If they’ve hired a less-than-reputable designer, they might have been led to believe that their design is completely original, and your email will come as quite a shock to them. Keeping your first email friendly and polite can make a huge difference in how they respond.
If You Don’t Hear Back
If you don’t hear back from the website owner after a few days, you can always contact their ISP to request that it take the website down. If you can provide proof that the design is yours and that they aren’t licensed to use it, many ISPs will suspend the website to avoid being sucked into litigation should you decide to sue.
Issue a DMCA Take-Down Notice
This only applies in the United States, but the Digital Millennium Copyright Act has provisions for dealing with intellectual property theft online. You can get a template of the formal notice, fill it out and send it to the website’s host. Most hosts will immediately comply, to protect themselves from litigation.
Call Them Out Publicly
If you’re 100% positive that the person has copied your website intentionally, and they aren’t responding to your requests to take it down, you could call them out publicly on your blog, in a forum or on another website.
This is riskier, though. First of all, they could sue you for libel. Whether they’d win or not is irrelevant: fighting a lawsuit is almost always expensive and time-consuming. They don’t have to be right to file a lawsuit; so even if everything you say is true and accurate, nothing is stopping them from following that course.
But this kind of action has its upsides. If your blog has a lot of readers or the forum has a lot of followers, you might get others to join your cause and act on your behalf to get the offending website taken down. The offender might relent, not wanting the negative publicity. But again, weigh the pros and cons carefully, and take this step cautiously.
Document Everything!
Document any actions you take regarding the theft. Note when you discovered the offending site, when you contacted the owner and whether they responded. This will help if you end up having to take further action.
3. Getting Legal Help
If you still aren’t getting anywhere on your own, it might be time to contact a lawyer. A lawyer will probably begin by sending an official cease and desist letter to the offender. The letter would likely state that the design they’re using is copyrighted material and that they need to take the website down immediately or face further legal action.
In many cases, an official letter from a lawyer is enough to scare off just about anyone, and you’ll find the design is quickly changed or taken down altogether.
However, if there’s still no response, the lawyer might send a similar letter to the website’s host, demanding that the website be suspended due to copyright infringement. Hosts are usually responsive to this kind of letter, because they don’t want to be sued.
If neither action works, the next step may be a lawsuit. In many cases, though, it’s just not work the time, effort or money involved. This is when you should sit down and really think about how far you’re willing to go.
If the person who stole your design is simply using it on their own website, you probably won’t want to bother with a lawsuit. The effect on your income probably won’t be big enough to warrant this kind of action. But if the offender is redistributing your design or passing it off as their own (for example, in their portfolio), then the lawsuit might be worth it. Ask your lawyer what they think your chances of winning are and what the costs will be.
Depending on your country of residence, you may be able to get assistance from the government in taking down the design. Check with the office responsible for copyright and intellectual property rights in your country to find the proper authorities to contact.
4. Preventing Theft
You can do a number of things to prevent your designs from being stolen. Some are technical solutions, while others relate more to the front end.
Non-Technical Solutions
Simply posting a copyright notice on your website will deter many would-be offenders, especially people who don’t realize that online content is copyrighted unless specified otherwise. It might also deter people who know it is illegal but hope they won’t be caught. It shows you’re more proactive than other website owners.
Technical Solutions
One thing you can do to prevent theft of your designs is to block screenscraper apps from accessing your code. While blocking every screenscraper out there is impossible, the article “Preventing Design Theft: A Few Tricks of the Trade” has both PHP and ASP code that can help you block most of them.
Use your .htaccess file to prevent images on your website from being hotlinked, because some thieves will go so far as to link images directly from your website, rather than use their own bandwidth.
Finding Out if Your Website Has Been Ripped Off
Usually, you won’t know that your design has been stolen unless you come across it on a website (which is very unlikely) or unless someone has reported it to you (only slightly more likely). Watchdog websites are out there, but the most popular one, Pirated-Sites, was hacked and has been taken offline.
By including unique text in your footer or elsewhere in the design, you might be able to find thieves by searching for those key phrases. This is not always effective, but you might get lucky.
One other option is to use a website such as CopyScape, which looks for duplicate websites. Just enter your website’s URL and it looks for websites out there that have copied your content (and possibly your design).
5. If You Can’t Beat ’Em, Join ’Em
If you’re spending more time chasing down thieves than actually designing, you might want to consider making your designs publicly available. Releasing them under a Creative Commons license or other open-source license removes the temptation for many thieves.
Even designers who make a living selling templates could benefit from open licenses, if only in part. Selling your templates under a non-commercial Creative Commons license and then offering additional services to customers who purchase the designs directly from you (such as set-up, customization and support) can prevent others from profiting from your work (and entirely remove the temptation for many). After all, if someone can get your template for free, why would they pay someone else for it? (This is different than paying you for it, because you’re offering added benefits and services, and many people believe in compensating the original designer or artist for their work).
If nothing else, a no-derivatives license can at least help ensure that you’re getting credit for your work. As strange as it sounds, a template released under a Creative Commons license is no longer a motivation for many pirates.
Further Resources
- Design Theft: The Webmaster’s Recourse
An excellent guide from SitePoint on dealing with design theft. - Dealing With Design Theft
A fantastic article from OnWired about dealing with design theft, with practical solutions and info from their own experiences. - Fighting Design Theft
An opinion piece on design theft from BlissfullyAware. - The Design Theft Pool
A Flickr pool dedicated to calling out design thieves. - Copyright Explained: I May Copy It, Right?
In this post we’ve collected the most important facts, articles and resources related to copyright issues, law and blogging. We’ve also put together most useful tools and references you can use dealing with plagiarism.
(al)
© Cameron Chapman for Smashing Magazine, 2009. | Permalink | 97 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: copyright, stolen
Unveiling Photoshop Masks
    |
Design is a fluid and shifting process in which layers are constantly modified and tweaked. As complexity builds, so does the need for preserving data in a flexible way. Learning non-destructive editing techniques helps you produce documents that bend along with your creativity. Photoshop Masks are the cornerstone of this process. Not only do they preserve important pixel data, but they allow for the creation of flexible interface elements as well. In this article, we’ll explore the technical aspects and creative advantages of incorporating masks into your workflow.
Photoshop offers five methods of masking: Pixel Masks, Vector Masks, Quick Masks, Clipping Masks and Clipping Paths, all of which define pixel opacities without affecting the original data. Each of them has its own pros and cons, and knowing which method to use is extremely important for creating clean, flexible and properly masked layers.
Pixel Masks
Pixel masks determine opacity values based on a raster image with grayscale values that correspond pixel for pixel to the original layer. This makes them ideal for masking complex photographic imagery (e.g. the hair on a model or leaves on a tree). Pixel masks allow 100 shades of gray, which correspond directly to opacity percentages. The ability to vary opacities is unique to pixel masks, making them an invaluable tool.
Pixel Masks are ideal for extracting complex photographic imagery. (Image Source)
While pixel masks can be easily modified, they aren’t ideal for every situation. Because of their raster format, scaling them can cause unwanted artifacts and interpolated bluriness. Smooth curves and perfect edges can also be tricky to create when painting a mask. Under such circumstances, vector masks would be preferable.
Pixel masks should not be used when you might have to rescale.
Creation
Creating a pixel mask is as easy as selecting the layer or layer group and clicking the “Add Layer Mask” button at the bottom of the layer’s palette. A second thumbnail will be added to the layer, giving you a preview of the mask. By default, this will be entirely white. However, if you happen to have a selection active when creating the mask, the selection will be used to define the grayscale values of the mask.
Once a mask is created, it can be edited as if it were any other pixel data by clicking on the mask’s thumbnail. You can then paint in black to hide areas or white to show them. The mask can also be tweaked using adjustments and filters such as Curves, Threshold, Unsharp mask and Gaussian blur.
Painting the mask black is much like using the eraser tool. (Image Source)
View Modes
While creating a mask, there are a number of ways to view the mask data. Option + clicking on the thumbnail will display only the mask on the canvas; this is great for fine-tuning areas but doesn’t allow you to see the actual layer as you work. If you’d like to see both the mask and the layer at the same time, you can view the mask as a Ruby overlay. Simply press \ with the layer selected to toggle the overlay on and off. The color and opacity of the overlay can also be changed by double-clicking the mask’s thumbnail. Additionally, if you’d like to temporarily remove the mask, you can toggle it on and off by Shift + clicking on the mask’s thumbnail.
Turning the mask off and the overlay on can help with fine-tuning. (Image Source)
Channels
Every time a layer with a mask is selected, the mask is shown as a temporary alpha channel in the Channels palette. From here, you can save the channel for later use by dragging the channel to the “Create new channel” button at the bottom of the palette or by selecting “New Channel” from the fly-out menu. You can also change the mask’s Ruby overlay settings by double-clicking the channel’s thumbnail. Because a temporary channel becomes available whenever a masked layer is selected, you can use some keyboard shortcuts to toggle between the actual layer and its mask. Pressing Command + \ will select the mask and Command + 2 will bring you back to the layer data.
A temporary channel is available whenever a layer with a mask is selected.
Vector Masks
Vector masks pick up where pixel masks fall short. By defining the mask’s shape using paths, vector masks provide a superior level of finesse and flexibility. They’re ideal for defining shapes with clean, crisp lines, such as interface elements.
Vector Masks are ideal for masking crisp-edged objects. (Image Source)
The disadvantage of vector masks is that they are unable to vary pixel opacities; they are basically either 0 or 100. For this reason, many masking jobs require a hybrid implementation. By using a vector mask to define the solid edges and a pixel mask for the more complex areas or for varying opacities, you can effectively extract objects while maximizing flexibility.
Creation
To add a vector mask to an existing layer, simply Command + Click the “Add Layer Mask” button at the bottom of the layer’s palette. If a path is currently active, the mask will be created using it. Otherwise, the mask will be empty. Paths can then be added, subtracted or modified by clicking the mask’s thumbnail.
Being able to create flexible interface elements is one of the best advantages of vector masks. Using the Shape Tool (U) set to Shape Layers allows you to quickly create a fill layer with a Vector Mask. These layers are far more flexible than a raster level and are perfect for creating buttons, rules and other elements that can be resized without interpolating data.
The flexibility offered by Vector Masks make them perfect for interface elements such as buttons.
View Modes
By clicking on the Vector Mask’s thumbnail in the the Layer’s palette, you can show or hide the paths saved in the mask. These paths can also be accessed from the Path’s palette, but only if the layer itself is selected. Toggling the mask on and off can be done by Shift + clicking the thumbnail.
Paths
Much like how layer masks appear in the Channels palette, a temporary work path would be displayed in the Paths palette when a layer with a vector mask is selected. You can then save the mask by dragging it to the “Create new path” button at the bottom of the palette or selecting “Save Path” from the fly-out menu. This temporary path can be accessed at any time by first selecting the Path Selection tool (A) and then pressing Enter; it can be dismissed by pressing Enter again. You can also quickly create a selection from an active path by pressing Command + Enter.
Applying
Before a vector mask can be applied to a layer it must first be rasterized by right-clicking the vector mask thumbnail and choosing Rasterize Vector Mask. If the layer already has a pixel mask, the two masks will be composited together to create a single pixel mask. It can then be applied like any other layer mask (right-clicking the thumbnail and choosing “Apply Layer Mask”).
Quick Masks
The Quick Mask mode allows you to create a selection using pixel editing tools as opposed to the primitive selection tools. This is a more logical approach to creating a complex mask with variable opacity. You can access this mode by clicking on the “Quick Mask” button in the Tools bar or by pressing Q.
Once in Quick Mask mode, you’ll no longer be editing the current layer. Instead, you’ll be editing a Ruby overlay that can be edited as if it were regular pixel data. By default, entering this mode will cover the entire canvas with a semi-transparent red color. You can then paint white to remove the overlay and black to add it back. The Quick Mask is essentially a more visual representation of a selection. Therefore, every area that you remove from the overlay is added to the selection.
Quick Mask mode allows you to quickly paint a selection. (Image Source)
Options
You can modify how the Quick Mask mode is displayed by double-clicking the “Quick Mask” button in the Tools bar. Here you can change the color and opacity of the mask as well as whether the mask color indicates masked areas or selected areas. Personally, I find painting selected areas more intuitive than painting masked areas, which is the default.
The Quick Mask Options menu allows you to change the color, opacity and target of the overlay.
Saving
After creating a quick mask, you can immediately apply it to a layer by creating a layer mask or save it for later use. By selecting Selection → Save Selection, you can save your selection as a new channel or apply it to an existing channel. This allows you to come back to the selection at any time by Control + clicking the channel in the Channel’s palette or by selecting Selection → Load Selection
Saving a Quick Mask creates a new channel.
Clipping Masks
You’ll often run into situations in which multiple layers require the same mask. You could group the layers and mask the layer group, but that is not always ideal. Clipping masks allows for a layer simply to adopt the opacity of an underlying layer. This is extremely helpful when using adjustment layers; by clipping them to a layer, you can apply adjustments to a single layer without affecting those below it.
The easiest way to create a clipping mask is to Option + click between the two layers in the Layer’s palette when the clipping mask cursor appears. Alternatively, you could press Command + Option + G to clip a layer to the one below it. Any number of layers can be clipped to one master layer, but a clipped layer can’t be used as a clipping mask itself.
Clipping Masks are great for constraining Adjustment Layers. (Image Source)
Clipping Paths
Clipping Paths are a lot like Vector Masks except that they apply to an entire document rather than a layer or layer group. They are primarily used by print designers to specify uniquely shaped objects that are imported into a page layout program. The path is imported along with the image to ensure a crisp clean edge.
To create a clipping path, first be sure that you have a path saved; having a temporary Work Path does not suffice. You must select “Save Path” from the fly-out menu in the Paths palette if your path is not saved. Then, from the fly-out menu, choose “Clipping Path.” Your document’s appearance will not change, but if you were to import the document into Illustrator using the Place command, it would be clipped to the path.
Masks Palette
The Masks palette, introduced in CS4, adds some useful features to help with creating and refining both pixel and vector masks. For the first time, you can feather a mask and change its density without losing the original mask.
The Masks palette was a great addition to Photoshop CS4.
Create/View Buttons
At the top of the palette are two buttons that can be used to select the layer mask or vector mask or to create one if one doesn’t exist.
Density
The density slider basically controls how strong the mask is. At 100%, fully masked areas will be completely transparent. When density is set to 50%, those same areas would be only 50% transparent.
The Density slider controls the strength of the mask. (Image Source)
Feather
Feathering the edges of a mask used to require applying a Gaussian Blur, which would destroy the original mask shape. With the Masks palette you can now change the amount of feathering at any time while maintaining the original mask data.
With the Feather slider, you can now change the mask’s softness on the fly. (Image Source)
Mask Edge
The Mask Edge menu provides some long-desired features that aid in refining a mask’s perimeter. They come in extremely handy when the extracted object is still picking up color from the masked background.
Radius
The Radius setting is similar to feathering, but it retains some of the edge’s crispness. This can be helpful with reducing awkward or overly sharp edges on complex shapes.
Contrast
Contrast simply modifies the contrast of edge elements, which helps crispen any soft edges. Using this in conjunction with Radius can help remove unwanted artifacts in the mask.
Radius and Contrast can be used to remove unwanted artifacts. (Image Source)
Smooth
Smooth simplifies the complexity of the mask’s edges. This can be useful if you’ve painted the mask by hand and need to quickly clean up some rough edges.
Feather
This feather command is nearly identical to the Mask palette’s primary feather command, but it restricts the blur more to the edge of the mask. The difference is slight yet noticeable.
Contract/Expand
The Contract and Expand slider allows you to grow and shrink the edges of the mask. This is extremely useful for reducing unwanted color fringes.
Smooth and Contract helps tighten up masks to reduce color fringes. (Image Source)
Preview Mode
At the bottom of the palette are five different preview modes that allow you to view the mask as a (1) selection with marching ants, (2) quick mask ruby overlay, (3) black matte, (4) white matte or (5) grayscale mask.
Check the mask in different views to ensure its quality. (Image Source)
Color Range
The Color Range menu is one of the most powerful ways to extract an image from an evenly colored background. With only a few clicks and adjustments, even the most complex object can be cleanly masked. For further details, see the “Techniques” section just below.
Techniques
Each masking job is unique and requires a different method of creation and refinement. However, some common techniques can drastically improve the efficiency and maximize the flexibility of your masks.
Color Range
When your masking task requires an object to be extracted from an evenly colored background (much like the video editing process of Chroma keying), the quickest means is often the Color Range command. First, use the Eyedropper Tool to select the primary color of the background. Then, you can use the “Add to sample” and “Remove from sample” tools to refine the color selection. The fuzziness slider lets you broaden the range of colors selected. If the color data is there to support it, this process makes short work of an otherwise tedious task.
The Eyedropper tools allow you to easily select the sky in the photo.
Color Range can make quick work of complex masks. (Image Source)
Channels
A mask is often hiding in one of the layer’s channels, just waiting to be unlocked. Depending on the image you’re using, you may be able to find a channel with strong contrast between the target object and its surroundings. You may even want to try temporarily changing the color mode to Lab or CMYK to provide alternative channel options. Once you find a channel with a strong enough contrast, Command + click it to create a selection. Then, apply the selection as a layer mask. You’ll then be able to tweak it as you would any other mask.
As the image below demonstrates, simply selecting a channel is not always sufficient for a clean mask. You may need to do some mixing with other channels.
- The original image has strong vibrant colors, making it a great opportunity to create a mask using channels.
- The red channel has the foreground-to-background contrast, so we’ll start there. We’ve copied and pasted it onto a new layer and then inverted it.
- The green cup is still very prominent, so we’ve converted the blue channel to a layer and will use it to negate the green and red cups.
- By setting the Blending Mode on the blue channel’s layer to Multiply, we can effectively erase any extraneous white areas.
- The two layers are then flattened and applied as a layer mask to the original image. This leaves us with a cleanly masked blue mug.
Pixel/Vector Hybrid
Objects will quite often have a combination of sharp edges and soft feathered edges. In instances like these, using both a pixel and a vector mask may be best. One common example of this is extracting a figure. You can use the pen tool to draw all of the smooth edges along the figure’s body and then use a pixel mask to paint in the fine details such as hair.
Multiple Masks
There may be times when you want to apply more than one mask to a layer. You could choose to apply the mask by right-clicking the layer and selecting Apply Layer Mask, after which you could apply a new mask. This, however, is not ideal because the data behind the mask will be lost.
A far better method is to create a Smart Object from the layer and mask the new layer. This allows you to apply two masks to one layer without losing data. In fact, if needed, you could repeat this process over and over.
Converting a layer to a Smart Object allows you to add multiple masks without losing data.
Layer Styles
If you have ever added a mask to a layer with layer styles, things may have gotten messy, especially if the mask had soft edges or varying opacities. This is because, by default, Photoshop uses a composite of the layer’s opacity along with any masks on it to define the area used by the layer styles. This is desirable but can also be a nuisance. To counter the default behavior, open the Blending Options menu for the layer, and apply either “Layer Mask Hides Effects” or “Vector Mask Hides Effects.”
Messes can often be tidied by using the “Layer Mask Hides Effects” option.
Blend Clipped Layers as Group
By default, Photoshop assumes that all layers in a clipping stack should be blended with the base layer before the base layer is blended with the layers below it. This makes sense sometimes, but other times you may need the clipped layers to adopt the shape of the base layer but not the blend mode. To prevent this behavior, open the Blending Options menu for the base layer (right-click the layer and choose “Blending Options”), and uncheck the “Blend Clipped Layers as Group” option. Now, each of the clipped layers will blend with underlying layers as if they weren’t clipped.
The “Blend Clipped Layers as Group” causes all clipped layers to blend together first and then blend with underlying layers using the base layer’s Blend Mode.
Type Masks
Grouped with the Type tool in the Tools bar is the deceptively named Type Mask tool. It allows you to create type just like the regular type tool; but once committed, the type is converted to a selection. This selection can be converted to a layer mask but will no longer be editable. This is not ideal. If editability is important, you may want to create a regular type layer and use it as the base of a clipping mask. This is the only way to mask objects to the shape of type without losing the ability to edit the text. Perhaps someday Photoshop will let us create an editable Type Mask for a layer.
Removing Edge Fringes
Even after using the “Refine Edge” command in the Masks palette, you may find random color fringes left along the edge of your mask. This is where some manual brushwork comes in handy. The Paintbrush tool can be used here, but I recommend the Healing Brush, Stamp Tool or Smudge Tool because they will blend better with the subject.
First, create a new layer and clip it to the masked layer. Then, set your tool of choice to sample all layers. You can now select your sample area and paint the fringes out; the original layer data will be preserved. Often, changing the brush’s Blend Mode will help preserve the detail of the layer.
Color Fringes can usually be smudged or painted away on a clipped layer. (Image Source)
Keyboard Shortcuts
- \
View Layer Mask as an overlay - Command + \
Set layer focus to Layer Mask - Command + 2
Set layer focus to layer data - Command + Option + \
Create selection from Layer Mask - Command + Option + G
Make/Release Clipping Mask - A, then Enter
Activate/Dismiss Vector Mask - Command + Enter
Create selection from active vector mask - Command + Click Mask Thumbnail
Create selection from mask - Command + Option + Click Mask Thumbnail
Subtract mask from selection - Command + Option + Shift + Click Mask Thumbnail
Intersect mask from selection - Q
Toggle Quick Mask mode
Inside the Color Range Menu
- Option
Toggle the Reset button and the “Subtract from Sample” tool - Command
Toggle between the Selection view and Image view - Shift
Toggle the “Add to Sample” tool
Further Reading
- Nesting Smart Objects for Multi-Mask Effects in Photoshop
- Using Masks to Improve Landscape Images
- Photoshop Masking and Compositing
- Masking a Tree
- Seamless Compositing
- Fluid Mask, by Vertus
- Selecting and Extracting Hair
- Mastering Photoshop With Paths
(al)
© Thomas Giannattasio for Smashing Magazine, 2009. | Permalink | 39 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: masks, photoshop
Subscribe to RSS
Follow Us
