Tag-Archive for » Adobe «

Custom Wood Texture in Adobe Photoshop

In this tutorial, I will show you a simple, yet creative, technique that results in a realistic wood texture. This tutorial was written for anyone with a basic understanding of Photoshop.

The Final Image

This is what we will be creating:

Wood Texture: Final Image

Step 1: Setting Up the Document

Create a new Photoshop Document (File>New) to be 1500 x 1500px.

Document Setup

Step 2: Adding Background Color

Select a dark brown color and Fill the canvas with it. For this image, I used #5a3222.

Add background

Step 3: Adding a New Layer

Create a new layer and name it ‘Grain’. Before we do anything to this layer, make sure your colors are reset to black and white.

Grain Layer

Step 4: Rendering Clouds

Add some clouds to this layer by going to Filter>Render>Clouds.

Clouds Menu

Your image should resemble the following:

Clouds

Step 5: Stretching It Out

Transform (Cmd/Ctrl+T) the height of the ‘Grain’ layer by 600%.

Stretch Clouds

Step 6: Blurring It Up

Add a strong Motion Blur (Filter>Blur>Motion Blur) to the ‘Grain’ layer. I used a setting of 236px

Motion Blur Menu

Your image should now look like this:

Motion Blur

Step 7: Posterizing Magic

This next step is what makes this texture possible. Go to Image>Adjustments>Posterize and set it to 25 Levels. You can see that our image has some good separations that we will use to create wood grain.

Posterize Menu
Posterize

Step 8: Making the Grain

To get the wood grain to show, go to Filter>Stylize>Find Edges.

Find Edges Menu

You’ll notice that we have a pattern that resembles wood grain, but it’s not quite there yet. Let’s darken this layer by adjusting its Levels (Ctrl/Cmd+L) :

Darken Edges

Step 9: Adding Noise

We want to add some texture to the grain (as well as break it up). To do this, go to Filter>Noise>Add Noise and set the Amount to 65%.

Noise

Step 10: Blurring the Lines

Next, go to Filter>Blur>Motion Blur and give it the following settings:

Blurred Grain

Step 11: Setting Up for Depth

This next step is optional, but if you want to add some depth to the wood grain, then we need to set it up now. Go ahead and make a copy of the ‘Grain’ layer and rename it to ‘Specularity’ (this will become our specularity map). Position the layer as shown below (you can hide this layer since we wont need it just yet):

Copying Layers

Specularity:

Those who have used 3D software will recognize this word. It simply refers to a specific kind of highlight—usually a very focused spot of light on an object. A Specularity map is just an image that defines where the specular highlights go.

Step 12: Finishing up the Wood

Set the Blending Mode of the ‘Grain’ layer to Multiply. At this point, you have a finished wood texture. However, we can continue from here and add some depth to the wood grain using the ‘Specularity’ layer.

Finished Wood Polished

Step 13: Working with Specularity

Now, let’s start to refine the ‘Specularity’ layer. First, hide the ‘Grain’ layer and make the ‘Specularity’ layer visible

Reversing Layers

Step 14: Refining the Specularity Map

We need to Invert (Ctrl/Cmd+I) the ‘Specularity’ layer. Once this is done, bring up the Levels (Ctrl/Cmd+L) and adjust them as follows (the result will be our specularity map):

Specularity Map

Step 15: Applying the Specularity Map

Change the Blending Mode to ‘Screen’ and set this layer’s Opacity to 10%. Go ahead to unhide the ‘Grain’ layer.

Screen Specularity

Step 16: The Final Adjustment

To fully get the effect of the specularity map, nudge the ‘Specularity’ layer down and right a few pixels. This effect is subtle, but worth it!

Screen Specularity

Step 17: Finishing the Texture

If you want, you can add some color variation to your texture by selecting the ‘Background’ layer and using the Dodge and Burn tools as shown:

Burn and Dodge

Your final image should resemble the following:

Finished Wood Rough

Feel free to adjust the color of the ‘Background’ layer to acheive the wood coloring of your choice.

Wood Color Option



45+ Adobe AIR Applications for Designers and Developers

Adobe AIR (Adobe Integrated Runtime) is a cross-platform runtime environment used to build rich internet applications using Adobe Flash, Flex, HTML and Ajax, helping web developers and designers to perform their task with ease and much efficiently. This is one of the most appreciated application platform which become a very popular platform for internet-enabled desktop applications in recent years. With the increase in its popularity, the number of utilities and tools are also increased significantly.

