Programming Blog &#187; wood textures

18 essential grunge textures

6 high quality seamless paper textures

10 High Resolution Cloud Textures

12 psychedelic stained paper textures

Nine vignetted vintage paper textures

5 High Resolution Brick & Tile Textures

Colorful grunge textures vol-2

10 free high res watercolor textures

10 High Resolution Grungy Surface Textures

5 High Resolution Grungy Paper Textures

Wallpaper Textures – 27 Free Images

Aqueous Sun Presents Rust v.02 – 33 Free Textures

Aqueous Sun Presents Rust v.01 – 28 Free Textures

9 High Resolution Metal Surface Textures

High Resolution Fabric Texture Pack

19 vintage book texture elements

Aqueous Sun Texture Pack | Volume 2 – 50 Free Images

Aqueous Sun Texture Pack | Volume 1 – 50 Free Images

12 High Resolution Denim Textures

Vandelay premier texture grab bag

14 High-Res Paper & Canvas Textures

11 Free High Resolution Fabric Textures

10 Free High Resolution Wood Textures

12 Free Grungy Bokeh Textures

Six free dirty paper textures

27 High Resolution Watercolor Textures

42 free vintage paper textures

20 High-Res Subtle Grunge Painting Textures

27 High-Res Playdough Textures

30 High-Res Foam Dot Textures

23 Stitchpunk Fabric Textures

Starry textures

Free Petit Pique Cotton Texture Pack

Donload Source

10 Free Hi-Res Textures: Rolled Paint Grunge Set 1

25 Apocalyptic High Resolution Rust Textures

Rock 1 Free Texture Pack

Spectacular Abstract Backgrounds

Granite 1 Free Texture Pack

Free high-quality cloud textures

Hi-res leaf textures pack

Asphalt 1 Free Texture Pack

Download wood textures

Denim textures pack

Rough Cement 2 Free Texture Pack

Grunge texture pack

High resolution texture pack

TexturePack

Vintage VI Texture Pack

Download Source
Not for Commercial Use

Desolate Texture Pack

Download Source
Not for Commercial Use

Elysium Texture Pack

Download Source
Not for Commercial Use

Get 4 VisualFreaks Packs for only $29.95 (reg. $119)

Tuesday Total Textures 73

Web-Design — Tue, 31 May 2011 17:56:21 +0000

Tuesday Total Textures is post series that will bring a new life to your Tuesdays. Every week I’ll be posting some free hi resolution textures that you can download to use in your projects. Check out this week’s free textures, download the ones you like and start making your texture collection.

For more texture visit http://abduzeedo.com/tags/ttt

Suggestions

Last week some people suggested that I posted some wood textures so today’s TTT is full of different wood textures. What would you like to see next week?

Square Wood Texture

Peeling Paint

Brown Plank

Umbrella of Palm Leaves

Atelier Decor

Stelplaats

Wood

Driftwood Texture

Cracked Wood

Wood

About the author

Hi there! I’m Paulo Canabarro, 25 years old, Brazilian web designer based in Providence RI, USA. I’m truly passionate about design of all kinds. Finding and sharing inspiration has become part of my life. If you have any suggestions or requests just get @ me – pvpcanabarro@gmail.com For some cool stuff make sure to Follow me on twitter!

Design a forest inspired Tumblr theme in Photoshop

Facebook-Web-Design — Thu, 12 May 2011 12:31:14 +0000

Advertise here with BSA

Tumblr is a micro-blogging platform that allows users to easily publish snippets of information to the web, such as a photo or photo set, a video, a quote or just a paragraph.

It is often used as an online diary because of to its ease of use compared to other blogging platforms such as WordPress.

A lot of Tumblr themes are out there, both free and premium, but have you ever wondered how you’d go about designing your own?

In this tutorial, you’ll learn how to create a forest-inspired Tumblr theme, making use of wood textures, subtle patterns and modern techniques—a nice blend of natural and modern elements.

What we’re going to design

The theme we’ll be designing in Photoshop consists of four areas: wooden sidebar, main content area, right sidebar and header.

Step 1

The first step, as should be with all things you design, is the sketching stage. Using my Wacom Bamboo graphics tablet and a blank canvas in Photoshop, I sketched the following design, with some larger elements, just to get my ideas down on (digital) paper.

Step 2

With the idea roughed out, create a new document in Photoshop. (Keep in mind, this isn’t set in stone. It’s just something you can refer back to if you get stuck in the design. Personally, I tend to experiment and change a lot of what I initially planned.) I used the following settings in Photoshop:

Step 3

The next stage is to put some guides down on the canvas. This will help you keep the structure of the theme neat as you design it. I want the left sidebar to be 200 pixels, the main content area to be 600 pixels and the right sidebar to be 160 pixels, giving us a width of 960 pixels.

If you’ve used the same settings, you can place your guides at 200, 800 and 960 pixels horizontally. This design will be aligned left, so that the wooden sidebar always sits against the left side of the user’s viewport.

I also placed guides 200 pixels below the top of the canvas and 200 pixels above the bottom of the canvas. This is how my document currently looks:

Step 4

Let’s now add some pattern to our background. Go to File → New, and create a new document that’s 8 × 8 pixels. Draw some vertical lines with a width of 2 pixels. Your canvas should now be 2 pixels black, 2 pixels white, 2 pixels black, 2 pixels white. Go to Edit → Define Pattern. Save your pattern as “Vertical Lines 2px.”

In your original document, go to Layer → New Fill Layer → Pattern. Select the pattern you just created, and click OK. Drop the opacity of the layer until it looks something like this:

Merge the pattern with your background layer, automatically rasterizing it in the process. Go to Filter → Noise → Add Noise. Change the value to 5% and click OK. This will add some subtle texture to the background:

Create a new layer, and fill it with white. Position it beneath the original background layer. Lower the opacity of your textured layer pattern to around 40%, and then merge it with the background layer by going to Layer → Merge Layers.

Step 5

Select the Rectangle tool, and draw a shape that’s 200 pixels wide.

We’re going to slice off the bottom of our shape using the Polygonal Lasso tool, making it look like a ribbon. Create a selection over your shape, rasterize the shape layer, and then hit the Delete key to remove the selected area.

Place the shape in the left sidebar area that we marked using our guides.

Create a selection of the top portion of the shape, and go to Edit → Free Transform. Stretch the shape so that it overlaps with the top line of the canvas.

Step 6

Select the Ellipse Shape tool and, while holding the Shift key to keep it round, draw a circle, filled with white. Position it at the top of the sidebar, and rename the layer to “Portrait.”

Right-click on the new shape layer, and select the “Rasterize layer” option to turn it from a smart object into pixels. Hold down the Command key, and click on the layer’s preview image in the Layers panel. This will make a selection of your circle.

Locate a picture of yourself (or whatever your website is about) and copy it. Head back into Photoshop and, with the circle selection still active, go to Edit → Paste Into. This will paste the object in your circle selection.

Having done this, you have automatically created a layer mask on the image (i.e. on a new layer, not the existing circle layer). Go to Edit → Free Transform to resize and/or rotate the image. It will remain a circle; just be sure not to make it too small. Once that’s done, delete the layer named “Portrait,” and rename your new layer.

Step 7

Select the Type tool, and create a text box in the header area. I’ve given my theme a completely random name: “Kabooom.” I used a font called Reklame Script. You can download a demo of the font or purchase it for $30 from MyFonts.

Right-click on your type layer, and select “Blending Options.” Apply a color overlay to the text. I used a light gray that’s a little darker than the background, with the hex code #D6D6D6.

Apply an inner shadow to the type, using an opacity of 10%, a distance of 2 pixels and a size of 1 pixel. Leave everything else at 0. This will make the type look like it was engraved in the background.

To complete the engraved effect, we’ll add a drop shadow to the type, using the color white with a normal blending mode. Give the shadow a distance of 2 pixels and a size of 1 pixel. These settings will make the shadow appear as a highlight at the bottom of the type, adding more depth to the type and reinforcing the inner shadow.

Step 8

Reselect the Type tool, and create a text box that fills the width of the right sidebar, which we have marked with guides. Put a variety of categories under the category heading, as seen below:

Select the category heading, and change the typeface to one of your choice. I used Minion Pro. Experiment with sub-fonts (bold, italic, etc.) and point sizes.

Change the font for the categories (“News,” “Days out,” “Photography,” etc.) I used Myriad Pro. Lower the point size of the type, and adjust the leading (i.e. the space between the lines of text), so that the top line sits lower than where it is by default.

Copy the first heading and the links and paste them below in the same text box. Change the heading and categories. I used the headings “My Projects” and “My Friends.” Use whatever is relevant to your website, of course.

Step 9

We’re now going to make the text in the right sidebar a little more appealing. Select the text for sub-categories (i.e. not the headings), and change the color from black to a dark gray. I used #333333. Click OK.

