Archive for the ‘Photoshop’ Category

Leveraging Twitter for Your Freelance Business

Social media applications such as Twitter can be effectively utilized as a tool for freelancers like yourself to promote your services. In a time when the world is connected through the internet, failing to employ such a simple strategy to connect with your potential and existing clients is a waste of opportunity. Remember that you are promoting to the rest of the world each time you post something in Twitter.

twitter blue bird Leveraging Twitter for Your Freelance Business
(Image source: Fotolia)

The content then, is what matters. You can update your existing clients on your latest projects and network with freelancers like yourself. In your Twitter, you may link your followers to your professional blog where they can further explore your work and even better, re-tweet it to their own network. All these can bring you more business in the long run as these people go on to recommend you to potential clients.

Here are five possible ways to make good use of Twitter for your freelance business:

1. Connect with Relevant People

As you would probably agree with me, social networking platforms like Twitter and Facebook have definitely facilitated our access to such opportunities to exchange knowledge and insights to an unprecedented level. To effectively utilize such access, you must first connect with the right people to obtain valuable information from. For instance, following the tweets of designers would update you with some of their latest work, from which you may find inspirations or ideas for your own design.

Besides, there will always be things you can modify and improve about your business, be it the design of your work, marketing strategy or even the capacity of your web server. Twitter, being a great tool to network with people of the same field, is your key to refining your business. This is because freelancers like you are now able to share tips and critique each other’s work and approach. Such online relationships, although casual, can do wonders for you by widening your perspective on how things can be done.

2. Draw People to Your Blog

Twittering is a good way to inform your followers on any updates to your portfolio blog. However, the benefit of using Twitter goes beyond the purpose of simple notifications. Each time your followers get informed about your latest work or design, they may also send out a Tweet after checking out your site. This is especially when your work shows extraordinariness and your followers want to comment and compliment about it.

shouting bluebird Leveraging Twitter for Your Freelance Business
(Image source: Fotolia)

Through a networking apparatus like Twitter, your blog gets promoted exponentially. This way, your blog, along with your awesome work, gets free publicity to more prospective clients. Also, supposing you have set up a Twitter account solely for your freelance business(which is advisable), then those who follow your Twitter are likely to be those relevant people you want to associate with your business. Once these people tweet or re-tweet about it, their followers are also the target audience you would want to promote your business to. In this manner, your blog is advertised freely and specifically to those that matters.

3. Find Prospective Clients

A major component of Twitter is its search function that enables users to search for other users to follow. There, you can search for specific topic or interest and get a list of Twitter accounts for your consideration to follow. If you are looking for prospective clients, then this is great tool for yourself to get acquainted and develop a professional network with other freelancers or potential clients. Strike a conversation by replying to their tweets. It works the other way round as well. Having a Twitter account yourself, people are able to search for you and request to follow your tweets.

Don’t be surprised to receive messages requesting for your freelance services. They might have come across your tweets after combing through potential freelancers on Twitter, saw your work on your site and got impressed. Either that or they might have seen some random tweets of users who were following you and subsequently check out your blog.

In any case, such bi-directional search between yourself and other potential employers would no doubt open up doors to more opportunities.

4. Establish Your Brand

Once you have a decent number of followers, it becomes a must to update them on your latest work so that they get constant reminder of your business. Focus on your specialty from the various services you provide and your followers will know what to expect from your updates. If, for instance, you’re a freelance web designer who is an expert in doing up creative typography for sites, then perhaps you can emphasize on the font design of your latest works in your tweets.

At the end of the day, it’s all about creating that association between what your business does best and your business brand. Once people can tie your brand to your brand’s selling point (in this case, the typography of web design), then you have established your brand well. As your followers consist of existing clients and potential ones as well, it is crucial to build a good reputation for your business and let the good words get spread throughout the entire network.

5. Be the Expert

If you want to get more referrals to clients through the internet, you need to build a name for yourself. To do that, post insightful updates to your Twitter and give your audience what they want to know. Providing meaningful comments on other’s work as well as your own will impress upon your audience that you’re passionate and serious about what you do. Besides, sharing your thoughts about designs is the first step to getting priceless feedback from other freelancers.

twitter bird singing Leveraging Twitter for Your Freelance Business
(Image source: Fotolia)

Not all of us will eventually be considered as experts simply by giving our personal takes on designs and such. But if you managed to get there, your personal work will be taken more seriously. Your followers would be more likely to tweet the work of someone who is deem as the expert or the leader of the field. The end result is that you’ve earned yourself a good reputation, and that’s great because more people will hear of your work. This includes potential clients for your business.

1 Year Hosting Giveaway From Zyma one of the fastest growing hosting companies in the UK have partnered with hv-­? to give-­?away 5 lucky winners a web hosting account completely FREE for one whole year! Zyma’s customer base covers over 80 different countries in four different continents, and their unlimited web hosting package is one of the most comprehensive around. This is a give-­?away you simply don’t want to miss.

Hosting Account Features:

• Unlimited Web space
• Unlimited Traffic
• Unlimited Email Accounts
• Unlimited SQL Databases
• Unlimited FTP Accounts
• 99.9% Uptime Guarantee
• Free CDN Service
• Free Google Vouchers
• Free Transfer & Setup
• Free Tech Support
• cPanel Web Hosting
• Fantastico De Luxe
• Softaculous Premium
• Attracta SEO tools via cPanel

How To Enter

Entering the contest is incredibly easy. All you have to do is post a comment explaining why you want to win the hosting account and what you would use it for.  Of course the winner’s will be announced here and on Twitter, so your best bet would be to follow us on twitter and like us on facebook as well.

You can also follow us on Twitter and tweet out, “I just entered @hvdesigns hosting giveaway! You should enter to: ” and receive another entry to the contest.

Your third and final entry can come from liking us on Facebook and posting on our wall about your favorite tutorial.

The contest will run from 2/10/2012 to 2/17/2012, with winners being announced on 2/20/2012.

Showcase of Dieselpunk Artworks

So by this point most of us are familiar with the steampunk aesthetic. But how many people out there know about dieselpunk? Dieselpunk style is similar to steampunk, but there are distinct differences. While steampunk focuses on Victorian-age sci-fi, dieselpunk is based on the style and technology of the early 20th century, from World War I through World War II. The “punk” suffix on the word indicates its counter-cultural influence in regard to its opposition to historically-accurate and contemporary aesthetics. It’s similar in many ways to the noir styles of the time, though isn’t necessarily as dark.

dieselpunk art Showcase of Dieselpunk Artworks

The term “dieselpunk” was coined in 2001 by game designer Lewis Pollak to describe the style of his role-playing game Children of the Sun, but it has since grown to encompass the style of a number of mediums, including art, music, movies, fiction, and more. There are two basic styles of dieselpunk, one based on the roaring twenties with a mostly positive view of technology and culture, and the other based on World War II with a much darker style and often based on widespread warfare.

Below are more than 50 awesome dieselpunk artworks to give you a taste of what dieselpunk is all about!

Dieselpunk Cars (Image Source: RyanLovelock)

Dieselpunk Cars by RyanLove Showcase of Dieselpunk Artworks

KIEV Dieselpunk Hovercraft (Image Source: Lipatov)

kiev dieselpunk hovercraft  Showcase of Dieselpunk Artworks

Dieselpunk Hovercraft (Image Source: Lipatov)

Dieselpunk hovercraft by Li Showcase of Dieselpunk Artworks

Arrival in Utopia (Image Source: Lipatov)

Arrival in Utopia by Lipato Showcase of Dieselpunk Artworks

DeiselPunk Gall (Image Source: Kaaskop)

DieselPunk Gall by kaaskop Showcase of Dieselpunk Artworks

Dieselpunk Robot (Image Source: Chaingunchimp)

dieselpunk robot by chaingu Showcase of Dieselpunk Artworks

Dieselpunk (Image Source: Sedeptra)

dieselpunk by sedeptra Showcase of Dieselpunk Artworks

Dieselpunk Girl (Image Source: Vadich)

dieselpunk girl by vadich d Showcase of Dieselpunk Artworks

Desert Sands (Image Source: Mykeamend)

Desert Sands by mykeamend Showcase of Dieselpunk Artworks

Soldier (Image Source: Beaver-Skin)

Soldier by Beaver Skin Showcase of Dieselpunk Artworks

Gwen in Her Hepmobile Rocket (Image Source: BWS)

hepmobilerocket Showcase of Dieselpunk Artworks

The Widowmaker (Image Source: Davincisghost)

The Widow Maker by davincis Showcase of Dieselpunk Artworks

090509 – Dispute (Image Source: 600v)

090509   dispute by 600v Showcase of Dieselpunk Artworks

Claudia (Image Source: Lipatov)

claudia by lipatov d34xn0r Showcase of Dieselpunk Artworks

Red Baroness (Image Source: LadyDeuce)

redbaronness Showcase of Dieselpunk Artworks

Mobilzitadelle “Franz-Josef I” (Image Source: JanBoruta)

Mobilzitadelle   Franz Jose Showcase of Dieselpunk Artworks

The City of Tomorrow (Image Source: BWS)

cityoftomorrow Showcase of Dieselpunk Artworks

Rush Hour (Image Source: Malaveldt)

rush hour by malaveldt d3b3 Showcase of Dieselpunk Artworks

250409 – BB2 3-4 (Image Source: 600v)

250409   BB2 3 4 by 600v Showcase of Dieselpunk Artworks

290809 – NFZ T1 v2 (Image Source: 600v)

290809   NFZ T1 v2 by 600v Showcase of Dieselpunk Artworks

210609 – NFZ A2 (Image Source: 600v)

210609   NFZ A2 by 600v Showcase of Dieselpunk Artworks

Ironclas (Image Source: MurderousAtomaton)

ironclad by murderousautoma Showcase of Dieselpunk Artworks

Let’s Have Another Cup… (Image Source: BWS)

letshaveanothercup Showcase of Dieselpunk Artworks

Aviatrix (Image Source: Conceptbloke)

Aviatrix by Conceptbloke Showcase of Dieselpunk Artworks

Calling the Space Patrol (Image Source: BWS)

callingthespacepatrol Showcase of Dieselpunk Artworks

GateHouse Gazette 10 Cover (Image Source: mykeamend)

GateHouse Gazette 10 Cover  Showcase of Dieselpunk Artworks

Eurocentric Liner (Image Source: Stefanparis)

Eurocentric Liner by stefan Showcase of Dieselpunk Artworks

Diesel City3 (Image Source: Stefanparis)

Diesel City3 by stefanparis Showcase of Dieselpunk Artworks

Retro-Futurism Poster Project (Image Source: Inochi-zero.)

retro futurism poster proje Showcase of Dieselpunk Artworks

Wheel of Fortune (Image Source: Mykeamend)

Wheel of Fortune by mykeame Showcase of Dieselpunk Artworks

Fasten Your Seat Belt (Image Source: Stefanparis)

Fasten Your Seat Belt by st Showcase of Dieselpunk Artworks

At Your Usual Dealer (Image Source: Stefanparis)

At Your Usual Dealer by ste Showcase of Dieselpunk Artworks

Twentieth Century (Image Source: Stefanparis)

Twentieth Century by stefan Showcase of Dieselpunk Artworks

The Iron Baker (Image Source: Kallini)

the iron baker by kallini d Showcase of Dieselpunk Artworks

Freedom in the Clouds (Image Source: ViaruTarkin)

Freedom in the Clouds by Vi Showcase of Dieselpunk Artworks

Pegasus IV (Image Source: Stefanparis)

Pegasus IV by stefanparis Showcase of Dieselpunk Artworks

Panzerarmee “Radetzky” (Image Source: JanBoruta)

Panzerarmee   Radetzky   by Showcase of Dieselpunk Artworks

Grenadier (Image Source: Vkucukemre)

Grenadier by vkucukemre Showcase of Dieselpunk Artworks

Space Spy (Image Source: Innovari)

space spy by innovari d46pi Showcase of Dieselpunk Artworks

Dieselpunk Airships (Image Source: Tome Wilson)

dieselpunkairships Showcase of Dieselpunk Artworks

Coding Kung-fu: 35 Graphics Built Purely With CSS3

Look at the graphics below, awesome Photoshop works right? Nah, they’re created by CSS3. Yes, they’re completely “drawn” by CSS3! When we have seen enough CSS3 animations we thought those are all CSS3 can do as a potential Flash killer, but we’re wrong. Developers perhaps don’t satisfy with the fun of animation, so again, they push the boundaries of CSS3 to challenge the graphic editor’s realm.

css3 graphics Coding Kung fu: 35 Graphics Built Purely With CSS3

With this post comes 35 carefully crafted CSS3 graphics which even include something you wouldn’t relate with CSS3 like Apple iPhone, cartoon character Doraemon, and more surprises! Heck, some of them even come with detailed tutorial that teach you how to achieve it! So don’t miss the great chance to learn to create graphic using CSS3 and little bit of HTML, let’s get naughty with CSS3!

You are strongly recommended to view these demos using the latest version of Safari or Developer version of Google Chrome. Most demos support the latest version of Firefox and Google Chrome, though.

RSS Feed Icon

RSS Feed Icon built with CSS3, exclusively from Hongkiat! Along with the link comes a tutorial which you can actually learn to “draw” the RSS Feed icon without using even a single image. Create the CSS3 miracle with your own hands!

rss feed icon Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple iMac

Yeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3.

apple imac Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple Keyboard

It’s Apple Keyboard built with CSS3! Heck, the keyboard buttons can even be pressed.

apple keyboard Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple iPhone

Oh, one more thing: iPhoneCSS3.

apple iphone Coding Kung fu: 35 Graphics Built Purely With CSS3

Cherry Blossom

The real awesomeness of CSS3 is that it can be used to build anything including plants and animals!

cherry blossom Coding Kung fu: 35 Graphics Built Purely With CSS3

Coffee Cup

A tiring day? Let’s have a CSS3 coffee, best served with Safari/Google Chrome.

coffee cup Coding Kung fu: 35 Graphics Built Purely With CSS3


This Doraemon is famous for CSS3 compatibility testing. Try it in Internet Explorer 8 or below and have a nice day.

doraemon Coding Kung fu: 35 Graphics Built Purely With CSS3


Now you are looking at a cat built completely with code! Too bad the CSS3 can’t generate sound effects, at least for now.

meowww Coding Kung fu: 35 Graphics Built Purely With CSS3

Mushroom, Triforce, Poké ball, Kirby

“Being a nerd, I’ve made some nerdy creations – a Mario mushroom, the Triforce, a Pokéball, and Kirby. For those that use dinosaur browsers, there’s a screenshot of what it’s supposed to look like.”

musroom triforce pokeball kirby Coding Kung fu: 35 Graphics Built Purely With CSS3

Nyan Cat

“It contains 81 DOM elements, 688 lines of pure CSS and one JavaScript function for
looping audio. My CSS fails CSSLint test and I’m really proud of this.”

nyan cat Coding Kung fu: 35 Graphics Built Purely With CSS3


The CSS3 is so great that it can also be used to build fundamental asset for web design, such as these patterns.

patterns Coding Kung fu: 35 Graphics Built Purely With CSS3


BonBon are sweet CSS3 buttons created with a goal in mind: sexy looking, really flexible buttons with the most minimalistic markup as possible.

bonbon button Coding Kung fu: 35 Graphics Built Purely With CSS3

iOS Icons

Amazing? Yes. These icons are built by rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms, with the help of certain tools such as westciv’s tools and Border Radius.

ios icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Social Media Icons

That’s impossible for web developer to not build social media icons if they can build iPhone and Doraemon with CSS3. And they built these icons really well.

social media icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Social Media Icons

Another set of social media icons that show the possibilities of the CSS3 in creating usable icons.

social media icons 2 Coding Kung fu: 35 Graphics Built Purely With CSS3


“Peculiar is a free icon package made only in CSS. It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all.”

peculiar Coding Kung fu: 35 Graphics Built Purely With CSS3

GUI Icons

84 simple GUI icons using just CSS and semantic HTML. This is still considered as “non-production ready” icons, but they look very promising.

gui icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Steve Jobs

Steve Jobs is not only the icon of the digital age, but also the leader who greatly promotes HTML5.

steve jobs Coding Kung fu: 35 Graphics Built Purely With CSS3

Twitter Fail Whale

The Twitter fail whale will not fail to surprise you, except in Internet Explorer 8 or below.

twitter fail whale Coding Kung fu: 35 Graphics Built Purely With CSS3


User Interface elements made possible with CSS3, and it looks really sleek!

umbrui Coding Kung fu: 35 Graphics Built Purely With CSS3

Adobe Photoshop Logo

A tribute to Photoshop without using Photoshop.

adobe photoshop logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Android Logo

The Android is made of fairly simple shapes, but it explains the advantage of CSS3: you can make simple stuff and modify it any way you want by using just code but not Photoshop.

android logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple Logo

Retro Apple logo presented using CSS3, still as awesome as the time it was created.

apple logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Atari Logo

Years before, who would have thought the Atari logo will be re-created using CSS3.

atari logo Coding Kung fu: 35 Graphics Built Purely With CSS3

BP Logo

Simple logo can be made easily with CSS3. The best thing with some of these logos showcased here are there are code provided for you to try out!

bp logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Dribbble Logo

Famous user-powered showcase site Dribbble’s logo showcased using CSS3.

dribbble logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Magento Logo

Magento’s logo is not too hard to draw but the outcome looks professional.

magento logo Coding Kung fu: 35 Graphics Built Purely With CSS3

McDonald Logo

I’m lovin’ CSS3!

mcdonald logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Twitter Bird

Perfect proportion, hat tip to the creator.

twitter bird Coding Kung fu: 35 Graphics Built Purely With CSS3

Windows Logo

Windows logo! Looks really awesome, and it’s easy to create!

windows logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Internet Explorer Logo

Really great creation! It works in major browsers except Internet Explorer 8 or below.

internet explorer logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Google Chrome Logo

I’m not sure you love the new logo of Google Chrome or not, but this CSS3 Google Chrome logo looks awesome!

google chrome logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Opera Logo

Now a practice for you: what are the differences between this CSS3 piece and the real deal?

opera logo Coding Kung fu: 35 Graphics Built Purely With CSS3

HTML5 Logo

HTML5 can’t shine without CSS3!

html5 logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Volkswagen Logo

Except the color scheme, this CSS3 clone looks identical to the original one.

volkswagen logo Coding Kung fu: 35 Graphics Built Purely With CSS3


With the boom of the logos and graphics made of pure CSS3 come the discussions which greatly debate about the usability of the CSS3-produced graphics in the real world production environment.

Generally the CSS3 graphic is fine, but it might get annoying especially when you need to alter the design or simply resize the graphic, also the biggest pain here is the technology is not yet fully supported by certain browsers like Internet Explorer.

What do you think? Will you use the graphic made with CSS3 in your site? Do you have any solution for its current drawbacks? Let us know your thought, and do share with us if you just baked a CSS3 graphic!


Willing to actually do something with CSS3? You’ve come to the right place! Below are guides and tutorials written to aid you greatly on your road to mastering the CSS3.