Graphic and Web Design Blog -Resources And Tutorials

60 Trendy Web Design Interfaces Created In October

Dainis Graveris — Mon, 09 Nov 2009 13:03:08 +0000

I am continuing this monthly feature, showing last month best web designs submitted in DeviantArt. I am keeping to be very active member in this community and I really admire high quality designs submitted every day,every week, every month. Here you will see featured 60 best web design interfaces in my opinion! Check also artist Deviantpages to get even more, I get there endless inspiration, only problem is – I haven’t got endless time! Enjoy and create your own amazing design today!

You can visit previous September and August Deviantart web design features as well.

1. WPmonk Wordpress theme by sinthux

Check also homepage of this site – design is really excellent and one of the best I have seen.

2. Portfolio redesign by dioxyzone

3 main colors used in design, usually it’s hard to unite so many, but this design definitely show very good example, how to do it.

3. ShirtShift by AlxDesign

It’s amazing how grunge type design can be created in very stylish way.

4. Tivicik by SencerBugrahan

5. GrungePress by AlxDesign

6. Piratebloggers by SneakyOne1990

I saw all development process to this design – I really admire and love this beautiful outcome.

7. Edge v.1.1 by AlxDesign

Really excellent blog design with subtle colors.

8. Simplicity by AlxDesign

9. Warex by SencerBugrahan

10. Teacher Board III by SencerBugrahan

11. AVG-HHBlog by AntoniaVG

12. Web Hosting by BboyWicked

13. Osae by osec

14. AudioTech by DouglasEltz

15. Portfolio J4F 4 Sale by xXxadO

16. Royal Mag by AlxDesign

17. Touch of Purple Portfolio by deadlinesdesign

18. XS studios by versesdesign

19. Guifx – Services Page by SmarTramS

20. PH Designs concept 2 by SneakyOne1990

21. Europhia by alighandour

22. Pieza by badboythemer

23. Salleedesign v1 by LeMex

24. Fire Clandesign by elemeNt-XY

25. Design-Solution.pl – online by PanthereNoire92

26. CoffeeCup by Pilej

27. Coffee blog by Pilej

28. Eastern Drilling Services by Nas-wd

29. My new blog by miko434

30. Old Folio by inspiredMark

31. Cartoon Max by gdnz

32. Studio Portfolio by luxxxoR

33. Upcoming-Pixelzeesh by pixelzeesh

34. My Diabitic Clinic by Nas-wd

35. Interactiv by yehsper

36. Water Design Portfolio by waterdesign

37. Ready Made Designs v2.2 by bassmansgz

38. Alex Raschi rally driver web by luqa

39. Webee by zee7

40. New Folio Site by inspiredMark

41. BVD WP Theme by bestofthemeforest

42. Financial webdesign by SneakyOne1990

43. Vox blog design by C4br4×1z

44. Panoetic – Web Layout by detrans

45. Myportfolio.com by koenigpersoenlich

46. Tango Folio V2 by asherzgfx

47. iLyrics.com by proviewz

48. My folio 02 by aadi-f

49. Receptenboek by CyXo

50. Harbi haber by gdnz

51. SvenGraph.net v2 by Svengraph

52. VUE Technologies by LOUDAMedia

53. SOLVERE s.r.o. by ArtMark

54. Cloudblack WP by gdnz

55. Charitwy by velcgartist

56. Cooling Systems by Frozz

57. AutoWebber by Laurie-J

58. Portfolio design by mynameisfredrik

59. Atomia by shizm

60. Browsergametipps.com by fERs

How To Create Great Typographic Wallpaper In Photoshop

Daniels Mekšs — Sun, 08 Nov 2009 11:51:41 +0000

This tutorial will lead teach you how to create really interesting and unique typographic wallpaper in few easy steps. Really even beginner will be able to recreate this effect, add their own style and thought in it, I am sure you will enjoy and learn a lot from this tutorial! You will learn how to create good looking background, add lightning effects and work with fonts, sizes, colors to make just necessary places stand out! Let’s get started!

Step 1 – Creating background

First open blank document with size 1920×1200 pixels. Fill the background with color #242424. Duplicate the background layer and name it Film grain. Then go to Filter – Artistic – Film Grain. Apply settings shown below.

Set layers opacity to 50%. So far your wallpaper should look like this.

Step 2 – Lightning

Create a new layer and name it Lightning. Then select Radial Gradient Tool with black and white color.

Draw the gradient as shown below.

Set layer to Overlay and opacity to 55%. You should have something like this.

Step 3 – Adding Brushes

Download Adys grunge brushes, create new layer and brush around little bit. Set layers opacity to 15%. Download Concrete texture, place it in your document and set it to Overlay and opacity to 10%.

Step 4 – Creating Main Text

Download BEBAS font, create a new layer and type your text. I chose 350 pt size with smooth mode. Color really doesn’t matter. Name layer PEACE.

Step 5 – Add Background Text – Important Step

Lower your text opacity to around 15%. Create a new group (Layer – New – Group) and name it Words. Create new type layers in this group and start typing. Try to use different fonts and sizes. Try to avoid large spaces between words. Fonts I used:

Arial
Cambria
Candara
Impact
Tahoma
Times New Roman
Verdana
And little bit more default fonts
Some free fonts from dafont, Colaborate, Extravaganzza

Step 6 – Creating effect

When you’re done duplicate your words group (Layer – Duplicate Group) and merge it (Ctrl+E). Make invisible your unmerged words group. Find your large text layer (in my case it’s PEACE), hold CTRL (Command on mac) and click on layers thumbnail. That should load it’s selection.

Then click on your merged words layer and press Ctrl+J. If you make invisible your merged words layer (and unmerged words group is still invisible) you should get something like this.

Step 7 – Create Background Text Effect

Make merged words layer visible again and apply following layer style.