If you are designer or developer then you must check these handy and convenient tools based on Adobe AIR platform which will offer ease and flexibility in your daily routine.

1. Flickroom

Flickroom is designed to provide you the luxurious Flickr browsing experience. You can share Photos via Twitter or share them on Facebook, browse Streams, Sets and Groups and enjoy many other features.

2. Klok

Every web designer and developer needs to manage their time. Klok is a neat and nifty time tracking tool for managing your time which comes with pre-defined templates. You can use it from your desktop if you have Adobe Air 1.5 or higher.

3. facedesk

Facedesk is a stand-alone Adobe AIR application to do all surfing related to Facebook. You dont need to open Facebook is another web browser this application will be your browser for surfing Facebook.

4. ZFLICK

zFlick is a free Adobe Air application which can be used to view and saving photos from Flickr. It also offers search feature for Flickr.

5. WebKut

WebKut is a simplistic application to capture web pages or part of it. It provides 3 ways to capture, entire page, current view or a selection.

6. Shrink O’Matic

Shrink O’Matic is an Adobe AIR application to easily resize batch of images. It supports JPG, GIF and PNG formats of image. Simply drag and drop images and choose the output sizes, names and formats from options and they will be re-sized.

7. Kuler

Using Adobe Kuler you can browse the color themes and import directly into Adobe Illustrator or Photoshop. You need to login to your account first.

8. ImageSizer

9. Moderator WP comments moderator

Moderator is a wordpress plugin and desktop application that allows you to view and moderate comments of your website directly from your desktop. You can accept or delete comments or mark them as spam.

10. Xe-IMG Image Editor

Xe-IMG Image Editor is a free and simple application which requires Adobe AIR to run. You can import photos in different extensions and Filter Sharpen, Enhance, Zoom Photo, Mask Image etc.

11. BetaDesigns Caliper

Using BetaDesigns Caliper you can measure anything on your monitor. The Caliper floats above all other application on the screen and can be used to measure anything on monitor screen. This is a very handy tool for Web Designers for Layout Measurements and for Graphic Designers for Illustration Measurements.

12. Designview

Designview is a very useful tool for those, developing Flex applications to create a quick layout before fine tuning to MXML. It provides basic functionality of Flex Builder Design View.

13. SWFShot

SWFShot is an Adobe AIR based application which allows you to take large high resolution snapshots of your JPG, PNG and SWF content saved in your hard disk.

14. Livebrush

Livebrush is a motion-based tool designed for drawing purpose. It contains over 100 styles and decorations, you can export lines you draw as vector files which can be used in other graphics applications.

15. Remember The Task

Remember The Task is an AIR based application designed by Jash Sayani, for simple purpose of remembering tasks. It is a light-weight application that allows users to view pending tasks with due dates and add, view and complete tasks.

16. TweetDeck

TweetDeck is a personal browser by which you can remain in touch of your contacts across Twitter, Facebook and more. It shows everything you want to see and helps you to remain updated and organized.

17. Flickr Desktop Search

It is a very simple application to search Flickr.com from desktop. It supports Linux, Mac and Windows.

18. COLOURlovers-Desktop Color Finder

Colorlovers is an awesome tool to find brilliant color schemes. With this interface, you can download pallets, color schemes and patterns without going to your browser.

19. CFDocs on AIR

CFDocs is extremely simple to use AIR application which is designed to learn AIR. It contains all ColdFusion tags and functions which can be used on your desktop when you are offline.

20. ColorBrowser

This application is a simple way to create and organize your desired color palettes. You can edit them, rearrange them, create new sets and save them for use in future.

21. Em based Vertical rhythm calculator

Em Calculator is a very unproblematic way of creating CSS code for typography set on baseline style. Rather than pixels it calculates the vertical rhythm of your designs in em units, which is a unit of measurement in the field of typography.

22. Polaris for Google Analytics

Polaris is a desktop reporting client for Google Analytics. If you have 1 website to monitor then it is free otherwise if you want to monitor multiple websites then you can purchase Paid Version which costs $15 / Year.

23. PixelWindow

PixelWindow is much unsophisticated Adobe AIR application used for measuring elements on your monitor screen in pixels.