Right-click on the type layer, and select “Blending options.” Apply a white drop shadow with a normal blending mode. Change the angle to 120° and the distance and size to 1 pixel. Leave everything else set to 0 pixels. This will add a highlight to the bottom of the text, just like we did with the heading.

Step 10

Select the Line tool and, while holding the Shift key to keep it straight, draw a line beneath the “Categories” heading.

Right-click on the line layer, and select “Blending options.” Apply a white drop shadow with a normal blending mode. Set the angle to 90° and the distance to 1 pixel. Set everything else to 0 pixels.

Duplicate the line layer, and position it below each of the headings.

Step 11

If you have the same number of headings as me, then you should have three line layers. Select them all, and duplicate them. With the three line layers still selected, nudge them down 10 pixels by holding the Shift key and pressing the Down key once. Lower the opacity of your newer line layers to 25% to end up with something like this:

Step 12

Grab the Rectangle Shape tool, and draw a rectangle similar to what’s below. Make the rectangle exactly 570 pixels wide. This will allow for a 10-pixel gap between the left sidebar and the edge of the new rectangle and a 20-pixel gap between the right sidebar and the edge of the new rectangle, as seen in the annotated screenshot below:

Step 13

Reselect the Rectangle Shape tool and create a much smaller gray rectangle, like the one below. Position it in the top-right of the large rectangle, offset from the large rectangle by 10 pixels. Position the shape 30 pixels away from the top of the rectangle.

Step 14

Duplicate the type layer in the right sidebar and, using the Shift key and Cursor key combination, nudge the duplicated type layer over the main content area. Do the same with the two line layers for your “Categories” heading.

Select the Type tool, and click on your duplicated type layer. Remove all of the text in the box, and change the heading to something more suitable. I just used some dummy text here: “This right here is called a title.”

Step 15

Go to File → Place, and locate a photograph to place in the document as a placeholder. Using real images here is always best because they make the mock-up seem more real and attractive. I used a photo of my sister.

Go to Edit → Free Transform to reduce the size of the photo and position it in the right spot. Make it a total of 20 pixels shorter in both width and height so that it fits nicely in the black rectangle, like so:

Step 16

Open up the Blending options for the large black rectangle. Apply a white color overlay and a drop shadow with an opacity of 10% and a size of 3 pixels.

Step 17

Select the Rectangle Shape tool once again, and draw a long shape below the white photo background shape. Make sure it is the same width. Fill it with a light gray.

Open the Blending options for the new gray rectangle, and apply a drop shadow. Set the color to white, with a normal blending mode, the opacity to 100% and the distance to 1 pixel. Leave everything else set to 0 pixels.

Also, apply an inner shadow, using the color black, with an opacity of 10%. Change the size to 13 pixels, and leave everything else set to 0 pixels. These two layer styles will make the new shape look like it was etched in the background, like our heading typography:

Step 18

Moving on to the sidebar, download some repeating wood textures. I’m using a set from GraphicRiver that includes three different wood textures: light, medium and dark.

Once you’ve installed the patterns in Photoshop (by opening each image and defining it as a pattern), select the sidebar in your Photoshop document. Go to Layer → New Fill Layer → Pattern. Select one of your wood textures (I selected the medium version), and click OK. By selecting the sidebar first, the pattern should fill only that area.

Right-click on the pattern layer, and select “Blending options.” Apply a gradient overlay, going from black to transparent to black:

Change the opacity of the gradient overlay to 10%, and give it an angle of 0°. This will add a subtle shadow to the sidebar, making it appear a little more realistic and less flat.

Also, apply a drop shadow to the sidebar. Lower the opacity to 30%, and change the angle to 180°. Change the distance to 1 pixels and the size to 5 pixels, leaving everything else set to 0 pixels. This will add a small and subtle shadow to the sidebar.

Step 19

Open up the “Blending options” for the circle portrait that we created near the beginning of this tutorial. Apply a white drop shadow using the settings below:

Also, apply an inner shadow using the settings below. This will make the circle portrait look as if it was placed in the tree, rather than just sitting on it.

Step 20

Duplicate the title layer in the main contents. Reposition it to the sidebar, and change the text to “About me.” Also, reposition and resize the two lines below the heading.

Open the “Blending options” for your new type layer, and change the drop-shadow settings to these:

Add some text to the “About me” section, using the same font and size that we used in the right sidebar text. Open the “Blending options” for this new text, and click on the “Outer glow” tab to apply an outer glow; change the opacity to 30%, the color to white and the size to 18 pixels.

This will make our text more readable against the wooden background.

Play around with the font size to make the text easier to scan.

Step 21

After some experimentation, I decided that the whole sidebar looked much better in the darker of the three textures mentioned above. I changed the sidebar pattern and the colors of the text. Use the techniques you have already learned to do this.

Here is what my design looks like so far:

Step 22

However much you have planned, you’re bound to make changes during the design process. Upon looking at the design as a whole (rather than piecemeal), I concluded that 10 pixels between the sidebars and main content area was nowhere near enough.

Using the Shift key and Cursor key combination, nudge your content across, making the two gaps 40 pixels instead of 10. This will make the design more usable and attractive.

Step 23

I also decided to change the style of the theme’s header.

Change the color (using a color overlay in the “Blending options” window) to one selected from the circle portrait. I picked a dark green-blue.

I also removed the inner shadow and changed the drop-shadow settings, making it look like the header is sitting above the background rather than set into it.

Step 24

Moving on to the main content banner (i.e. the rectangle we created earlier that sits in the top-right corner of our main content’s image area), select the rectangle by clicking on the layer’s thumbnail preview while holding the Command key.

Go to Layer → New Fill Layer → Pattern, and select the same texture you used for the sidebar.

Right-click on the pattern fill layer, and select the “Rasterize layer” option. Using the Dodge and Burn tools, add highlights to the left and top of the shape and shadows to the right and bottom of the shape.

This will add depth and give a slight three-dimensional feel to the shape. The Burn tool will darken the image, whereas the Dodge tool will lighten it.

Select the Polygonal Lasso tool. Select a shape similar to the one below, and fill it with a dark brown, selected from your texture.

Using the Rectangular Marquee tool, select the areas in the new shape that you don’t need, and hit the Delete key to remove them. You should end up with something similar to this:

Step 25

Grab our very own exclusive icon set called “Reflection.” We will use several of these icons in our design.

Insert the icons that you need in the document by going to File → Place. I chose the camera, heart, reload, edit and clock icons, which will serve as my photo, like, reblog, notes and time icons in the theme.

Step 26

Select the camera icon and resize it. Position it on the post type bar that we just created. Apply an inner and drop shadow to it, using settings similar to those we have been using throughout this tutorial.

Add some typography to the post type bar. I used the same Reklame Script that we used in the heading and the same blending options that we used for the left sidebar headings.

Step 27

Select the other four icon layers. Right-click, and select “Rasterize layers” to turn them from smart objects to pixel objects.

Use the Rectangular Marquee tool to select all of the icon’s reflections.

Hit the Delete key on each of the icon layers to remove its reflection.

Step 28

Reselect all four icon layers. Go to Edit → Free Transform and, while holding the Shift key to keep the icons in proportion, reduce their size, and position them on the bar below the main content area that we created earlier.

Space out the icons evenly using the cursor keys.

Step 29

Right-click on the heart icon layer, and select “Blending options” from the menu. Change the color to light gray using a color overlay, and apply an inner shadow using the following settings:

Now apply a drop shadow, using these settings:

Once the settings have been applied to the heart icon layer, right-click and select “Copy layer styles.” Reselect all four icons, right-click and select “Paste layer styles.” All of the icons in this bar should now have the same effect.

Step 30

Select the Type tool, and make a small text box next to the heart icon. Type “Like this post.” Apply an inner shadow and drop shadow using settings similar to those we have been using throughout this tutorial.

Repeat the previous step for the remaining icons, using the following phrases: “Reblog this post,” “1052 notes” and “Posted on 19/03/2011.” Be sure to copy and paste the same layer style onto each type layer.

You may also want to reposition some of the icons with the new text, making sure that the gap between the text and icons is consistent; because of the different text lengths, this may have changed.

Step 31

Duplicate all of the layers in the main content area, and position them below the original. Change the title, image and post type rectangle. As mentioned, the more realistic the mock-up, the better.

Step 32

Duplicate the heading and text in the sidebar, and insert some icons. I used the excellent social media icons known as Buddycons, another set exclusive to Webdesigner Depot.

The final product

After some more touch-ups (I removed the jagged ribbon-like cut at the bottom of the sidebar), I’m all done! Here is our final design, ready to be coded or sent off to a developer to do it.