Set layers opacity to 30%.

Then duplicate merged words layer and place it under merged words layer. Then go to Filter – Blur – Motion Blur and apply following settings.

Set layers opacity to 15%.

Add text under your title if you want.

Step 8 – Final touches

Locate your PEACE text layer and lower its opacity to 4%.

Create new layer, go to Image – Apply Image, then go to Filter – Render – Lightning Effects and apply following settings.

Set layers opacity to 30% and we’re done. I also added gradient map to one of the letter layers. Here’s final result. Click to enlarge.

Download wallpaper (various sizes):

You can download *.psd version as well here! Enjoy!

30 Photo Effect Photoshop Tutorials Every Designer Will Love

Dainis Graveris — Wed, 04 Nov 2009 16:39:30 +0000

Few days ago I created this article 105 People Photo Manipulation Works You Will Really Marvel with amazing photo manipulation works. This time I went step further and actually tried to find tutorials teaching you how to achieve such effects! Of course, I didn’t find the same effects there, but if you look closer and really study these tutorials I showcased here, you will understand you’ll have all the skills to create such artworks! More or less techniques are the same and with little creativity you can create your own masterpiece even today!

I wish you good luck, while exploring and learning so you could spice up your own photos, impress friends and evolve your design skills! This list is a little bit shorter than other ones, but I thought I better focus on quality than quantity, because we already have many, many useless list tutorial articles around here repeating same stuff over and over again.

1. Water effect photo montage tutorial

Outstanding tutorial, you really must try this one and understand how to use this effect, giving you unlimited opportunities to express yourself.

2. How to Create a Sparkling Fantasy Photo Manipulation

In this tutorial, we’re going to create a photo manipulation using different techniques. We’ll be adjusting each layer and element to make a compact final image. We’ll be using multiple photos and a handful of effects to create this work. Let’s get started!

3. Dance Photo Manipulation Part 1, Part2

I love this one, you can really learn several advanced techniques from this two part tutorial, amazing advanced level tutorial!

4. Create dynamic distortion effects

Extend feel of dynamics and create work, you cannot take eyes of! Really advanced techniques!

5. How to Create Super-Malleable Effects with Colorful Lines

Very trendy tutorial, teaching you how to create beautiful artwork out of almost nothing!

6. Create a Sleek Illustration that Fades from Line Art to Color

Combine reality with line art in beautiful poster and learn advanced techniques from this high quality tutorial!

7. How to Turn Humdrum Photos into Cinematic Portraits

In this tutorial you’ll learn how to transform usual photo into regular, humdrum portrait, even faking HDR effects a little bit.

8. The RoboHorse Turn Ordinary Animal to a Robot

In this tutorial I will show you with an example of horse how to turn an ordinary animal to a robot.

9. Design a Colorful Illustration Using Patterns and Shapes

This is really beautiful tutorial using patterns,coloring and 3D shapes to gain outstanding effect! Tutorial is easy to create and modify, so you should really enjoy it!

10. Awesome Snowboard Poster Tutorial

Simple tutorial, showing how to gain great effects using just few brushes and basic Photoshop skills.

11. Create a Funky Perspective of a Model Riding Digital Volume

Learn how to create photo manipulation using perspective achieving depth and motion in artwork. Easy to follow up – enjoy!

12. How to Create a Steampunk Style Illustration in Photoshop

Learn through simple steps how to montage many different elements in one picture and make it look really good with lightning, shadows and image grading.

13. Make your image look awesome with a few light effects

For every beginner – advance effects!

14. How To Create A Vibrant Image Using Photoshop

Explore how to add dynamics, energy to photo turning it into great artwork! Excellent learning piece!

15. Beautiful Lady Effect Photoshop Tutorial

Colorize and extend this great photo to look it even more beautiful and artistic!

16. Electrifying Energy Beam Photoshop Tutorial

Great and very easy to archieve effect I really love to use in many works I create as well!

17. Tutorial: Use lighting effects to make photos sparkle

Add some simple brushes,lightning and color to make your photo stand out!

18. Dazzling Dance Photo Manipulation Tutorial

Detailed and really well explained Photoshop tutorial, which will learn how to combine several photos, add special effects and get outstanding results!

19. Create A Glowing Extreme Wallpaper in Photoshop

In this tutorial, you’ll create a complex glowing wallpaper using Photoshop, which is really easy to follow up.

20. Stylish Light Effect in Photoshop

Yet one more stylish image effect achieved playing with blending modes and adjustment layers.

21. Super Fast – Speed Lighting Effect Tutorial

Add speed of light in your works!

22. How to Create an Abstract Photo Manipulation

Nasty photo manipulation, which can be used in really various ways. Lots of useful techniques included in this tutorial!

23. Fashion Shot Photo Manipulation Tutorial

Enhance your photos with simple effects and get unbelievable effects!

24. Make Photos More Suggestive Tutorial

Subtle effects, great outcome, easy to follow up steps! Enjoy!

25. Add Another Dimension Photo Effects Tutorial

Use brushes and colors to spice up your photos to really stand out!

26. The Making of Mystic Tutorial

In this tutorial Nik Ainley walks us through the process of making a spectacular image. Completely outstanding!

27. Expressive lighting effects tutorial

Learn how to combine several lightning techniques to achieve stunning outcome!

28. Displacement effects tutorial

You’ll learn here how to use several filters and techniques to show you the way how to experiment, use lightning effects and recreate those effects in your own style.

29. Seriously Cool Photoshop Explosion Effect Tutorial

Very cool explosion effect tutorial, teaching how to break apart a body, add lightning and glow!

30. Create a Powerful Mental Wave Explosion Effect

Crazy and very powerful work. This tutorial will teach you how to combine photos and filters to produce wave explosion effect.

40 Incredibly Useful Web Design Tools You Should Use Daily

Daniels Mekšs — Mon, 02 Nov 2009 10:05:37 +0000

This article will showcase tools which should and could be used by designers daily. If you need some inspiration – you can visit the most popular and recommended design showcase sites to find really good works and examples. Check out design related tools, online generators, free font sites, template sites, great websites helping to test and manage websites – those all have been created to save your time! Remember - not always the best way is to create everything by yourself. Be smart and you will accomplish your tasks much easier and quicker without struggling!

I strongly suggest you to go through this article and bookmark tools, which could help you or just bookmark this page and come back whenever you feel discouraged or struggled! Enjoy!

Inspiration

1. Deviantart

Deviantart is one of the largest artist showcases on internet. You can find some great inspiration here.

2. Web design library

Web Design Library is an internationally refereed resource that provides a platform for the dissemination of design thinking and research. It covers all theoretical and practice-oriented aspects of the effective, efficient and attractive presentation of information on-line.

3. Stylevault

Stylevault.net is a design showcase where web designers can show off their talents and get inspiration as well as giving it.

4. Behance

Behance is a very great place for inspiration, because there are more professionals with stunning designs.

5. The design inspiration

The Design Inspiration is created by a group of designers who are seeking various design inspiration every day.

Design tools

6. Colour lovers

COLOURlovers is an international community of designers and artists of all kinds who visit the site to get color inspiration, ideas and feedback for both their professional and personal projects. COLOURlovers’ loyal members create colors, palettes and patterns to nurture their ongoing love affair with color.

7. Adobe kuler

Adobe kuler is a web-based application by Adobe that helps you create and share color themes.

8. Color hunter

Color Hunter is a place to find and make color palettes created from images.

9. Colorotate

With ColoRotate, you can work with colors in 3D, in real time, and in a way that matches how our minds process color.

10. Stripemania

Stripemania is a simple and free web 2.0 tool to create seamless diagonal stripes for your designs. You are able to choose the size of the stripes and the spacing between those. You can even add color gradient effect for all of your stripes.

11. Fontstruct

FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

12. Dafont

A great website which allows you to browse fonts alphabetically, by themes, or by date. Most of the fonts are free to download.

13. Icon finder

Icon search engine with over 100 000 free icons.

14. Whatthefont

Seen a font in use and want to know what it is?

Submit an image to WhatTheFont to find the closest matches in our database. Or, let cloak-draped font enthusiasts lend a hand in the WhatTheFont Forum

15. Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Coding tools

16. Typeteste

The Typetester is an online application for comparison of different typefaces. Its primary role is to make web designer’s life easier.

17. Typeface.js

With typeface.js you can embed custom fonts in your web pages so you don’t have to render text to images.

18. Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

19. Smush.it

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality

20. pForm

HTML form creator.

21. Zend Studio

Zend Studio 7.0 is the next generation of our professional-grade PHP application development environment. It has been designed to maximize developer productivity by enabling you to develop and maintain code faster, solve application problems quickly and improve team collaboration.

22. Fire FTP for Firefox

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

23. Expandrive

ExpanDrive acts just like a USB drive plugged into your Mac or PC. It lets you open, edit, and save files on remote computers from within your favorite programs. ExpanDrive enhances every single application on your computer by transparently connecting it to remote data.

24. W3C Validator

The W3C validator is a free service by W3C that helps check the validity of Web documents. Also available CSS validator.

25. jQuery UI

jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library . Each component is built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

26. Clean AJAX

Clean is an open source engine for AJAX, that provides a high level interface to work with the AJAX technology.

27. Refelction.js

Reflection.js allows you to add reflections to images on your web pages. It uses unobtrusive javascript to keep your code clean.

28. Blueprint CSS

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

29. CleanCSS

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

30. XHTML Character Entity Reference

This page contains the 252 allowed entities in HTML 4 and XHTML 1.0, as outlined in section 24 of the official HTML 4 specifications, published by the W3C.

31. Pingdom

Pingdom offers cost-effective and reliable server, network and website monitoring. We use a global network of servers to monitor our customers’ sites 24/7, all year long. The service includes statistics for uptime and response time, and can send out alerts via SMS and email.

32. Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

33. WIX

Free flash page builder.

34. Best free templates

BestFreeTemplates.info offers exclusive CSS templates of various categories, available for free downloading. Our free templates can be easily called one of the best free templates in the Internet. Qualitative CSS layout, absolutely unique professional web design – all this being an incontestable advantage of our free webtemplates. That’s what allows us to characterize our website templates as the best free templates.

Testing and managing site

35. Browsershots

BrowserShots is a web-based browser compatibility check tool that lets you easily preview how your website looks in all popular browsers. No email or registration required, submit your web URL and wait 3-5 min for BrowserShots to generate screenshots for each browser.

36. Browsercam

See your web design on any browser on any operating system. Check javascripts, DHTML, forms and other dynamic functionality on any platform. Not just yours. Use our bank of testing machines remotely to test your website.

37. Are my sites up?

Are my sites up is a simple service that notifies you when your sites goes down.

38. Google analytics

Google Analytics is the enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness. Powerful, flexible and easy-to-use features now let you see and analyze your traffic data in an entirely new way. With Google Analytics, you’re more prepared to write better-targeted ads, strengthen your marketing initiatives and create higher converting websites.

39. W3Counter

W3Counter is your free, hosted website analytics solution for answering the key questions about your website: who’s your audience, how they find your site, and what interests them.

40. eLogic

Track and monitor the activities of your website. Knowing what your web page statistics are is the key to running a successful online business.

3 Smart Ranking SEO Tips You Better Be Aware Of

Ayaz Malik — Sat, 31 Oct 2009 01:21:23 +0000

This article will take a little insight in several most popular ranking systems around here and teach you how to get better Google pagerank, get better results on Alexa and Moz ranking systems as well. Many of these tips will seem very basic and easy, but that’s so through – optimization is not hard, bust just requires small but regular time investments. If you can use those tips in daily basis, then you definitely get some great results! For example, check on 1stwebdesigner.com website which is only a little bit more than one year old, but has got really high rankings!

I wrote a post Learn SEO by Improving Important Web Ranks a few months before but now I guess it’s the right time to upgrade and elaborate it because Google and other search engines are changing their policy at high pace. First we need to get head into three of the most important ranks on web:

Page Rank
MOZ Rank
Alexa Rank

1. Page Rank:

Nowadays there is a big fuss that Google removing page rank or it’s the end of page rank. Well yes Google have removed page rank from webmaster tools, but still I don’t think it’s an end to page rank because this topic is going on from past 4 years. That is why we will talk about improving page rank as well.

Page rank is one of the most important and commonly talked about ranks on web. its the heart and soul of SEO and getting traffic from search engines. Page Rank is said to be an estimate of your site’s popularity on the web by measuring the number of websites linking to your site, assigned by Google. Page Rank is determined by Google Links not Inbound Links!! This is an important part to understand, Google links and inbound links are not same. Inbound Link means that links pointing to your site from another site, while Google links are an extract of the quality inbound links. In Short Google links are taken from the inbound links, but only quality links.

How to improve your site’s Page rank:

Improving page rank is a difficult but still not so difficult task to do. You can easily get about PR 3 in first two months. Sounds impossible? Well not actually I can do that with a challenge :), I have done that to plenty of sites. So how to? Some very Simple Techniques!!!

Optimize your homepage for search engines.
This includes proper page Title, Proper Keywords, Proper Description and most of all Proper Content. Now what do i mean by proper?

By Proper I mean that your title, keywords and description should not consist of extra stuff like numbers, stop words (and, or etc.), same keywords must not repeat more than 3 times in title and description. In Content Optimization Keep your content clean, fewer images, Use your main keyword in H1, also try to use keywords in h2 and h3. (For Details see this post : on page Optimization)
Install Google Toolbar
Start using Chrome Browser since they take data of sites you are browsing.
Post your site’s Links to these social bookmarking sites like Delicious, Digg, Deddit, Facebook, StumbleUpon, LinkzDirect etc.
Nofollow outgoing or not so important links. How to do that?
Normal Links: sitename

Nofollowed Links: rel=”nofollow”>sitename (See This post for more: Nofollow)
Ask for sites with same focus for link exchange, Don’t hesitate to ask they won’t say no trust me :)
Avoid using URL Shorteners if you are bookmarking your site’s link in social bookmarking networks, because with this the inbound link goes to the URL Shortener site not you. Twitter is exception since it nofollows all links.

In about two months u will achieve Page Rank 1-3. If you want to improve your site’s Rank and push even further please see this post: Link Popularity Building

2. MOZ Rank:

Moz rank is some what like link juice estimation. Link Juice just like page rank flows from page to page of your site or links to others sites on your pages.

Install Quick Search Status toolbar or SEO Moz Bar
Nofollow outgoing or not so important links (See This post: Nofollow)
Use SEO MOZ Tools to get info about your site.

In simple words the more quality inbound links you have the better moz rank you get. Quality links are considered as inbound links on sites whose page rank is higher than your site. For example if my site’s page rank is 2 then putting link on site who’s page rank is higher than 2 or 3 would be considered as quality Inbound link, of course by using proper link posting method.

Proper Link posting is something like this:

Normally if u post a link u do it like this. Site Name. Well yes u did made a link but not quality link. Here is how u can optimize your link. Your Keyword

Now what’s different in it? You are using a title attribute which strengthens your links focus and instead of using link on your site/brand name it’s better to use your keyword in it.

Once you do this and get a grip on SEO Moz tools you will easily control the flow of your link juice in your site and can control your site’s SEO to some extent

3. Alexa Rank:

Ok, everybody knows what it I won’t get into details is. Just simple to improve alexa rank just install alexa toolbar and browse your site daily. Refresh after a few minutes or so in a week you will improve your rank to about 200000 places. Note also this will work only to really new and fresh sites, for well established websites you still need traffic to get ranked.

Want even more??

Optimize your homepage for search engines (it’s very simple just read this post : onpage Optimization)
Ask members of your site or friends to install alexa toolbar and browse your site.
Even More?? Install alexa toolbar on a network of computers and set your browser’s homepage to your site so whenever its opened your site sends a hit to alexa , thus your rank improves..

When u will go through all these steps just to improve your site’s rankings once, you have learned SEO.

105 People Photo Manipulation Works You Will Really Marvel

Dainis Graveris — Thu, 29 Oct 2009 21:33:51 +0000

Oh, I am really marveling those photo manipulation works with people and countless amazing, colorful effects! Somehow I don’t think I have seen many tutorials out there teaching really how to come up with something so beautiful like that. Right, but that’s understandable, you will find many separate effect tutorials, but you really should learn to put it all together – but don’t worry effect and photo manipulation tutorial roundup will be featured in next article!

You must be thinking – man..105 artworks, is this guy completely crazy? Well, I must admit I went crazy, but I couldn’t not feature those works here, you must see how amazing this art is if you haven’t seen something like that before! At least I have crazy inspiration now to put something like this together myself – how about you?

One more thing, if you want to see even more of these kind photo manipulation artworks, check out my Deviantart profile favorites #photomanipulation folder, I’ll be updating this one regularly! The same is about web and wordpress theme layouts – I am putting the best works in my favorites daily and sometimes creating new works myself as well! Check out my DeviantArt profile if you are interested, guys and enjoy this article!

1. Drangue by barrena

2. Photo manipulation by GerCasey

3. Young Rocker by kybel

4. Cosmos. by TOYBOX-plaza

5. Right Round by Saibz

6. Volumize by GrungeTV

7. Pouring Paint by Dean-Site

8. You Forget it in People by RobShields

9. Saint by poisonvectors

10. Good day by poisonvectors

11. Lady Di by svpermchine

12. Lustre.v2 by sk8terpunk10

13. Silent Movie by Saibz

14. Ma Babe Vol. 2 by hicky2

15. Glow Dancer by iluud

16. My Heart Still Burns by AimhaDesign

17. Kick Up by Resetblue

18. Antimatter by zocafx

19. Juste la Dance by zocafx

20. Cartoonoportation by myaki-ru

21. Mr. Skeched Pants by MethMan

22. ShineOn by craZy18gurl

23. B A L L E T by nheonheo

24. Yeah by szc

25. Butterfly by poisonvectors

26. cutHERE. by Espador

27. Fresh by h2ogd

28. Muse by kuschelirmel

29. Displacement study by rosalindharrison

30. Karate lessons by anthony-g

31. .chill. by chadsharpe

32. Sensation by AirDesign06

33. After School Special by Espador

34. 30. by Espador

35. Pulsar by poisonvectors

36. FERVOUR by videa

37. MECHANICS by mkore

38. Like A Star by Phektion

39. Lost in colour by anthony-g

40. Ma Babe Vol. 4 by hicky2

41. Candy by poisonvectors

42. Design collage by wilson-naraku

43. Dancing Lotus by d4m

44. SOUL of the CITY by FreshIsrael

45. Dancehall Queen by BLACC360

46. Break.IT by Espador

47. Forever Heavy by RobShields

48. Growing Oil by kaethor

49. GHOST.88 by Espador

50. Incredible v2.0 by Script0s

51. Illusion by Frelon

52. Present yourself vol.2 by queedo

53. Liquify by mnmlst

54. United Colors by kaneda99

55. It’s My Own Cheating Heart by RobShields

56. Mecano by poisonvectors

57. Francis by poisonvectors

58. KARLA by poisonvectors

59. A new start by poisonvectors

60. Blue and Pink by sunsE

61. Stay alive by inphi

62. Passio by videa

63. Of the room by kaethor

64. Natural Growth by motive8

65. To Heaven by DouglasEltz

66. Move It by craZy18gurl

67. Colour Me Brightly by ryman

68. My.Chaos. by Espador

69. Dragon Within by inphi

70. Programata Magazine by JaxeNL

71. Hummingbird by D-e-v-i

72. Ev2ke by starfantazy

73. Tony Jaa by MomentumGFX

74. Blink. by Espador

75. Rapture by craZy18gurl

76. Fantasy boy by rosalindharrison

77. Behind Verdis Thoughts by Mantrastic

78. Lisa by moonmomma

79. Cenetric Jerene by Mantrastic

80. Colorful nature sounds by Cimoetz

81. Believe by suprsonic

82. Krump It by craZy18gurl

83. Bitch by d4m

84. Twinkle by starfantazy

85. Contra Band by starfantazy

86. Rainbow Goddess by ih8m0r0nz

87. Come Alive by d4m

88. Vibe by inphi

89. Fear the Music by wirestyle

90. Fired Up by FrozenStarRo

91. Splash by atmosphair3

92. Granny Delicious by wirestyle

93. Burst by wirestyle

94. Overdose Art by JaxeNL

95. Feel the music by wirestyle

96. Hang Em High by FreshIsrael

97. Heart Of A Dragon by videa

98. Flower Power by m4gik

99. Purple Lighting by barrena

100. bb by poisonvectors

101. Sounds fake by poisonvectors

102. FMGT II by svpermchine

103. FMGT III - by svpermchine

104. iPod-Play Your Music by svpermchine

105. Hammer by poisonvectors

53 Best Practices How To Attract RSS Subscribers

Dainis Graveris — Tue, 27 Oct 2009 15:44:15 +0000

I’ve heard a lot of people constantly struggling to increase their RSS subscriber count. But before complaining often people aren’t aware there are few very well reasons for such things happening. In this post I wanted to take a research on many different, design related blogs and investigate their best practices how to use RSS buttons, where to place them, how to stand out and make that RSS button easy to notice and use.

First of all you must write regular, valuable and unique content to get attraction! Noone likes to read the same stuff over and over again, because they now how and where to get good information. Also don’t write one day about Windows media player and next day about tips how to attract women – have a clear focus, so you can attract people directly interested in your topic and would want to subscribe in return to get more.

Through investigating all those blogs I came to several tips what you could do to increase your RSS subscriber count:

1. Place RSS button above the fold.

Usually RSS button can be found on the top right area, which in my opinion is definitely the best practice. When I am visiting blogs I like, I always look on top right for RSS button and rarely I don’t find it there! Don’t forget about using catchy RSS icon or maybe use textual RSS subscriber count instead of default one.

Place RSS button somewhere near logo or above the header, so people would be able to recognize subscribe button right away!

2. Place RSS button in the sidebar

Yes, you’ve got one RSS button on the top right of your blog, but still there are people, who want some more advanced features or even they don’t know what the heck is RSS! Use words instead of just plain RSS icons in the more descriptive way. Offer people subscription through e-mail and it is great practice to also create separate RSS page, explaining to other visitors, what RSS stands for!

3. Place RSS button under the posts

This tip is one of the most important ones. You must think like new visitor- let’s say it’s the first time you visit blog, read some article you take interest in and after finishing reading it, you think about what to do next? You can scroll through related posts, read comments, but one thing you’ll notice will be RSS subscribe button – asking to you “If you enjoyed this article, consider subscribing to our RSS feed for FREE!!!”. For example, if I would be new reader on that blog, I enjoyed article I read through, I would definitely click on that button and subscribe! All you need to do there is ask and present proposal in eye-catchy way to grab that moment of attention!