24. Websnapshot

You must have come across to the situations when you need to take a screen-shot of a website; Websnapshot is capable of doing this job very easily and efficiently. You just enter the URL and press Snap, the thumbnails will be automatically saved to your save folder. You can select from three different types of snapshot which are Thumbnail, Browser size or Full Page

25. FEAT

Freelancers Estimation Assistance Tool (FEAT) is a tool to help freelancers in calculating hourly rates and project pricing estimates. You can define your expenses like salaries, tax and mention the profit margin that you expect. Then it gives your hourly rate that you must charge.

26. AIR Icon Generator

AIR Icon Generator is a very quick way of making icon or web 2.0 badges. You just need to enter text, choose the icon and color. Then by pressing Generate Icon you will get different sizes of the generated icons.

27. Font Picker

Font Picker is a simple tool to view all the fonts installed on your computer with sample which can be customized. This is an excellent application for quick font selection and management.

28. SEO Analyzer

SEO Analyzer is built using Adobe AIR and it is a desktop based application build specially for checking page ranking, link and keyword analysis of any website.

29. Splashup Light

This application is capable of performing levels, Hue/Saturation, Brightness/Contrast rotate, crop, resize and many more basic image editing features.

30. RegExr Desktop

RegExr Desktop is a un-complex desktop based tool for learning, editing and testing regular expressions or RegEX.

31. colorPicker

colorPicker is Adobe AIR application ascertain the hexadecimal color code from a color grid or sliders. You can use Copy to Clipboard button to copy the hexadecimal value of the color and paste it into your HTML code or IDE. It also keeps a list of all recently used colors.

32. iPlotz


iPlotz is used to create clickable, navigable mockups and wireframes, of a website or application. It is a downloadable application, desktop version costs $75.

33. JustResizeIt


Using this application you can drag and drop images, re-size them and further drag and drop re-sized images into E-Mail or a folder.

34. htmlText Editor


htmlText Editor is a basic WYSIWYG editor for htmlText. You can create htmlText visually hence speeding up the workflow.

35. .merlin An AIR Font Organizer

.merlin is an AIR based utility; it will extract the actual font name and rename the fonts which are labeled incorrectly.

36. Ora Time and Expense


Ora Time and Expense is a tiny application which has power of tracking and generating timesheets, expense reports and invoices.

37. Fireworks AutoBackup utility


AutoBackup utility provide to the flexibility of saving a copy of working file automatically at a user-specified interval inside a folder named FWAIRBackup which will be located in the same location of original file.

38. SearchCoders


By using this application you can interact with different Flex Developers. You can search most valuable source of Flex-related information like the Flexcoders mailing lists.

39. Fractal 4D


Fractal4D is a free and AIR based line art generator. Very handy tool to create abstract lines.

10. De MonsterDebugger


De MonsterDebugger is a debugger for Adobe Flash, Flex and AIR. The great thing in this application is, it is open source and can be used for free.

41. FNK

Fnk (pronounced fink) is an online visual programming environment that uses a dataflow approach for the analysis, processing and synthesis of image, sound and other data in real-time.

42. DOOMI


DOOMI has one basic and important function, which is to remember what you have to do next. A very simple To-Do List.

43. BOKS


Boks is a Visual Grid Editor which provides a user interface for blueprint CSSs framework. It has ability to handle Grid configuration, baseline rhythm, CSS exporting and HTML layouts.

44. The SQLite Sorcerer


SQLite Sorcerer can be used to perform basic ADMIN functions for SQLite database. You can create database, open recent database, compare the structures of different databases and check the results of SQL.

45. Demandbase Stream


Demandbase Stream is an effective website traffic tracking tool which enables you to see which businesses are visiting your website in real-time. You can filter data and set up a watch list or examine the keywords being searched and the pages which are currently being viewed.

46. GMDesk


GMDesk enables you to run Gmail, Google Calendar, Google Docs and Google Map without opening any web browser. It is an AIR based stand-alone application which offers convenient access to most Google Services.

If you have experience of using Adobe AIR then mention the applications you use in comments and suggest us the applications which are missing in this list.

Become Master of Text Effects With 40 Adobe Fireworks Tutorials

Adobe Fireworks is a bitmap and vector graphics editor. It is aimed at web designers for rapidly creating website prototypes and application interfaces. It is designed to integrate easily with other former Macromedia products, such as Dreamweaver and Flash.
While Fireworks CS5 packs a lot of new features, it is still possible to achieve completion of these tutorials listed below.

From my own experience, its hard to get started learning this program because you will face some obstacles. But take your time and be patient and you will master Fireworks in no time.

1. 3D Water Text Effect in Photoshop CS5

3d-water-text-effect-fireworks-tutorials-text-effects

In this tutorial you will learn how to create realistic water text effect in Fireworks CS5.

2. Awesome Floral Type in Fireworks and Photoshop

floral-type-fireworks-photoshop-fireworks-tutorials-text-effects

Make your text look better with floral effect.

3. Creating an amazing Palm Pre icon on Fireworks

palm-icon-fireworks-tutorials-text-effects

Create realistic looking Palm Pre icon in Fireworks.

4. LED Cinema Display in Fireworks

led-cinema-display-fireworks-tutorials-text-effects

Create the new Apple Cinema Display 24 the easy way.

5. Fireworks Quick Tips – How to use QuickMask

quickmask-fireworks-tutorials-text-effects

Learn how to use one of the best functions in Fireworks – QuickMask.

6. Awesome Light Effects in Fireworks

awesome-light-effect-fireworks-tutorials-text-effects

Learn how to create this amazing effect you see in the image.

7. Abduzeedo Job Board banner in Fireworks

job-board-banner-fireworks-tutorials-text-effects

Create job board banner in Fireworks.

8. Colored Lights Header

colored-lights-header-fireworks-tutorials-text-effects

Learn how to create this stylish looking header.

9. Classy personal portfolio in Fireworks

classy-personal-portfolio-fireworks-tutorials-text-effects

10. Grooveshark design style in Fireworks

grooveshark-design-style-fireworks-tutorials-text-effects

11. Amazing Neon Lights on Fireworks

amazing-neon-lights-fireworks-tutorials-text-effects

Title says it all. I followed this tutorial and ended up with a nice looking neon glow text.

12. Creating a cool website header in fireworks

cool-website-header-fireworks-tutorials-text-effects

13. Creating the iPhone Frame on Fireworks

iphone-frame-fireworks-tutorials-text-effects

Create a realistic looking iPhone from scratch.

14. Creating the iPhone Interface on Fireworks

These two tutorials are not same. In the first one you will learn how to create iPhone frame and in this one – iPhone interface.

15. Light Painting in Fireworks

light-painting-fireworks-tutorials-text-effects

16. Apple Air Banner in Fireworks

apple-air-banner-fireworks-tutorials-text-effects

A must tutorial for every apple fan.

17. Creating the IE7 logo effect in Fireworks

internet-explorer-logo-effect-fireworks-tutorials-text-effects

In this tutorial you will learn how to make IE7 logo effect for any letter.

18. Twist and Fade Technique

twist-fade-fireworks-tutorials-text-effects

19. Highway Sign

highway-sign-fireworks-tutorials-text-effects

20. Create a Night Scene

night-scene-fireworks-tutorials-text-effects

21. Page Curl in Fireworks

page-curl-fireworks-tutorials-text-effects

22. Create a Digital Collage

digital-collage-fireworks-tutorials-text-effects

23. Scotch Tape Tutorial

scotch-tape-fireworks-tutorials-text-effects

24. Dot Matrix Effect

matrix-effect-fireworks-tutorials-text-effects

25. Gel Cap / Plastic Button

plastic-button-fireworks-tutorials-text-effects

26. Circular Shadows and Highlights

circual-shadows-highlights-fireworks-tutorials-text-effects

27. Reflective Glass Effect in Fireworks/Photoshop

reflective-glass-effect-fireworks-tutorials-text-effects

This is a simple tutorial showing you how to add reflective effect to any text by using Fireworks or Photoshop.

28. Creating Grunge Text Using Adobe Fireworks

grunge-fireworks-tutorials-text-effects

29. Barcode tutorial

barcode-fireworks-tutorials-text-effects

30. Transparent Text

transparent-text-fireworks-tutorials-text-effects

31. Danger sign

danger-sign-fireworks-tutorials-text-effects

32. Crystal buttons

buttons-fireworks-tutorials-text-effects

33. Glossy Web 2.0 button

glossy-web-button-fireworks-tutorials-text-effects

34. Glossy Badge

glossy-badge-fireworks-tutorials-text-effects

35. One Dollar Coin Tutorial

dollar-coin-fireworks-tutorials-text-effects

36. Human Iris

human-iris-fireworks-tutorials-text-effects

37. Simple Orbs Tutorial

simple-orb-fireworks-tutorials-text-effects

38. Text Wrapping

text-wrapping-fireworks-tutorials-text-effects

39. Canned Pineapple Slice

canned-pineapple-fireworks-tutorials-text-effects

40. Recycling Button

recycling-icon-fireworks-tutorials-text-effects

Metallic Adobe CS Icons

This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.

Download Free Icon Set

Download Icons



Category: Tutorial  Tags: , ,  Leave a Comment

35 Excellent Adobe Fireworks Tutorials

Adobe Fireworks often gets overshadowed by Photoshop, but it too can be an excellent tool for designers. If you’re not experienced with Fireworks you may want to browse through some online tutorials to get a feel for the program. In this post we’ll feature 35 of the best tutorials for Fireworks.

How to Create a Stylish Navigation Bar in Adobe Fireworks

How to Create a Stylish Navigation Bar in Adobe Fireworks

Create a Collage by Fading Images in Fireworks CS4

Create a Collage by Fading Images in Fireworks CS4

Masking in Fireworks CS4 (video)

Masking in Fireworks CS4

Fireworks 101 (video) and Fireworks 101 Part II (video)

Fireworks 101

Fireworks CS4 CSS Export (video)

Fireworks CS4 CSS Export

Fireworks CS4 Color Management (video)

Fireworks CS4 Color Management

Fireworks CS4 Layout Tools (video)

Fireworks CS4 Layout Tools

Build a Professional iPhone App Website Wireframe in Fireworks

Build a Professional iPhone App Website Wireframe in Fireworks

Create a Vibrant Digital Collage Mixing Buildings and Vector Shapes on Paper

Create a Vibrant Digital Collage Mixing Buildings and Vector Shapes on Paper

Creating Fading Light Vectors in Fireworks

Creating Fading Light Vectors in Fireworks

LED Cinema Display in Fireworks

LED Cinema Display in Fireworks

The Abduzeetles Rockband Website in Fireworks

The Abduzeetles Rockband Website in Fireworks

Website Design Tutorial: Wellknown.as Case

Website Design Tutorial: Wellknown.as Case<

Creating an Amazing Palm Pre Icon on Fireworks

reating an Amazing Palm Pre Icon on Fireworks

How to Use Quick Mask

How to Use Quick Mask

Awesome Light Effects in Fireworks Inspired by James White’s O Series

Awesome Light Effects in Fireworks Inspired by James White's O Series

Awesome Floral Type in Fireworks and Photoshop in 5 Minutes

Awesome Floral Type in Fireworks and Photoshop in 5 Minutes

Classy Personal Portfolio in Fireworks

Classy Personal Portfolio in Fireworks

Amazing Neon Lights on Fireworks

Amazing Neon Lights on Fireworks

Creating the iPhone Frame on Fireworks

Creating the iPhone Frame on Fireworks

Circular Shadows and Highlights

Circular Shadows and Highlights

Dot Matrix Effect

Dot Matrix Effect

Extracting Logos

Extracting Logos

Designing for Mobile Devices Using Fireworks CS4

Designing for Mobile Devices Using Fireworks CS4

Golden Seal

Golden Seal

Photo Realistic

Photo Realistic

Create Vista-Like Wallpapers with Fireworks

Create Vista-Like Wallpapers with Fireworks

Old Paper Effect in Fireworks

Old Paper Effect in Fireworks

Jewel Button

Jewel Button

Five Easy Steps to Create a Barcode in Fireworks

Five Easy Steps to Create a Barcode in Fireworks

Creating a Thick Text Outline

Creating a Thick Text Outline

Shiny Ribbon

Shiny Ribbon

Adobe Fireworks CS4 Photo Blur Effect

Adobe Fireworks CS4 Photo Blur Effect

How to Create Blend Mode with Adobe Fireworks CS4

How to Create Blend Mode with Adobe Fireworks CS4

Altes Web Logo Tutorial

Altes Web Logo Tutorial