This tutorial was put together exclusively for Webdesigner Depot by Callum Chapman, a freelance user interface designer trading under the name Circlebox Creative. Callum is also working on an inspiration gallery project called Vinspires.

Would you like to see another tutorial on how to slice and code this design into a fully working Tumblr theme?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: O1Rs1S

Source
Go to Source

Premium Texture Set: Blue on Wood

Facebook-Web-Design — Sun, 24 Apr 2011 07:26:27 +0000

Premium Blue on Wood Textures

You can view the textures below, and can download the full sized textures at the bottom of this page.

This premium texture set is huge, containing 7 super-high res textures!

DOWNLOAD PREMIUM TEXTURE SET.

License: Creative Commons Attribution

WDL Premium: Grungy Wood Textures

Facebook-Web-Design — Wed, 30 Mar 2011 03:39:08 +0000

For our WDL Premium members, here’s a high-quality pack of grungy wood textures from PremiumTextures.com. These wood textures include grungy burnt wood, cracked timber, and tree knots. There are 9 textures included in this set.

Here’s a preview of 3 textures from the set:

Download Grungy Wood Textures

Premium Member

You must be a WDL Premium member to download this file.

About this Premium Partner

PremiumTextures.com sells high quality textures for designers, photographers, and creatives alike. The textures can be used in any of your projects, both commercial and personal. Just don’t sell them as your own stock photography.

13 Premium WordPress/Tumblr Themes + 2 WP Plugins only $49

Common Elements Used in Wooden UI Design

Facebook-Web-Design — Tue, 15 Mar 2011 17:26:05 +0000

We all know texture is used a lot in both modern and vintage design, although in many cases of design produced many years ago, noisy and grungy textures were unavoidable.

When it comes to wooden texture in design, though, whether in a print product, a web or mobile user interface element, or general layout, it is always used to enhance visual appeal.

In this article, we will look at five common elements in UI design that use wood textures to do just this.

In addition to discussing these elements and admiring some rather sexy user interface designs that I collected from Dribbble, we will also be learning how to reproduce some of these effects by following mini-tutorials right here in this article.

These five common elements in the UI design are:

Fabric and stitching,
Paper and shadows,
Engraved typography and patterns,
Sleek and modern elements,
Three-dimensional effects.

1. Fabric and Stitching

Fabric and stitching are elements that tend to fit in perfectly with the wooden texture because both are natural, organic products. (Admittedly, cotton is weaved, cut and dyed, and a lot of the wood in this showcase has been cut, sanded down and treated—but you get what I mean!) Look at the few examples below that combine fabric and stitching elements with wooden textures.

Examples

This very light design uses a basic “stitch” (just a dashed stroke link) to make the circle emblem and banner appear as though it has been sewn to the low-opacity and tinted wood-textured background. That little touch works so well for such a simple design.

The stitching in this design is a lot more realistic, combining a full-opacity wood-textured background with engraved elements, drop-shadows and real fabric textures. This stitch has a drop-shadow (0 pixels in size and 1 pixel at a 90° distance), allowing the stitch to stand out and match the detail in the rest of the design.

The digitally produced wooden texture makes this design look modern, with its faint gradients and engraved elements that produce a slightly three-dimensional and more realistic appearance. A repeating pattern is used to produce a lovely leather effect for the badge in the top-left corner, which has been stitched using the exact same technique as the one mentioned above (with the 1-pixel drop-shadow).

Mini-Tutorials

Creating a Simple Dashed Line (Illustrator)

In this mini-tutorial, we will use Illustrator (Ai) to create a simple dash-stroked line to form a circle, as in the first example of this section. Open up Illustrator and select the Ellipse tool. While holding the Shift key to keep your shape in proportion, drag out a circle, as below.

From the Stroke panel (Window → Stroke) apply a 2-point weight stroke with a Miter Limit of 4. Check the “Dashed Line” option, and insert 12 points into your first dash field.

You’ll notice that the line on the right side of our shape is actually two 12-point dashes put together. To fix this, let’s give our stroke a bit more of a pattern. Change the dash to 3 points and the gap to 12 points, and then double the dash to 6 points and keep the final gap 12 points. You should end up with a stroked line similar to the one below (results will vary depending on the size of your circle).

Duplicate your shape by first selecting it, then choose Edit → Copy (Command + C) and finally Edit → Paste in Place (Command + F). With the new shape still selected, hold the Alt + Shift keys simultaneously and reduce the size of the shape. Holding these two keys at the same time will keep the shape in proportion and decrease or increase the size from the center point, eliminating the need to realign.

Select the larger of the two circles. Remove the stroke, and change the fill color to a brown (or any other color for that matter). Now, select the smaller of the two circles, and change the stroke color to a lighter brown.

