How to make a mechanical sunflower

Used resources :

• Background stock – http://www.sxc.hu/photo/1330848
• Gears 1 stock – http://www.sxc.hu/photo/786370
• Gears 2 stock – http://www.sxc.hu/photo/787889
• Cog wheel stock – http://www.sxc.hu/photo/1054958
• Chains stock – http://www.sxc.hu/photo/1136259
• Crane stock – http://www.sxc.hu/photo/1208739
• Light bulb stock – http://www.sxc.hu/photo/1241346
• Valve stock – http://www.sxc.hu/photo/781096
• Glass ball stock – http://www.sxc.hu/photo/1341348
• Cloud brushes – http://javierzhx.deviantart.com/art/Cloud-Brushes-34277964?q=boost%3Apopular%20cloud%20brushes&qo=0

1. Creating a new document

Open a new document 1000 pixels width, 1500 pixels height.

Step 2 Creating background

Open the Background stock and resize it (Image > Image size), then drag it into your document.

Go to Layer > New Adjustment Layer > Levels and put in these settings:

Now the image should look like this.

Step 3 Making the flower

Open up the Gears 1 stock and cut out the closest gear, then drag it in our document, resize it and name the layer Gear 1.

Now, duplicate Gear 1, make it smaller using Edit > Transform > Scale or Ctrl+T and, holding shift, make it a little smaller and place on top of Gear 1. Continue doing so, and it should look like this (after you’re done, merge these duplicated layers to original layer pressing Ctrl+E).

Use the Burn tool (O) and Dodge tool (O) to shadow it, highlight it, use Eraser tool (E) on the bottom, to make it feel like it’s really growing out of dirt.

Now, open the Gears 2 stock, cut it, paste it in the document, resize it and shadow/highlight it, place it here.

Keep adding Gears 2 stocks, change their position, rotate them (Ctrl+T), you don’t really have to give it a thought, just make the impression that it’s mechanized. Name the most frontal gears layers Front Gears left and Front Gears right accordingly.

Open the Cog wheel stock, cut it out and paste it in our document, resize it. Paste another one, make it slightly smaller. Put both these cog layers under the frontal gears layers.

Step 4 Decorating the background

Now we would want to strengthen our idea, so open up Chains stock, copy it, paste it in our document, resize it and change this layer’s blending options to Darken.

Select Brush tool (B), select white color (#ffffff), and grab a cloud brush from the pack, which I included, create a new layer and brush the bottom of the chain.

Step 5 Adding features to flower

Open the Crane stock copy it and paste it in our document, put it behind the Cog layers and, once again, change the blending options to Darken.

Now, open the Light bulb stock, position it here, then, create a new layer on top of Light bulb layer (Name it Light source), change its Blending options to Linear Dodge, pick a yellowish color (#bb9003), select a 100 px soft brush and brush it on the bulb.

Now, open the Valve stock, cut it out like this:

Put it in our document, resize it and position it there. Feel free to use Dodge/Burn tool.

Step 6 Atmosphere

Now this photo manipulation does not look that serious or grim. Time to change that. Go to Layer > New Adjustment Layer > Gradient map, choose black and white gradient map. Don’t change the settings.

Go to Layer > New Adjustment Layer > Photo filter and fill in these settings:

Now, open the Glass ball stock, cut out the ball and paste it in our document. Select Eraser tool (E), use 100 px soft brush to erase the edges of the ball and position it here:

Step 7 Final touch

Use Text tool (T) to strengthen your idea. That’s about it.

Here you can download PSD file.

1. From PSD to XHTML Tutorial

In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time.

2. How To Create a Horizontally Scrolling Site

3. From PSD to HTML, Building a Set of Website Designs Step by Step

4. Subcide: Creating a CSS layout from scratch

5. Build a Sleek Portfolio Site from Scratch – PSD+XHTML Tutorial

6. From PSD to CSS HTML in 4 easy tutorials

7. Create a Killer Band Site with Drupal: A 6-part Tutorial Series

Great tutorial about creating site with Illustrator, coding with Drupal, using standards compliant XHTML and CSS.

The Complete Lesson Index:

Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming in Drupal
Read Part 5 -Drupal Admin
Read Part 6 -Wrap Up and Additional Resources

8. How to make sexy buttons with CSS

9. Horizontal Menus That Grow on You

In this quick tutorial, I’m going to discuss how to create a neat little menu effect. I’m dubbing it the liDock, because elements in the menu resize as the mouse moves over them, similar to the dock on OS-X, and because it’s a list menu.

10. CSS Template Tutorial

11. CSS Gradient Text Effect Tutorial

12. How to: CSS Large Background

13. Converting a Design From PSD to HTML

14. Slice and Dice that PSD

15. Blurry Background Effect

16. Using CSS Sprites Tutorial

17. Hand-Drawn CSS Navigation

18. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

19. CSS Menu Tutorial

20. Photoshop tutorial+ slicing part + coding css

This tutorial will show You how to make clean, nice vertical menu using Adobe Photoshop.

21. Slice a Template and Code it Using CSS

22. Coding Your 1st PSD Tutorial

23. Making Simple Work of Complex CSS Layouts

24. Making Your Footer stay put with CSS

25. How to Convert a PSD to XHTML – Video Screencast

26. Advanced CSS navigation

27. Tutorial: Coding A Layout

28. Invasion of the Body Switchers – Learn how to switch styles

29. Float Tutorials – Step by Step

30. CSS Slicing Guide: Picking The Right Layout

31. Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

32. CSS Sprites + Rounded corners

33. 3 Simple Steps in Coding a Rounded Corners Layout

34. Style master CSS tutorial

35. Converting a Photoshop Mockup: Part Two, Episode One

36. CSS Vertical Navigation with Teaser

37. Fixed Footer Backgrounds with CSS

38. A simple introduction to 3 column layouts

39. Two column CSS layout

40. CSS Layout Technique – Achieving 100% Height

41. Vertical CSS menu with a ‘behavior’ file

42. Sleek Design Code – HTML

43. Breaking Out of the Box With CSS Layouts

Now You should have impressive foundation to create really advanced layouts using standard compliant XHTML and CSS. Put them in good use and maybe I’ll create another list article with Photoshop layout tutorials. Thanks.

If You are graphic designer, You should learn also some simple coding too. If You are new to this simple coding, You could find this resources useful. I listed few resources, I prefer to learn from and hopefully You’ll learn something too. This article isn’t very long, because I think You should choose just one place, where to learn from.

Okay, no more long discussions – enjoy!

1. HTML Dog

HTML Dog has been dishing out healthy code treats since 2003, and currently serves up around 1,500,000 page views a month. The idea is to take the somewhat convoluted official specs for XHTML and CSS and present them in a much more readable fashion.

Very useful HTML and CSS tutorial place, teaching You everything step by step – best practices, standards and code with “easy to understand” example. Give it a shot, You won’t regret it! I am only sorry about that, I didn’t knew about this place at the first time, when I tried to learn how to do simple coding. My favorite.

2. W3Schools

W3Schools is the largest web developers site on the Internet. This was the first place where I started to learn basics. Personally I think those tutorials are a bit outdated, but W3C is founding place where just everything started.

3. HTML Code Tutorials

Excellent site providing really helpful and complete guide to creating web pages. There is bunch of other useful resources like HTML Quick List with complete list of HTML tags, forum where to ask unclear questions and of course wide range of tutorial list.

4. HTML Goodies

HTML Goodies intended purpose is to help new and growing website developers learn their trade, and to provide them with tips, guides and reference sets for their use as they become more accomplished. If You are interested in HTML, MySpace HTML, learning the basics and also..colors, how to create buttons and much, much more. A huge resource roundup.

5. Tizag Tutorials

Tizag was designed to teach beginner web programmers how to use HTML and CSS. Also if You are getting deeper in web development, You can learn also JavaScript, PHP, Perl, AjaX, ASP, VBScript, XML, SQL, MySql, some useful tools and much, much more.

6. HTML Playground

Great site allowing You to play with HTML online – check out demo, do everything in 5 steps – choosing tag, read description, select tag from sample code, modify the atributes and finally see demo online. Pretty handy.

7. Your HTML Source

I wanted to highlight this resource page, because of its well written language in easy to understand way. Everything is clearly listed on “Full Index” page teaching You not only how to create Your very first homepage, but also how to style it with CSS, add spice with Javascript and create it accessible and SEO friendly.

8. EchoEcho

This is one more site You must have in Your bookmarks, if You are web developer. You can not only learn whole coding basics there, but also You will find everything from free webspace to host your site to graphics, programs, online developer tools and applets that will help you make it look nice.

9. Davesite

DaveSite also offers comprehensive overview how to use HTML, but this one is special because guide also teach You how to set up Your domain and hosting.

10. BraveNet

BraveNet offers a huge list of different useful resources, widgets, tools. This site has been over the web for about 10 years, so I am sure You’ll find out something useful too. And yes, that’s not all, of course, You can get HTML, CSS and FTP tutorials over there too.

11. AListApart

A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

Excellent page to check on the latest web development news and also find out some nifty codes. Must subscribe web page!

This is just small list about resources I found out, but I think this could be enough to choose. These are the best pages I found. And yes, if You know some more please, share with us too.

And I must apologize for this long pause, I must tell You, this is because session in my academy is coming, so I must spend most of my time learning and getting my works done.

1.See how fast You can type!

At first just check Your skills – test Your typing speed just typing the text in the list. You can see my results, with 5 typing mistakes, 70,5 words per minute and 295,8 characters per minute. Check out how good are You!

2. A Guide To Typing Basics

Now I found this great article to get the basics and recommendations, how to type faster. Check this out before starting.

3. MyTypeSpeed

At this place You can learn how to type faster – starting from beginning – you learn how to position your hands on the keyboard and using the first five keys that a typer should learn: A,S,D, and F, and backspace until very advanced techniques – 8 lessons together. Also You can participate later in typing challenges with other users like You!

4. TypingWeb

Just signup – and You can train Your skills there completely for free. Only software You’ll ever need to learn to type fast and accurately – and this is one of the places where You can learn it!  Choose different skill levels and even content You write while practicing is engaging to keep things interested.

5. Keybr

Good looking typing software, unfortunately to get chart, custom text or text from website/blog, You must purchase premium account for 7$. Anyway as designer myself I loved this clean and light design an how letters are going black or red giving You clear overview about Your speed, errors and gives satisfaction. I surely recommend this one!

6. Fingerjig Typing Game

Fingerjig is a 6 minute game that tests your typing ability. Words are randomly chosen from a dictionary of over 70,000. You must try to type the words as quickly and accurately as you can! This game gives strange satisfaction feeling with cute design, based on flash with nice animation effects while typing.

7. Speedtest

Check out how many words and characters You can type per minute. Also scroll down and read the article learning how to decide for yourself which keyboard supports you typing the best.

8. QWERTY warriors

If You want to get more fun out of learning process, You can try this game – “shoot” the enemies typing their name, detonate them, get Your health back – I couldn’t stop playing this one for a while, game keeps forcing You to type faster and shoot more and more enemies! Fun and training – 2 in 1!

9. Typeracer

Huh, and maybe You know – I like to save the best resources to the end..:) Are You ready for competing online with other typers? I couldn’t stop playing this for an hour – I was so excited to get the first place and stay better writing real texts from movies, books, shows etc. and it’s really exciting. After the race check Your place, speed ( words per minute) and register to see all Your previous “races” and compare Your skill improvement. Return to this resource regularly and be master. My best race for now is 72 wpm and average speed is 64 wpm. Huh, sounds pretty exciting am I right? And how good are You? If this game is too hard for You then just go to previous resources and learn from the basics and don’t stop until You get master typing grade ( comparing to this game – You are megaracer if You type at least 55+ words per minute.

And now I cant wait to see Your results in the comments! This could be pretty interesting!!

Also if You know more cool games or resources to help us improve our typing skills – please share with us improving our community!