I also like using word FREE, because some of the visitors don’t understand this RSS thing so well and word free definitely grabs attention!

Now scroll through all those many different practices and see how it looks on other popular sites. Of course, you always must think about your design and layout dividing accents and colors in smart, professional and good looking way. It is also good practice to use also heatmaps after some time when you change new design to see how design and placements works out for your visitors!

1. CSS Globe

2. Little Box Of Ideas

3. Problogger

Problogger website as professional it is, there are very good “Subscribe to Problogger” section. You have all the most important features there – Subscribe button, individual page explaining what RSS is, if you do not know it yet, Twitter button and subscribe via email field. Everything in one place and above the fold, very good example.

4. SpoonGraphics

Very good solution, subscribe background is in grungy orange color and above the fold top right placement. When you mouseover RSS feed you also can see textual message how many subscribers there are.

5. FreeLance Folder

6. PaintBits

I think this is one of the best solutions, where little RSS button is on top right section, which is easy to find. But also in sidebar you’ll find Updates section, where you can see how many RSS readers there are and again with option to subscribe.

7. SpeckyBoy

RSS icon in Speckyboy’s blog is extremely small, but on dark background that orange icon really stand out!

8. DesignMag

Very clear RSS message with different subscription options all in one place.

9. CSS-tricks

Top right and above the fold as expected – very clear message, for advanced options there are extra RSS buttons in footer.

10. Digging Into Wordpress

Notice how only thing in sidebar with dark orange background is RSS subscribe section, which makes it great, yet subtle accent since every article title is styled the same way.

11. Mac Appstorm

12. Ars Thanea Blog

Something a little bit different, though I think it would be better if at least mouseover would be in orange RSS descriptive way.

13. Phodana Media

Just mouseover RSS feed button and get advanced feed options.

14. Design Bombs

15. I Love Colors

Unique 3D RSS box and really nice rollover effect and good thing is RSS button is easily observable.

16. GoMediaZine

Here you’ll find RSS butons in two places as well – I think it’s a really good habit.

17. IconDock

Simply a little bit lifted out RSS button creating subtle and elegant accent.

18. MonoFactor

19. Line25

20. EPaper Central

Dark background and three bright buttons easily approachable and understandable!

21. Pro Blog Design

22. CopyBlogger

23. Design Disease

24. Viget Extend

25. Coda Blog

26. Creative Briefing

27. Oliekav

Dirty grunge style design with interesting approach, where RSS subscribe button is sort of combined together with logotype.

28. Viget Labs

29. Vectips

One of the rare examples where RSS buttons aren’t in above the fold section, but somewhere middle. Different approach also not by using classic orange color, but green one.

30. Cats Who Code

Very good example with two RSS buttons, where first two links on the top are in orange color, describing RSS and also there is counter to see how much people actually have been subscribed.

31. Catalyst Studios

32. Gisele Jaquenod

33. FreeLance Switch

34. Kohette

Scroll down the page, but RSS button always hang on top right welcoming new readers to subscribe.

35. Kultur Banause

36. Sparklette

37. Natalie Jost

38. Veerle’s Blog

39. Web Design Ledger

There are two RSS button placements on this site as well. Above the fold and in sidebar!

40. Blog What Design

41. N.Design Studio

Sometimes with such small RSS icon can be enough.

42. PSD Rockstar

43. Branded07

Everything in this site is really gorgeous and professional, but I really think they should create those RSS, Twitter buttons more appealing in order to get more subscribers. I like rollover though.

44. Adii Rockstar

On the left side Adii keeps the most important things like logo, description, projects and welcoming RSS subscribe button which is light grey standing out on the dark background.

45. Macalicious

46. NorthxEast

47. We Function

48. Digital Photography School

49. Just Creative Design

50. SmashingMagazine

51. NetTuts

I consider this as good RSS displaying way – simple options and button above the fold and scrolling a little bit down, you’ll get to expanded RSS options, explanation link what RSS is and actual subscriber count!

52. Noupe

53. Tutorial9

53 Best Practices And Tips How To Get New RSS Subscribers

25 Premium Like Though Free Blogger Templates

Cosmin Lupsan — Sat, 24 Oct 2009 17:37:34 +0000

Last days I was “assaulted” with questions about Blogger tips and tricks and also how to’s about design. Few years back my web blogs were based on Blogger and that’s why I have tested lots of Blogger themes and designs. Most of themes below are magazine style and some of theme are just designed for personal blogs. All of the themes were created by highly experienced web designers and they meet all professional criteria. A great part of the themes bellow were originally designed for Wordpress and converted to Blogger.

Just to avoid repeating the same words…Demo and Download, I’ve decided to add a link to official template page on template name and the Demo link on the screenshot.

Hope you will enjoy!

1. Arthemia

2. Bizmax

3. Blogging Pro

4. Cheerful Blues

5. Chucky

6. Cracked

7. Creative by Nature

8. Flow

9. Forex Press

10. Freshmade Software

11. Gamezine

12. Gestured

13. Happy Blog

14. Infinity Blogger

15. Irresistible

16. Letter Frame

17. Magazeen

18. Milano

19. Monezine

20. Paper Craft

21. Presents

22. Theater Room

23. Zinmag Remedy v2.0

24. WP Polaroid

25. Ads Theme

I would like to thank for this beautiful templates to all webdesigners and contributors and as a sign of respect please leave the footer copyright notice intact. I hope you liked this themes and for more information about how to install them and how to actually use them, just visit the official pages.

20 Professional Mozilla Firefox 3.5+ Ready Themes

Dainis Graveris — Sun, 18 Oct 2009 14:28:31 +0000

I did several months ago Firefox 3.0 ready theme showcase, but things always are moving forward, so I did research once again and found many new really beautiful and professional Firefox themes. I am really picky about such themes, wallpapers and designs, so Charamel theme was big surprise for me. It’s very polished theme, I definitely recommend it.

I tested manually every theme here to be sure it’s really good, so you will not be disappointed. Just go on and scroll through and choose one on these themes and browsing with Firefox will become even more enjoyable!

1. Charamel Firefox Theme

Really beautifully designed theme with light brown colors. This one definitely is my favorite #1, I am currently using it.

2. Daum Blue Firefox Theme

Really elegant and clean theme using light blue and grey colors. One of my favorites.

3. Mac OS X Leopard Style Firefox Theme

If you love Macintosh, but your browser is Firefox, you definitely will enjoy this Leopard OS type theme. This theme consists of dark grey and blue color scheme.

4. Qute Firefox Theme

Simple,light and clean firefox theme with clear, colorful icons.

5. iPox Firefox Theme

iPox is an easy on the eyes, white and blue theme for Firefox.

6. Camifox Firefox Theme

Lovely colors and eye-candy shiny rounded icons used in this theme.

7. PitchDark Firefox Theme

Cool blue colored minimalistic theme.

8. Anthem Firefox Theme

Carbon like dark theme really standing out from the crowd.

9. iAqua Firefox Theme

Colors are really light and good looking, perfect for people, who enjoy clean and professional themes.

10. Past Modern Firefox Theme

Interesting theme using subtle colors and icons – such theme would be prefered by people who spend long time using browser, because it’s really easy on eyes.

11. Heaven Cube Firefox Theme

This is a dark modern theme recommended for those with a correspondingly dark OS visual style.

12. ArzoFox Firefox Theme

Light blue theme using cool icons with reflections.

13. MyFirefox Firefox Theme

This theme perfectly simulates Internet Explorer 8. Good choice if you like IE design and features, but don’t quite like it as browser. Works perefectly with Windows 7.

14. Vista Areo Firefox Theme

Similar to MyFirefox theme this theme simulates IE 8 but with Vista Aero style.

15. NASA Night Launch Theme

If you like dark colors and dark background this theme definitely will suit your needs.

16. Office 2007 Black Firefox Theme

Cool greyscale theme using really elegant colors and icons.

17. Black Stratini Firefox Theme

One more theme for people who enjoy dark colors and cool bright icons.

18. MidnightFox

Dark theme using brightly colored buttons and colors.

19. Fox World Firefox Theme

Very light theme full with glossy and shiny blue icons and colors.

20. Kempelton Firefox Theme

One more light, clean theme with really interesting 3D loading bar.

Which one is your favorite? Let me and readers find out your pick!

Easy Way How To Create Forsaken Street Photo Manipulation

Daniels Mekšs — Fri, 16 Oct 2009 09:16:19 +0000

In this Photoshop tutorial you’ll learn how to create really natural forsaken street from very usual street photo. Go through these steps really carefully, because every each of them is really important for outcome result. You’ll learn here how to combine different photos together, add water in perspective, colorize your artwork to make it look good and realistic and much more.

I hope you’ll enjoy this tutorial as I did and feel free to ask questions if you don’t understand something! Let’s get to work!Final Outcome:

Tutorial Details

Program: Adobe photoshop
Version: CS3
Difficulty: Advanced
Estimated Completion Time: 4 hours

Preparation

Things we’re going to use:

Venice street by ashesmakebeauty
Cracked earth texture by cgtextures.com
Akgae texture by FantasyStock
Moss texture by cgtextures.com
Grunge texture by stuckdumb
Concrete texture by FantasyStock
Wall texture by shadowh3
Pond image by TimeWizardStock
Pond texture by cgtextures.com
Sky by Skybase
Grass brushes by Archeleron
Grass texture by cgtextures.com
Ivy and tendril brushes by midnightstouch
Dust brushes by AeneaKeats
Light beam brushes by redheadstock

Step 1 – Removing all the signs of life

Open up the Venice street image in blank document and save it with different name. First thing we see is that there are many people in picture which we have to remove. Duplicate the original background layer and name it “Background”. Use the Clone Stamp Tool (S) and Brush Tool (B) to remove people and other details from the picture. Use soft brush around 5-15 pixels. Because we’re going to apply some textures for the street and buildings you don’t have to be so precise. Something like this will work just fine:

Step 2 – Applying textures to street

Open up Image 1 from Cracked earth texture. Go to Select > All to select canvas. Next go to Edit > Copy. Open up Psd with Venice street in it, create new layer and go to Filter > Vanishing point. Apply the texture to the street. If you don’t know how to use Vanishing Point I recommend to read Getting to Grips with the Vanishing Point Filter tutorial. Texture doesn’t have to be perfect. Use Clone Stamp Tool (S) to make it fit the street. Then apply the texture layer Layer Mask and using 5-10 pixel hard brush paint over the needless areas. Finally set the layer to Multiply. Leave Opacity to 100%. Name this layer “Cracked earth”.

Open up Algae texture and place it above cracked earth texture. This time I’m not gonna use Vanishing Point because it ruined whole image. Resize texture using Free Transform (Ctrl+T), dublicate it about 10 times so filling the whole street area. Then merge these layers using Ctrl+E. Name this layer “Algae texture” Now we’re going to do one interesting thing for lazy people just like me. Remember that we applied layer mask to previous texture and made it fit the street perfectly? So as we don’t want to do it again let’s create Clipping Mask. To do that make sure that you have “Algae texture” layer above “Cracked earth” layer. Then click the right mouse button on “Algae texture” layer and select Create Clipping Mask. For final touches set the layer to Multiply, leave Opacity on 100% and clean up ugly spots using Clone Stamp Tool (S) with large soft brush.

Step 3 – Cutting out buildings

Extract the building out of background. That will improve texture adding to buildings. I prefer Pen Tool (P), but you can use whatever you want. Try to not include TV antennas or flags. Try to cut out the
top of the buildings carefully, but at the button follow your texture path. The bottom part will not be so smooth and precise, but that’s alright. Name the cutout “Building cutout”.

Step 4 – Applying textures to buildings

Open up Image 1 from Moss texture and place it above “Building cutout” layer. Resize texture using Free Transform (Ctrl+T) and dublicate it couple times. Move these layers on the middle and right side buildings. Leave left side clear. Then using Ctrl+E merge all dublicated layers into one. Again make this layer as a Clipping Mask to the “Building cutout” layer. You can read about setting up Clipping mask in Step 2. As we can see there are some white areas because we didn’t cut out buildings so precisely. That’s ok. Select Clone Stamp Tool (S), set Sample to All Layers and using small soft brush clone these white areas. Finally set the layer to Multiply, Opacity 85% and name it “Moss texture”.

Open up Grunge texture and place it above “Moss texture” layer. Resize it using Free Trasnform (Ctrl+T) and dublicate couple times. Merge these layers using Ctrl+E. Set this layer as a Clipping Mask of “Moss texture”.

Go to Layer > New Adjustment Layer > Hue/Saturation > Check “Use Previous Layer to Create Clipping Mask” and set the following settings:

Do the same thing with Curves:

Finaly set layer to Overlay and set Opacity to 50%. Name layer “Grunge texture”.

Now let’s apply some textures to building on the left side. Open up Concrete texture and using Vanishing point apply the texture. Place the layer above “Grunge texture’s” Curves layer and make Clipping Mask. Set it to Overlay. Set Opacity to 70%. If it’s neccesery use Dodge Tool (O) and Burn Tool (O) to make shadows or highlights. Name layer “Concrete texture”.

Using the same methods apply Image 1 from Moss texture and Wall texture. Again if neccesery use Dodge Tool (O) and Burn Tool (O). Name these layers “Moss texture” and “Wall texture”. Set “Moss texture” to Multiply and 90% Opacity, and “Wall texture” to Soft Light and 75% Opacity.

Step 5 – Creating water

Let’s add some water to our road. As you know water is always horizontal, but it also circumfuse objects like buildings and so. Here’s an example of wrong and right water drawing.

As you can see water doesn’t go just horizontal. It circumfulses buildings. Chechk out columns and other similar prominences. If object is closer, draw the water little bit lower. If object is further, draw the water little bit higher. In sum that’s kinda all. I’m not an expert, but with those simple rules you should be able to draw something believable and good looking. So let’s begin. We don’t want to create a lots of water like it’s in example. We just want to make something similar like swamp. So the water won’t be very deep and blue. It will be very shallow and dirty. Water is always with solid edges, so for selection you should use Pen Tool (P) or Polygonal Lasso Tool (L). Draw the selection and create a new Group. Go to Layer > New > Group and name it “Water”. Then add Layer Mask to this Group. If you did everything right, you should have something like this now:

Then create a new layer into this group and fill it with #46747b. Set layer to Overlay. Leave Opacity to 100%. Create a new layer and fill it with #47897c. Set it to Color and Opacity to 25%. Open up Pond image and place it above both color layers. Set it to Overlay and set Opacity to 45%. Open up Image 1 fromPond texture and using Vanishing point apply the texture. Place layer above “Pond image”. Set it to Soft Light and Opacity to 75%. Name layer “Pond texture”.

Step 6 – Adding details

Let’s add some better looking sky. Download Sky, place it under the “Building cutout” layer. Delete the sky on the water and try to place them as shown below:

Let’s add some grass to our buildings. Download Grass brushes, select green color on color picker and carefully brush on the windows and other similar areas. Name this layer “Grass”.

Then open up Image 1 from Grass texture, resize it (Ctrl+T), dublicate couple times, merge layers together (Ctrl+E) and set as Clipping Mask for “Grass” layer. Set it to Overlay and leave Opacity to 100%. Name this layer “Grass texture”.

Add Hue/Saturation for “Grass texture”.

Then download Ivy and tendril brushes and make the same effect as you did with grass. Work in zoomed in area so you can apply brushes precisely. Don’t be scared to overplay, because in picture zoomed out the ivy won’t be very visible. If it’s neccesery use Burn Tool (O) or Curves.

Now let’s remove shadow from the road and the reflection from the windows. Use Burn Tool (O) and Dodge Tool (O) with large soft brush with exposure about 20%. For removing shadow you must select “Background” layer and for the reflections “Building cutout” layer.

Let’s add some smoke to our picture. Download Dust brushes, create a new layer, select color similar #e1eec7 and start brushing. Brush around water and at the bottom of picture. Set layer Opacity to around 15%. Name this layer “Dust”.

Now we’re almost done. For better loneliness effect let’s add some light beams. Download Light beam brushes, create a new layer, select color #fbffd2 and try to place brush as shown below:

Then find “Building cutout” layer and click on it while holding Ctrl. That will load building selection. Then select Rectangular Marquee Tool (M) and set it’s mode to Substract From Selection. Draw a square along building edge on left side so the selection remains like this:

Then select the layer with sun beam in it and hit Delete. Use Eraser Tool (E) with large, soft brush to make sun beam with soft edges. Set layer opacity to 25% and name it “Sun beams”.

Step 7 – Color effects

Using Layer > New Adjustment Layer command apply following color effects: (On the images there is blending mode and opacity)

Conclusion

For the final effect let’s apply some sharpen. Before doing that chechk out if everything’s alright. If neccesery use Dodge Tool (O), Burn Tool (O), Eraser Tool (E) in some layers. To make sharpen create a new layer and go to Image > Apply Image. Then go to Filter > Sharpen > Unsharp mask and use the settings below:

I also used Curves:

And we’re done. I hope you learned something new and you’re pleased with the tutorial.