With the smaller of the two circles still selected, duplicate it by copying and pasting in place. Once duplicated, position it beneath your original shape (Command + [), and nudge the shape down one by hitting the down arrow on your keyboard once; then change the stroke color to white.

Reduce the opacity of your white stroke circle to 50% and the opacity of your brown stroke circle to 75%.

Creating a Realistic Stitch (Photoshop)

In this mini-tutorial, we’ll use a real fabric texture and some of Photoshop’s built-in effects to produce a realistic stitch. Open a new Photoshop document, and insert a fabric texture of your choice. Crop the image so that it sits on a white background.

Select the Rectangular Marquee tool, and drag out a selection on the inside of your fabric texture’s shape. Create a new layer and rename it “Stitch.” Go to Edit → Stroke and apply a 1-pixel black stroke to your shape.

Select the Rectangular Marquee tool again and position it over your stroke. It doesn’t matter where you start. With a position chosen, hit the Delete key. Make sure that you remove content from the stroke’s layer and not the fabric’s layer.

Repeat the process for the rest of the stroked line, as seen below.

There’s a high chance that the stitches won’t be symmetrical; but that’s a good thing, because stitches rarely are!

You should end up with something that looks like this:

Right-click on your stroked layer and select “Blending Options” to open up the Layer Styles window. Select the Color Overlay tab, and select a light gray (I used #F1F1F1).

Now select the Drop Shadow tab. Apply a black drop shadow with an angle of 90°, a distance of 1 pixel and a size of 0 pixels. Lower the opacity of the shadow to somewhere between 20 and 60%.

Select the fabric layer, and open up the Layer Styles window. Apply a default Drop Shadow with a distance of 0 pixels, and a Gradient Overlay going from white to black to white. Change the Blending mode of your Gradient Overlay to “Multiply” with an opacity of 15%. Once applied and viewed at 100%, you should end up with something similar to this:

Play around with the colors of your fabric by using the hue and color-balance settings. Here is my result:

2. Paper and Shadows

Paper and shadows are becoming increasingly popular as design styles, but are especially popular in texture-heavy designs, such as ones with wood. The collection of work that follows shows paper and shadows being used in different ways to present small chunks of information or, in some cases, the website’s main content.

Examples

This screenshot, in case you hadn’t noticed, comes from a small section of the design we saw at the end of the “Fabric and Stitching” section above. Continuing the theme of digitally produced texture, a simple white shape with a warped custom shadow is used to make the paper look like it is curling.

A really nice combination of wooden and crumpled paper textures. The paper in this UI is used to present a snippet of information needed for a recipe, with some lovely silhouette-style icons that allow the user to view, bookmark and share the full recipe.

This design is texture-heavy, combining wood, paper and tape textures to produce an appealing user interface. The photographed wood and tape, combined with the digitally produced paper textures and shadows, work well together.

This is one of my favorite UI samples in the post. Purely digital (including the wooden texture), the design uses drop and inner shadows to create a beautiful search field. The design also makes use of the stitches and fabric element. Overall, a very user-friendly interface that looks great!

This design seems to be inspired by traditional airmail envelopes with the repeating pattern around the paper. The paper has been (digitally) stapled to the wooden background, making the user interface appear like a pin and notice board rather than a flat web page.

The beige-cream image and navigation background has a fine drop shadow that makes it appear like paper, especially with the stamped badge and the faded sepia-style photographs that look like they have been printed. This fits in wonderfully with the wood-textured background and overall feel of the interface.

Mini-Tutorials

Creating a Simple Digital Paper Effect (Photoshop)

In this mini-tutorial, we will use a wood texture and basic Photoshop tools to create a digital paper effect. Start off with creating a new document with a texture or repeating pattern.

Select the Rectangular Shape tool, and insert a shape similar to the one below, placing it right at the very top of the canvas.

Duplicate the shape, and go to Edit → Free Transform (or press Command + T). Reduce the size of the shape while holding the Alt + Shift keys to keep the shape in proportion, and then decrease the size towards the center.

Drag the top anchor point above the top of the canvas so that it overlaps the top of the original shape.

Change the color of your new shape to a very light beige (almost white). I used #FFFBF8.

Duplicate your original shape, and change the color to pure black (#000000).

Increase the size of the shape so that it is a couple of pixels larger than the original shape. Create a guide—you can drag a guide out of the ruler (View → Show Rulers, if it’s not displayed)—about 10 to 20 pixels beneath your black shape. Go to Edit → Transform → Warp.

Drag the bottom-left anchor point down towards your guide, and then repeat the step with the bottom-right anchor.

Press Enter to confirm your shape transformation. Right-click on the Shapes Layer tool, and select the “Rasterize Layer” option.

Reposition the black shape layer beneath the other two shapes but above the wood layer. Go to Filter → Blur → Gaussian Blur, and blur the black shape by 10 pixels. Then click “OK.”

Lower the opacity of the black shape to 50%. Open up the Layer Styles window for your original white shape, and click on the Stroke tab. Apply a 1-pixel stroke to the shape using the gradient fill type, going from black to white with a 90° angle.

With that done, we have our digital paper-on-wood effect! This is a great technique to use for websites.

3. Engraved Typography and Patterns

Engraved typography and patterns is a fairly common technique in advanced web design, and it is becoming ever more popular in everyday design. Below are several examples that use this style well in wood-textured interfaces.

Examples

This Instagram application user interface has a grungy wood-textured background and washed-out semi-transparent images to produce a worn vintage look. The typography has several different styles, allowing the lettering to stand out and giving the wooden background an engraved feel.

Overall, this is a really clean wooden user interface, with a large and equally great collection of various styles and techniques. One used repeatedly (and very well) is the engraved effect on the typography and patterns—exemplified in the floral patterns at the top of the screenshot.

Metal signage is hung on the wood-textured header here to serve as the main navigation. To give the signs a more realistic engraved effect, the designer gave the typography inner and drop shadows.

Wood textures are primarily used in this design for the navigation bar (the log, in this case). The engraved typography makes the title appear as though some of the stone has been etched away to show the wooden texture.

Another example of engraved typography on signs, in this case wood-textured signs instead of metal.

This wooden UI employs sleek and modern elements, making it hard to choose whether to put it in this or the next category. The “Buy” button and the shopping bag icon have a very detailed engraved effect, making them wonderfully clickable!

Mini-Tutorials

How to Engrave a Pattern Into Wood (Photoshop)

In this mini-tutorial, we’ll be creating an etched or engraved wood effect in Photoshop. Open up a new document and insert a wood texture.

Insert one of your own patterns, or use stock vector image.

Once you’ve positioned the vector correctly, right-click on the layer and select “Rasterize Layer.” Right-click on it once more and select the Gradient Overlay tab. Apply a gradient using two colors selected from the wooden background, as seen below.

Select the Drop Shadow tab, and apply a white shadow with a normal Blending mode. Change the angle of the shadow to 90°, and the distance and size to 1 pixel. You can keep the other settings at their default.

Select the Inner Shadow tab to apply a shadow to the inside of your pattern. This will allow us to create the engraved effect. Drop the opacity of the shadow to 20%, and change the angle to 90°. Change the distance and size of the shadow to 3 pixels each, and keep all the other settings at default.

Click “OK,” and then lower the opacity of your pattern layer to 80% to allow some of the background texture to shine through in all of its glory. You should end up with this result:

4. Sleek and Modern Elements

Despite wooden textures often being linked to vintage and retro design, if pulled off correctly, they can also be used to complement modern and sleek elements, as you can see from the examples below.

Examples

Here’s another screenshot of an interface that we saw in the previous category, showing off another completely different styled element. The slider and scroll bars in this design have sleek white-silver and green gradients for a user-friendly interface.

As well as the fabric and stitches and engraved typography techniques, this design has some modern elements, such as 2-pixel gray-white strokes and the minimalist icons, which make for an attractive and usable iPad-like interface.

Another of my favorite interfaces. It combines fabric and wood-textured images with sleek gradients, 2-pixel strokes, simple icons and gorgeous typography to many create points of interest for the user.

A highly detailed interface that merges wooden textures, three-dimensional effects, glows and gloss highlights to produce a result that’ll stun its users. One-pixel lines are used to reinforce the 3-D effect.

Glows, shadows and strokes are used to bring this vivid wooden interface to life. The modern icons, though, are the key.

This lovely little interface makes use of the world’s natural products and sleek futuristic elements to produce a UI that is attractive and easy to understand. Noise is added to the modern elements, allowing it to fit in with the wood-textured header.

This keypad gives us a wooden texture based on an existing modern element: the default iPhone UIKit. The keypad works in the exact same way as the default keypad and so won’t confuse users.

Mini-Tutorials

In this mini-tutorial, we’ll create a wooden UI slider using a selection of Photoshop’s layer effects. Create a new document, and insert a wooden texture or pattern.

Select the Rounded Rectangle tool, and drag out a long narrow shape, similar to the one below. My tool’s corner radius is set to 15 pixels.

Right-click on the Shapes layer and select “Blending Options.” Select the Gradient Overlay tab, and add a gradient color selected from the background, and then a slightly darker color. Then click “OK.”

Now, select the Inner Shadow tab, and apply a black shadow with an opacity of 30% and an angle of 120°. Drop the distance to 1 pixel, and drop everything else to 0. This will create a shadow inside our shape, making it look like it was carved from the wooden background.

Select the Drop Shadow tab, and apply a white shadow with a normal Blending mode. Change the angle to 90°, and the distance and size to 1 pixel. Leave everything else at 0 pixels. This will give our shape a highlight along the bottom, making it look more three-dimensional and realistic.

Zoom into your carved line and select the Ellipse tool. While holding the Shift key to keep the shape round, drag out a circle and position it over the slider bar.

Open up the “Layer Styles” window for your new circle shape. Click on the Gradient Overlay tab, and apply a gradient going from a light-medium to light gray. Give it a 90° angle.

Select the Drop Shadow tab and apply a shadow to your shape. Change the distance to 0 pixels and the size to 10 pixels.

Zoom out to view your slider at 100%. Here is the result:

5. Three-Dimensional Effects

There are no restrictions on three-dimensional design, and it is incredibly effective with wooden textures. This combination is commonly used to produce “shelves,” as seen in the iPhone and iPad interfaces—particularly Apple’s iBook application.

Examples

These shelves are highly realistic, and the shadows (such as the one on the inner shelf in the top-right corner) come from a large selection of custom jobs (not built-in Photoshop filters).

The effects in this design are fairly similar to those in the previous one. This time, the effects bring a cleaner and more modern look, whereas the previous one was meant to look more realistic and “used.”

These iPhone shelves present similar techniques. This time, the result is both modern and realistic, perfectly balancing textured photographs with digital effects.

This 3-D button is incredible! With its combination of wooden textures, the design’s delicate details come into high focus. If a button like this was in front of you, there’s no way you’d be able to resist giving it a push!

A simple yet effective 3-D effect has been applied to this navigation bar, making the buttons appear as if they are filing drawers. S a cleverly designed element to get the user involved in the interface.

Written exclusively for WDD by Callum Chapman, a designer and illustration trading as Circlebox Creative. He also runs The Inspiration Blog and Picmix Store

Share your wooden UI designs and illustrations with us, as well as any articles or tutorials that might help your fellow readers.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: O1Rs1S

Source
Go to Source

Design Freebies of the Week #1

Facebook-Web-Design — Tue, 08 Mar 2011 15:45:12 +0000

This article is part of our “Design Freebies of the Week” series. We are showcasing once a week cool and inspirational freebies collected from our Design Freebies website. To see more / all design freebies check out Design Freebies for hourly updated design resources.

Icons

Social Snow – 36 icy social media icons
Old School – 83 high quality miscellaneous icons
Dogs N Puppies – 10 icons representing dogs and puppies
HTML 5 – 13 icons related to HTML 5
Aqua X – 34 glossy folder-themed icons
Pixel Perfect Credit Cards – 12 icons representing credit cards, Google checkout and Paypal

PSDs

Tablet PC, blank screen – a PSD template illustrating a blank black screen tablet PC
Green recycling symbols – a few high quality recycling signs
Blue Login Box – quality blue gradient login box PSD

Illustrations

Boxes – 3D box illustration

Textures

High Quality Painted Wood Textures – JPG file format
Snow Textures – 7 high quality JPG snow textures

Vectors

Nightlife Party Dancing Vector

Fonts

Manualito-Flo, Regular in Handwriting, Brushed, Calligraphy

For more resources, updated every hour check out Design Freebies

Get the stock images and vectors you need for your designs on Stutterstock

Want to advertise here ? Contact us

Related posts

You might also like these similar articles:

Download Exclusive Wood Textures Pack

Exclusive Free Textures of Wood Planks from 10ravens

Facebook-Web-Design — Tue, 08 Mar 2011 15:11:47 +0000

I am very pleased to announce that the wonderful photographer’s over at 10ravens have supplied us with an exclusive set of gorgeous wood plank and wood fence textures to give away to all of our readers!

Who is 10ravens?

10ravens.com is brand new website where you can find more than 10.000 of royalty-free textures and photo resources in incredibly high resolutions, up to 100Mpx. They are awesome and available for personal or even commercial use.

The 10ravens website also contains high quality products such as 3D models, hdri skies, textures, basemeshes and much more which you can find in their 10ravens products section.

10ravens has prepared a wonderful texture collection exclusively for you, the readers of MyInkBlog. This collection contains 30 high quality textures of various wood planks.

Here is a small preview of what is inside this magnificent bundle:

You can download the full bundle here:

More Like This

50 Fantastic Textures for Your Toolbox

BlogPoster — Fri, 04 Mar 2011 16:39:06 +0000

When creating art you will often need a various selection of textures to give your resulting design some much needed oomph. It could be that you need them for that extra grungy feel, maybe you are trying to design a logo with a denim background, or want to give a poster a glassy gloss. You may even need to add a little bit of dirt, rust, mold, stains…
The point is that every designer should have a good selection of textures at their disposable for any eventuality or possibility.

There are thousands of incredible textures freely available all over the web and to help make your hunt that little bit easier, we have organized the 50 textures below into six categories: Concrete (10 textures), Fabric (10 textures), Glass (5 textures), Metals (5 textures), Stone (5 textures) Plaster (5 textures), and Wood (10 textures). Hope you enjoy them!

Fabric Textures

Download Page →

Download Page →

Glass Textures

Metals Textures

Plaster Textures

Stone Textures

Wood Textures

Concrete Textures

Need a designer? Hire the author …

Need a freelance graphic designer? Hire the author of this article (Harry Jay Clement – a freelance designer from Malaysia) on DesignCrowd.

Looking for design work? Browse freelance design jobs and graphic design contests on DesignCrowd.

High Resolution Texture Pack

Free Textures Packs To Spice Up Your Designs

Facebook-Web-Design — Fri, 25 Feb 2011 12:25:56 +0000

Every day we try our best to present to you some useful tips, dear reader, to inspire you with fresh ideas and to try out new things. Today, we’ve prepared a nice collection of free texture packs that you just may have been looking for to freshen up your designs you’re working on. Enjoy!

5 High Resolution Brick & Tile Textures

9 High Resolution Metal Surface Textures

Starry Textures

4 Free High Resolution Grunge Textures

5 High Resolution Grungy Paper Textures

10 High Resolution Grungy Surface Textures

46 High-Quality Graffiti Textures

High Resolution Fabric Texture Pack

6 High Resolution Sand and Seashell Textures

27 High Resolution Watercolor Textures

12 Free Grungy Bokeh Textures

27 High-Res Playdough Textures

8 High Resolution Screen Print Ready Textures

30 High-Res Foam Dot Textures

14 High Resolution Paper & Canvas Textures

12 High Resolution Denim Textures

11 Free High Resolution Fabric Textures

10 Free High Resolution Wood Textures

Wood Textures

Grunge Texture

Texture Pack: Let It Snow!

Aqueous Sun Presents Rust v.01 – 28 Free Textures

Aqueous Sun Texture Pack | Volume 1 – 50 Free Images

7 Subtle Grunge Pattern Textures

27 High-Res Fabric Fold Textures

23 Stitchpunk Fabric Textures

19 Vintage Book Texture Elements

12 Tea Stained Paper Textures

44 High-Res Summer Garden Textures

Eight Vintage Book Textures

Six Free Dirty Paper Textures

53 High-Res Rustic Metal Sculpture Textures

25 Apocalyptic High Resolution Rust Textures

Desolate Texture Pack

13 Free Found Paper Textures

57 High-Res Classic Car Textures

42 Free Vintage Paper Textures

8 Colorful Grunge Textures

28 High-Res Vintage Postal Textures

14 Free High Resolution Slate Textures

Grab Bag 40 Random Free Textures

20 Simple Subtle Grunge Textures

17 Rock and Concrete Textures

25 Subtle and Light Grunge Textures

Massive Grunge Texture Pack: 40 Textures

Aqueous Sun Presents Rust v.02 – 33 Free Textures

15 High-Res Lens Flare Textures

Free High Quality Texture Pack: Sky and Lens Flare

Rust and Stardust Textures

(ik)

Freebie: Texture Pack 7 – More Wood

Facebook-Web-Design — Sat, 15 Jan 2011 22:52:39 +0000

So I’m back with yet another texture pack for you guys! Way back in July 0f 2009, only about a month after the Echo Enduring Blog actually launched, I released a Texture Pack 2, which contained five wood textures for you to download and use in your designs. Since then, I’ve been meaning to do a follow up with even more wood textures. It’s taken me a while, but I’ve finally done it, and brought you five more wood textures!

The previous pack consisted mostly of different wooden surfaces that I had come across when I was out on walks with my wife and daughter. As such, there was a certain weathered quality to the textures. This time, however, I focused my camera lens more on the polished, interior woods of floors and furniture. This gives the textures a much different feel.

Here are a couple samples:

a light coloured wood

medium coloured wood texture

There are another three awesome textures in the pack too, and all of them are saved as high resolution JPEGs with no compression, to help maximize overall quality. A couple of them are a bit more blurry than I would have liked, but they should still be useful at smaller resolutions. So go ahead and download the pack by clicking on the preview below. I’ll bet you can find some awesome uses for these textures!

Texture Pack 7 – More Wood (Downloaded 0 times)

If you do decide to download and use these textures in some way, I’d love it if you shot me an email or quick tweet to let me know or to show me a sample of your work. I love seeing my freebies in action!

Anyhow, I have plans for a couple more freebies over the course of the year, so do keep an eye out! And feel free to leave your thoughts or comments below!

Freebie: Texture Pack 2 – Woods

posted on Jul 22, 2009.

Texture Freebie: Another free Texture Pack. This one contains five high resolution wood-related textures that you can use to add some depth or spice to your designs.

Freebie: Texture Pack 3 – Colours

posted on Aug 13, 2009.

Texture Freebie: Another free Texture Pack. This one contains five high resolution coloured surface textures that you can use to add some depth or spice to your designs.

Exclusive Freebie: Mega Textures Pack

posted on Feb 11, 2010.

Exclusive Freebie: The Mega Texture Pack is an incredible collection of 25 different high resolution textures in JPEG format, and is available exclusively to my subscribers! Download it today!

Freebie: Texture Pack 1

posted on Jul 7, 2009.

Texture Freebie: The first Echo Enduring Media Texture Pack includes five high resolution textures that you can use to add some depth or spice to your designs.

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code – 7ev165dd

Last Day to Save $30 on Vandelay Premier Membership, and 23 New Premium Resource Packs Added in December.

Facebook-Web-Design — Sat, 01 Jan 2011 22:25:50 +0000

During the month of December we have released 23 new resource packs at Vandelay Premier! Members get unlimited access to all of the resources on the site, and today is the final day to get a one-year membership for $49 ($30 off of the normal $79 price).

If you’d like to have unlimited access in 2011 to hundreds of high-quality resource packs, with more being added all the time, you can sign up with the coupon code “vandelay2011” to get the discount on your first year of membership.

Now, to wrap up December we’d like to showcase the new resources that have been added during the past month.

Icons:

Real Estate Icon Set
Non-member price: $6

Vector Price Tag Icon Set
Non-member price: $5

PSD Files:

T-Shirt Mockup PSD
Non-member price: $6

Product Box Mockup PSD – Part II
Non-member price: $5

3D Screenshots Display PSD – Part II
Non-member price: $5

Letterpress and Deboss Text Styles
Non-member price: $4

Sticker Photoshop Text Styles
Non-member price: $4

Login Boxes
Non-member price: $3

Vectors:

Fish and Sea Animals Silhouettes
Non-member price: $5

Sunrays Vectors
Non-member price: $5

Hand-Drawn Arrows
Non-member price: $5

Skylines Vectors
Non-member price: $4

Photoshop Brushes:

Soft Grunge Photoshop Brushes
Non-member price: $5

Foam Brush Strokes Photoshop Brushes
Non-member price: $5

Textures:

Dirt and Grunge Textures
Non-member price: $4

Cracked Pavement Textures – Part II
Non-member price: $4

Monument Stone Textures
Non-member price: $4

Wood Textures – Part II
Non-member price: $4

Metal Textures – Part II
Non-member price: $4

Gravel Textures
Non-member price: $4

Brick and Stone Textures
Non-member price: $4

Stone Wall Textures – Part III
Non-member price: $4

Colored Paper Textures – Part I
Non-member price: $4

Join Today and Save!

If you like the resources presented here, there is much more on the way! Sign up today with the coupon code “vandelay2011” to get the discount on your first year of membership.

Free Texture Tuesday: Grab Bag 5

Facebook-Web-Design — Wed, 15 Dec 2010 12:35:36 +0000

I know it’s a little late in the evening, but for this week’s Free Texture Tuesday, I have another grab bag. The fabric texture is actually a scarf that I crocheted myself, believe it or not! There are also a couple really nice black and white wood textures. Hope you guys like them. (You can click on the images and get the full size ones from Flickr)

Photoshop free wood textures set

Facebook-Web-Design — Tue, 14 Dec 2010 14:43:46 +0000

via designer-daily.com

Permalink

| Leave a comment »

Local Texture: Three by One by Beyond Oddities

100 Useful Free Textures

Facebook-Web-Design — Thu, 30 Sep 2010 15:31:40 +0000

In Web design, texture is one of those elements that are widely used by designers, yet often hardly noticed by users. We don’t see them is because they usually remain in the background and supporting the overall design. Used primarily for background images, they need to fit to the overall design making the content easier to perceive.

Textures are not necessarily used in fashion-related or grungy websites; more often they are applied subtly to lend a personal tone to otherwise lifeless and faceless design elements. Textures are also often be used in combination with other elements such as typography, lighting and colors. They are most common for backgrounds, but are also use to fresh up a flat and boring appearance of design elements. Texture adds dimension to virtually any style of design, if applied properly. They also add a certain level of realism, creating a less formal, more inviting and aesthetically pleasing atmosphere that reflects our environment — after all, plain flat surfaces rarely exist in reality.

In this post we present an overview of some useful, freely available textures that you can download and use in your personal and/or commercial projects. Please read the license agreements carefully before using the textures — the license can change from time to time.

You can find some examples of textures applied to webdesign in various texture design showcases.

Grunge Style

Metal & Metallic Texture

Wood Textures

Cloth & Fabric

Drains Textures

Wall Textures

Paper & Cardboard Textures

Tiles & Patterns Textures

Miscellaneous

Free Resources For Textures

Grainy Wood Textures Pack for Premium Members

Facebook-Web-Design — Fri, 24 Sep 2010 11:15:36 +0000

PremiumTextures.com have kindly donated one of their fresh premium texture packs for Access All Areas members. This pack of Grainy Wood Textures features 7 super high resolution texture files of various timber grains and patterns for use in your personal and commercial design projects.Premium members can download these textures, …

Not a member? Becoming an Access All Areas member gives you the ability to view exclusive members-only content just like this. The premium category is already packed full of discount codes and useful design resources, and there’s plenty more to come! Find out more about becoming a member, or take a peek at what’s available to premium members so far.

15 Free HQ Wood Textures For Photoshop

Facebook-Web-Design — Sat, 07 Aug 2010 18:22:24 +0000

I’ve compiled a list of 15 of the most high quality wooden texture backgrounds you can use free of charge. Also, at the end of this post there are a couple of great Photoshop tutorials you should check out.

Wood Fence

Wood Textures by QBit71

Grey Wood by Loona Loupe

Wood Slats

Wood Texture by Nortago

Wood Texture Set via Bittbox

Wood Texture Patterns by Silver

Then Shalt Though Count to Three

Wood Texture Brushes

Valle Old Wood Texture by Enframed

Wood Floor by Gnrbishop

Dark Wood Texture Pack by Cloaks

Dark Wood Texture background

Graffiti Fence

Create Wood Texture Tutorials

PSD Tuts - This tutorial is a creation from scratch. You will create a wood texture and apply artwork on top to make it feel aged.

My Ink Blog – This tutorial will show you how to create a realistic wood texture using filters in Photoshop.

A Compilation of Various Grunge Texture Sets

Facebook-Web-Design — Fri, 30 Jul 2010 20:35:26 +0000

Add the right kind of distressed, worn-out feel you need for your designs with these free grunge texture sets. Some of these textures are available under Creative Commons licenses, so please read the information about the sets before downloading. Let us know your favorites out of these resources in the comments!

Grunge Nebulae Textures

Free Texture Tuesday: Grunge Mats

20 Free Hi-Res Yellow Grunge Concrete Textures

20 Simple & Subtle Grunge Textures

20 Free Original Hi-Res Grunge Stained Paper Textures

Grunge Bricks

Grunge Paper Textures

20 Grungy, Dirty Wood Textures

11 Old and Grungy Film Textures

White and Black Grunge

Whitewashed Grunge Textures

25 Subtle and Light Grunge Textures

Colored Dark Grunge

vintage grunge textures

7 Blue Grungy Paper Textures

Grunge Textures, Set 2

11 Beautiful and Colorful Grunge Textures

Grunge Background Textures

5 Delicate Grunge Textures

Grunge Cracks

05 Large Paper Grunge Textures

Seven Striking Orange Grunge Textures

Natural Grunge Textures

Grungy Textures

Simple Grunge

color grunge textures

Scraped Grunge

5 Light and Grungy Paper Textures

7 XL grunge textures

5 Large Grunge Textures

Subtle Grunge

Grunge II Texture Pack

Grunge Frames

Black and White Grunge

Love grunge? You the Designer does too. Also check out our previous grunge-themed roundups of brushes, vector packs, fonts and desktop wallpaper, as well as a grunge type Photoshop tutorial written by Adam Woodhouse.

35 High-Quality and Free Paper Textures

Facebook-Web-Design — Mon, 05 Jul 2010 11:50:47 +0000

Paper textures are extremely useful and versatile in web and graphic design. Whether it is brown paper, notebook paper, wrinkled paper, or something else, they are frequently used by designers. In this post we’ll feature some of the best free paper textures. Always be sure to check the license and terms before using.

For more textures please see:

For more design resources please see:

35 High-Quality and Free Concrete Textures

Facebook-Web-Design — Mon, 28 Jun 2010 13:29:59 +0000

Concrete textures are great for adding some character to your web and graphic design projects. In this post we’ll feature 35 concrete textures from various sources. If you see something you like, click on the image and you will be led to the source. Be sure to read the license or terms of use, especially if you are planning to use it for a commercial project.

For more on textures please see:

Design News Roundup N.40 »
Design News Roundup N.39 »
Design News Roundup N.38 »
Design News Roundup N.37 »
Design News Roundup N.36 »
Design News Roundup Archives »

Weekly Design News – Resources, Tutorials and Freebies (N.41)

BlogPoster — Thu, 17 Jun 2010 16:48:58 +0000

This is our weekly column in which we share our favorites posts, articles and resources with our readers all from the previous week.

If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook or even by subscribing to our RSS feed.

As always, if you have any cool links that you would like to share, do not hesitate to share them here: Submit News.

WTF is HTML5 (Infographic)

What the Hex?

E-commerce: Fundamentals of a Successful Re-Design

A List Apart: Articles: Web Fonts at the Crossing

Making Your First Google Chrome Extension

Simple CSS3 Dropdown Menu

Create a Vibrant Digital Poster Design with CSS3

Fancy Sliding Form with jQuery

20 Must Have WordPress Plugins For Every Website

A Beginner’s Guide to the Business Side of Freelancing

50 New Useful CSS Techniques, Tools and Tutorials

33 Amazing Examples of Monochromatic Photography

WordPress: From Kubrick to Twenty Ten

100 Years Of Propaganda: The Good, The Bad and The Ugly

75 Shocking Advertisements

How to Create a Cute Yellow Alien Icon in Photoshop

Alice in Wonderland Drinking Tea in the Royal Courtyard (Tutorial)

Design a Space-Themed Poster with Photoshop

A Different Type of Vintage: 40s Movie Inspired Retro (Tutorial)

Desert Fish: Surreal Photo Manipulation (Tutorial)

10 High Resolution Grunge Brushes for Photoshop

Exclusive Freebie Pack – Vintage Pistols

45 Free Wood Textures

Calendar World Cup 2010 by MARCA.com

Previous Weekly Design News…

Free Texture Tuesday: Wood 2

Facebook-Web-Design — Tue, 15 Jun 2010 18:34:58 +0000

Ahhhh yes… the venerable wood texture. Showing up often in today’s designs, it always pays to have some decent wood textures handy for your next web or graphic design project. If you like these and are looking for more check out the first wood Texture Tuesday post and also the great set in the archives. Enjoy!

Preview

About The Author:

Caleb Kimbrough is the man behind LostAndTaken.com, a blog solely focused on giving away free high-res textures.

45 Free Wood Textures

Facebook-Web-Design — Fri, 11 Jun 2010 13:21:07 +0000

The use of textures can be an easy way to add character to a design. Wood textures are particularly common in web design, and in this post we’ll featuring 45 free wood textures. If you’re looking for a texture to use in your own work hopefully this will be helpful. As always when you are dealing with freebies, be sure to read the license before using it.

For more on textures please see:

WDL Premium: High-Quality Wood Textures

Facebook-Web-Design — Wed, 19 May 2010 22:46:34 +0000

Today we’re giving our WDL Premium members a premium texture pack from PremiumTextures.com. Wood textures are some of the most versatile and useful textures out there, perfect for website backgrounds or any other design use. There are 17 high resolution textures included in this pack.

Here’s a preview:

Download Wood Textures

Premium Member

You must be a WDL Premium member to download this file.

About this Premium Partner

Burnt Wood: A Social Media Icon Set

Facebook-Web-Design — Sat, 13 Mar 2010 12:45:52 +0000

Burnt Wood is a collection of wood-tiled icons branded with various social media network logos that are perfect for your next grunge-styled web design.

The package contains 12 icons for many of the popular social sharing sites. Each icon is a 420×420px PNG file that can be scaled down to any size needed.

This set was designed by Chris Thurman of Visual Swirl exclusively for the readers of Six Revisions. It was inspired by a burnt wood text effect tutorial and created entirely in Photoshop.

Preview

Licensing

The set can be used for any private or commercial project for free without restrictions. The set may not be resold, sub-licensed, rented, transferred or otherwise made available for use. Please link to this post if you would like to share this set.

Download

burnt-wood-social-media-icons (ZIP MB)

About the Author

Chris Thurman is a front-end web designer/developer based in Louisville, KY. He’s also the creative brains behind Visual Swirl, a design blog focused on providing articles, tutorials and resources for creative professionals. Check him out on Twitter @visualswirl.

Massive Collection of Over 1,000 Floral Photoshop Brushes l PSD Tutsplus

22 Design Freebies to Kick-Start the New Year

Facebook-Web-Design — Thu, 07 Jan 2010 07:23:20 +0000

Replenish your graphic design arsenal with this week’s freshest design picks. Get on the creative groove by downloading free textures, brushes, fonts, icons and even WordPress themes for your design projects. Spread the good news by bookmarking, tweeting and sharing this post!

Free Design Resources Roundup

Brushes

350+ Smoke Brushes for Photoshop l DesignM.ag

Free High-Res Heavy Watercolor Spatter Photoshop Brushes l NettEdit

Free Hi-Resolution Scribbles Photoshop Brushes l DawgHouse

Textures

Great Useful Brick Textures l Abduzeedo

Black and White Grunge Textures | Bittbox

Scratch Textures | PSDFAN

Free Cracked Textures | Developer’s Paradise

46 High-Quality Graffiti Textures | ThinkDesign

High-Quality Wood Textures Pack | Design Your Way

Hi-Res Carton Scrap Textures l DawgHouse

60 Plus Brand New Free Textures l Freelance Review

Icons

30+ Useful Free Icon Sets in PSD Format | BlueBlots

200+ Big and Beautiful Highly Detailed Icons | Web Design Ledger

6 Free Social Icon Sets | Freelance Review

Free Furry Cushions Social Icons Set | Noupe

20 Free Office Stuff Icon Sets for Your Design | AEXT.NET

Speech Cloud Brushes | TutorialFreakz

24 Stitch Styled Social Media Icons Set | Creative Repository

WordPress Themes

50+ Best Free Premium WordPress Themes of December 2009 l Gupshop Blog

25+ High-Quality Premium as Free WordPress Themes l Dzine Press

Fonts

10 Excellent Free Fonts You Simply Can’t Get Your Hands Off l Tripwire Magazine

The Best Free Texture Packs of 2009

Facebook-Web-Design — Sat, 19 Dec 2009 02:52:06 +0000

There are a few things that a designer can not have enough of in his or her design arsenal, and one of them is textures. So to continue our “Best of 2009″ series, we’ve selected the best free textures from this past year. Since there were so many textures released in 2009 by so many generous people, it is difficult to choose the best. However, we feel the ones here stand out in quality and usefulness, and will be valuable additions to your texture library.

You can also check out the rest of the “Best of 2009″ series at the bottom of this article.

Grungy Textures

Package – Metal – 9

11 Old and Grungy Film Textures

Nebulae Grunge

Grungy Textures

Ultimate Grunge Pack

Vintage Textures

Floral

Vintage III

Vintage Damask

Vintage V

Vintage IV

Wood Textures

Wood Panels Textures

Grungy Dirty Wood

Woodwork

Paint Textures

Painted textures vol. 12

High-Res Watercolor Textures

Textures 05

Paint Splatters

Paper Textures

Japanese Paper

Paper Pack

6 Old sheets of paper

45 Stunning Wood Textured Websites

Facebook-Web-Design — Sat, 12 Dec 2009 17:42:51 +0000

Adding a touch of wood textures, would make any websites stand out. So I’ve made a list of stunning wood textured websites.

25 More Free Photoshop Texture Packs

The Big Collection Of Free Design Textures

BlogPoster — Mon, 09 Nov 2009 01:19:24 +0000

Knowing your resources is important in all aspects of design. You could be near the completion of a project and realize you are missing one thing, texture. Textures are not always beautiful by themselves and many can appear quite boring, but when you add texture to your design, it gives that little bit of depth you might be looking for to make the image pop. With a digital camera or intermediate to advanced skills in Photoshop, textures are easy to make. One thing we may run out of is time. Time to make or even the countless hours surfing the Web for the perfect texture.

This post presents an extensive collection of resources with textures from which you can choose the perfect background image for your next design. Please visit the linked sites to download the textures of your choice.

40+ Beautiful Patterns and Textures for Ornate Backgrounds
The use of ornate patterns in web design has been popular for several years now. Not only does it add a lot of intricate detail, but it’s also a great way to add a level of sophistication to a design. Here are some of the most beautiful ornate patterns and textures

50 Outstanding Free Design Textures
A few good textures can take a boring design and turn into something stunning. As a designer, you should seek to build a library of all kinds of textures to complement a range of styles. Here are 50 completely free and ready to download textures to get you started.

The Big Smashing Texture Gallery
Smashing Magazine organized the Smashing Texture Contest last year and received over 740 e-mails from over 600 participants, resulting in far more than 2000 photos. The result, however, is not just literally zillion of textures, but truly brilliant textures you can use in your private and professional projects for free.

270+ Sets Free And Beautiful Watercolor Textures
Both grunge and watercolor effects are really cool and hot in web design industrial. There are a lot of website backgrounds using watercolor effect. Some people may think watercolor and grunge effects are “dirty”, but if you are able to mix the design with these effects, then you will have a beautiful layout which able to give visitors an impressive appearance.

23 Water Color Textures I
23 High-Res Water Color Backgrounds are now available for free personal and commercial use. Each individual file can be found and downloaded for free at SadMonkey’s DeviantArt Page. Please feel free to use, redistribute or modify the files any way you see fit

25 Free High Res Watercolor Textures
These awesome watercolor textures are brought to you by Daniel Davidson. Daniel is a freelance graphic designer, you can check out his portfolio at SadMonkey Design

>Grungy Watercolor Textures and Layered PSD
Today’s webtreat is a layered PSD of our Grungy Watercolor backgounds on BackgroundsETC along with a selection of several of our favorites.

10 beautiful Free Wood Textures for Your Designs
Used as background images, wood textures are quite popular on the web theses days. In this article, I’ll show you 10 beautiful wood textures that you can freely use to enhance your designs.

12 Free High Resolution Wood/Rock Textures
Textures design are very popular among designers to add to their design work. Today we are offering 12 free high Res textures of wood and rock. You can download/preview the texture by clicking on the images which will take you to the Flickr Photos.

9 Free Hi-Res Wood Panels Textures
It’s time for another high resolution texture set. This time it’s all about wood panels. Wood textures pop up in more and more websites as background images. It’s a trend which sure won’t disappear in the near future. With a bit of tweaking these wood panels textures can be transformed into tile-able background images for your web projects and at the stunning size of 3264×2448 pixels they’re great for your print projects too.

10 Super High-Res Wood Textures
This texture set is courtesy of Franz Jeitz, who you may remember we interviewed recently. Franz runs the design blog FudgeGraphics, and was kind enough to offer this texture set to our visitors. This texture set is huge! Images are 3264X2448px in size – perfect for large scale designs.

30 Wood Textures Sets
If you create nature design work, you maybe will need Wood textures. Wood textures can add more natural feeling to your artworks. Wood textures you can use as backgrounds or apply them to some objects. In this set you will find 31 large-scale, high resolution (1950 * 1310) suitable wood textures. On Psdeluxe you can download this set for free.

200+ Excellent Free High Quality Tree Bark Textures
Tree Bark Texture is a kind of texture taken from the bark of a tree. Some passionate photographers and designers took these textures and contribute it for the design community. This could be useful for any graphics design artwork and normally used for background purpose.

42+ Free Photoshop Textures
Beautiful collection of background textures for Photoshop. A lot of texture backgrounds are used in modern web designing, textures add quality and beautify designs.

100 Beautiful Free Textures
In this post, Smashing Magazine looks at 100 different textures in a wide variety of different categories. Of course, each image is linked to the source where it can be downloaded. As with any type of freebie, be sure to read the terms and conditions or stipulations by the owner before using it in your work.

50+ High Resolution Textures, Tutorials and Resources
Hundreds of thousands of incredible Textures are all over the web. Due to this phenomenally vast amount of textures available, you can now add dirt, rust, floral effect, swirls, mold, oil stains in your artworks and photos to give them an aged, damaged, dreamy or any look you want

11 High Resolution Free Fabric Textures
Today I have a good set of high resolution of fabric texture. I found some fabric around my house which inspired me to take up my camera and shot some good high res texture. Fabric texture has always been on of my best favorites. Hope you can use high fabric textures for better use in your design.

45+ Absolutely Useful Free Fabric Textures
Today we will showcase a collection of textures where you can use and apply on your future web page design project or just for graphics use. These type of textures is more on different kind of fabrics.

50 Free Rusted Metal Texture
Textured backgrounds are a great way to add an extra dimension to any graphic design project. Magazines and printed media can resort to textured paper for added impact however, this is impossible to do on the web, and the closest we can do is adding texture to simulate this effect.

Large Textures from India
Five large and colorful textures from India.

12 Large Textures
12 beautiful textures for your designs and inspiration.

17 Paper Papyrus Textures
17 Lovely paper textures.

24 High Res Grunge Textures
This pack contains some really nice grunge-style textures.

10 Catalyst Textures
10 beautiful textures with vibrant colors.

Five Grunge Textures
This is a second set of interesting grunge textures designed by Cloaks

12 Free and High-Res Grungy Wall Textures
In this freebie, we share with you 12 free grungy wall textures that you can use on your future design projects in an innumerable amount of ways.

50 Grunge Icon Textures
For those times when you need to fill a small area, here are 50 colorful grunge icon textures..

60+ Free Textures from SXC.hu
In addition to using brushes, you can get great results and save considerable amounts of time by taking advantage of textures that are freely available. One excellent resources of textures (and other types of stock images) is Stock.xchng. Below you’ll find more than 60 textures from their site. Each image links to the page on sxc.hu where the image can be downloaded.

40 Free Concrete Textures
Concrete textures are excellent for use in web and graphic design. You can quickly take your own, since concrete is so easy to find, or you can take advantage of those that are already freely available. In this post we’ll feature 40 different concrete textures from a variety of sources.

Cool Textures in Bricks and Stones
We find ourselves going through photographs and wonder why in the world we even wasted the battery on that shot, not thinking of course they can be used for textures, patterns or even Photoshop brushes at a later time. We have collected several photographs of bricks and stones which could make some pretty cool texture effects in your designs.

Rust Texture Pack
This is a pack of 10 rust textures. You can get any of them from Flickr, or download the full pack in a zip file at the end of the post. Most of them have a resolution of 2560 x 1920..

101 Free Stone and Rock Textures
Most designers are always interested in quality textures to use in their own work. Recently I was looking for some good stone textures, so I decided to put together this collection that will hopefully be a helpful resource for others. There are textures from a variety of different sources.

New York Concrete: 10 Free Hi-Res Textures
The latest texture pack contains 10 high resolution concrete textures taken during my last trip to New York City. I took over 300 photos, mostly of the regular tourist attractions.

40 High Res Textures
If there is one thing that is ubiquitous among almost all grunge web designs, it’s having a good quality grunge texture or dirty background image

30 Most Incredible Textures for Vintage Style Design
One of the most important aspects of a good vintage style design is the use of authentic looking textures. Since most of you probably don’t have time to browse the local antique shop, and your grandmother’s attic is miles away.

Cloud Textures
Weird colors – 27 cloud textures, made from photos. Please credit the artist if you use these textures. Resolution is 1600×1200 pixels.

11 Free Hi-Res Old Grunge Paper Textures
It’s time for another high resolution texture set. This time it’s all about grunge paper textures taken from old books. As a bonus there’s even a nice book cover texture for you to download. Due to the enormous size (about 7MB each) of the textures I will not offer a single zip file containing all the images. Instead you have to individually download each texture by clicking on the preview. I hope you don’t mind. The files are perfect for both web and print jobs to your designs a more organic or vintage feel

60+ Extremely Useful Free Concrete Texture Backgrounds
You may notice the last few days I made some list of free texture resources. And as a continuation of gathering some High Quality Textures on the Web, here are another textures which can be very useful when it comes to grunge designs.

25 Great Free Photoshop Texture Packs
Photoshop textures are very widely used in modern web design, and hopefully you don’t have to create all your textures by yourself since a great choice is available freely on the web. In the following collection we have selected some of the best free Photoshop texture packs.

25 Useful Digital Textures Tiles
25 tileable textures for your multimedia, web, 3d, game or print designs. Bricks, stones, furs, metals and other materials. These tiles were created digitally, so you won’t get the dirt and impurities normally found on scanned images.

30 Free Cardboard Textures
Having the right textures can make a huge difference for designers. Today we’re going to feature 30 of the best free cardboard textures from a variety of different sources.

15 Textures of Italy
Here is the first of several, Italy Texture Packs. This one includes 15 textures from all over Italy. (The name of the city the photo was taken in is in the file name.

25 Free High Quality Brick Textures
I recently used some brick textures for a design project. I got a good collection and thought of sharing it. In this post, you would find some of the best high quality brick textures which can be used in different ways.

60 Unique and Free Paper Textures
One of the most commonly used texture resources is the paper texture effect, many designers including like this texture and use it in many projects and digital painting works in Photoshop.

22 Textures from The Grand Canyon
A couple of nice textures from a trip to the Grand Canyon. There are also a few textures from Vegas.

Free Texture Tuesday Rust 2
The venerable rust texture. Rust can be one of the most useful textures when trying to add a hint (or a lot) of grunge to your designs or photos, very handy.

31 Hi-Res Grunge Remodeling Textures
Free high resolution grunge remodelin textures. Overall 31 textures are included in the pack.

10 Free Original Hi-Res Fully Stained Paper Textures
These were created by soaking A4 pieces of paper in a tray filled with food colouring and then left to dry in the sun. The edges are most concentrated while the middle of the paper has a sort of tie-dye effect.

10 Free Hi-Res Photoshop Brushes for Acrylic Textures
These brushes are perfect for textures, overlays, and even poster making, letting you achieve a great organic feel. This set has a total of 9 Acrylic Texture Brushes all hovering at exactly 2500px.

Gallery of Textures
Textur.es is a community ran texture gallery for designers, photographers, and creatives alike.

DIRECT LINK »
Go to Source

10 Free Wood Textures

BlogPoster — Sun, 08 Nov 2009 18:46:23 +0000

This time i created 10 Free Wood Textures that you can download for free. They are all unique and can only be downloaded on tutorialfreakz.com. You can use them for free for personal and commercial use.

9 Free Hi-Res Wood Panels Textures

BlogPoster — Wed, 21 Oct 2009 03:20:48 +0000

It’s time for another high resolution texture set. This time it’s all about wood panels. Wood textures pop up in more and more websites as background images. It’s a trend which sure won’t disappear in the near future. With a bit of tweaking these wood panels textures can be transformed into tile-able background images for your web projects and at the stunning size of 3264×2448 pixels they’re great for your print projects too.
As always these textures are free for personal and commercial use without the need to credit. All I’m asking is that you don’t sell or redistribute these files or claim them as your own. Enjoy! Download link and closeup previews after the jump.

Close-up Previews:

Download Wood Panels Texture Set:

contains 1 .zip file – 75.8 Mb

Beautiful Photography and Texture Shots from Pea Ridge Military Park

BlogPoster — Sun, 11 Oct 2009 09:01:37 +0000

On a recent trip to the Pea Ridge Military Park (Pea Ridge, Arkansas), I took my camera and grabbed some random shots of panoramic views, old canons, and even some nice textures. If you see any photos you can use in any way, feel free and don’t worry about credit – God made it all, I just snapped a photo.

jump to the textures

Panoramic and Close Up Shots

Texture Shots

Need custom design or WordPress theme development? Check me out at eGrace Creative.

Share and Enjoy:

9 Tileable Grunge Textures

9 Tileable Grunge Textures

BlogPoster — Sun, 11 Oct 2009 05:51:03 +0000

This week we have a special post brought to us by WEBTREATS etc. We have 9 1024×1024 pixel grunge textures.

Need custom design or WordPress theme development? Check me out at eGrace Creative.

Share and Enjoy: