Web Design Blog, Web Designer Resources » photoshop

50 Truly Inspired Collection of Mixed Media Art

2Expert — Tue, 17 Jan 2012 11:09:06 +0000

Here we are sharing an exciting collection of mixed media artworks with our visitors. We decided to feature mixed media for this post because of its enormous popularity and worth.
Artists around the world are taking advantage of this contemporary form of art. Mixed media signifies the use of more than one medium to create an artwork. For example; work with the canvas where you combine paints, ink and collage all together to create something interesting.

Such combination of more than one medium, if done accurately, can create awe-inspiring results. We hope that this collection would be of some inspiration for you. Enjoy!

Spirit Cove

Tangled

Hollow Concept

To.Pursue.Imagination

Voyager

Mask

Cat in the Grass

Psdtuts

Untitled mixed media portrait

Combined angel

Sufi dance

Crack is right here

Soul Art

Hip Hop Portraits

My King

Kissed

My Luring Dragon

Moon At Noon

Tiger Beer : Energy

Mixed Media Assemblage

Love Art And Music

The Fox Channel

Song of a Bird

Glide

The Prosecutor

Mother

Sparrow

Bumble Bee

The Swan

My Secret Garden

Doesn’t Hold Water

Fallen Print

Anne-Julie

Psychiatric Hospital

Tea for one

Beetle and the Lady’s Slipper

Hide

CEO

Lunar Worms

Cthulhu tree

The King Escape

Black Birds

Remember

Pandora

The Haunting

Evening Sun

The Peacock Dance

Fraternal Siamese

Walking on a Dream

Hydrascensionism

Design a Clean and Minimal Portfolio/Business Website Template in Photoshop

Madalin Tudose — Fri, 13 Jan 2012 04:54:39 +0000

In this tutorial, I`m going to show you how to design a clean, clear and minimal template which can be used for a portfolio, personal or for a business website. This tutorial can be a good start for you to build websites. The template is free for download and can be easily transformed into HTML or even a CMS like Wordpress.

What we`ll be doing today(Click to see a bigger preview):

First step, open Photoshop and create a new document of 1300×1550px. The template will be 960px in width so, for your help(and I always suggest you do this every time you can) drag 2 Vertical Smart Guides at 170px and 1130px.Now, the content is centered and is 960px in width. Paint the first layer with white. This will be the background. We`ll start with the header, which will be 150px high. At the bottom of the header, draw a 1px line with the #efefef color. This line will be the delimitation between header and content.

The logo I made is just some simple text, but you can add your own logo.

Let`s build the navigation menu. Grab the Horizontal Type Tool(T) and type in a navigation menu using #666666 color combined with the Arial font-family(font-weight: bold; font-size: 13px). Make sure to leave a distance between the words of 40px.

For the header, I thought it would be nice to add a search form too, just above the main nav. So, grab the Rectangle Tool(U) and draw a rectangle of 200×32px. Double click the new layer created to open the layer styles pallete. Color the background with white and add a gray stroke(#efefef) of 1px. Then import a search icon or use the Custom Shape Tool(U) and draw a search icon like mine and color it with the same #efefef.

The header is done. It looks minimal, is clear and very clean.

Every portfolio website has to have slider to show off the artworks you made. I found a nice typography wallpaper on Deviantart called History by ~ebturner and I integrated it into my design after resizing it up to 960×350px. I left a top-margin of 40px to make the design more airy.

If you`re thinking to convert this design to HTML, I`m suggesting you use a very popular jQuery Slider nowadays which is called Nivo Slider. When I see a slider I know it is nivo by the navigation made of small dots. I added 3 small dots(8×8px) using the Rounded Rectangle Tool(U) just under the big image to reproduce the real slider.

Under the slider, I thought it would be nice to have a “Recent Works” widget. To separate the slider from the rest of the content, type in “Recent Works”, center it with the main layout and draw 2 horizontal lines on the left and right sides of it.

For the recent works area, split the content width in 4 columns of 210px and 40px margin between them. Then add in each column a thumbnail image of 210×160px, a title, a description and a link.

Now create 3 more boxes following the same steps involved when making the first one. To make the things moving faster, duplicate the layers and arrange them one after each other, but make sure to leave 40px between columns.

Under the “Latest Works” widget, let`s add another widget which presents what services your company can offer. Reproduce the title you just did on latest works widget but write this time something like “What we do” or “Our Services”.

Create 3 columns this time of 293px in width and a margin between them of 40px. Before adding content, download the IconSweets2 icon set which is in my opinion the best icon set from the internet and choose 3 suggestive icons of 64×64px from the set. In the first column, add an icon, a title and some descriptive text of a service. For the icon, change that purple gradient with a gray one and reduce the opacity of the layer until you obtain a light gray icon. They look better if are lighter.

Now build 2 more boxes following the same steps. Just replace the icon with another one and make sure to leave a space of 40px between columns.

Now let`s build a footer. Draw a horizontal line like you did at header and position it at 40px under the “Services” boxes. This line will be the separator between content and footer. The footer will be divided in 3 boxes, exactly like “What We Do” widget. The first one will display latest tweets, the second one latest news and the last one some links.

Select the Horizontal Type Tool(T) and type in a title and some content which imitates a tweet. Duplicate the tweet in order to have 2 tweets. You can add as many as you want.

Now build the second column by adding a title, a small post thumbnail, a post title, some metadata(date, author).

Split the last column into 2 small columns. For each one add a title and some links. I set the line-height of the links to 24px, to give them some space.

The final touch will be represented by the copyright details. Add again a separator line, leave 40px at the top and 20-25px at the bottom of the line and type in some copyright text like “Copyright © 2011 – Template. All Rights Reserved”. Make sure to center the text after adding it.

With this final touch, the design of the template is finished and ready to be converted into HTML. If you read this line this means that you covered the tutorial and I thank you! If you have any questions, drop us a line and we`ll be happy to reply to you! Until then, take a look at what we`ve done today!(Click for bigger preview).

50 High-Resolution and Free Tech Photoshop Brushes

Madalin Tudose — Wed, 28 Dec 2011 08:18:58 +0000

Photoshop brushes are very important for a graphic designer because they can save a lot of time…nowadays, when people put accent on efficiency, being prepared is a must! You should frequently update your photoshop toolkit with high-quality and various brush sets, in order to stay close to the design trends which are changing from a day to another. I want to help you and therefore, I bundled up 50 awesome tech brushes, ready to be added to your photoshop collection!

How to Create a Paper Sticky Note in Photoshop

Madalin Tudose — Fri, 23 Dec 2011 07:13:21 +0000

In this Photoshop tutorial I`m going to show you how to design a nice and clean paper sticky note. Sticky notes are very useful when you`re building creative website layouts for example. Combined with other elements, the result might be stunning.

What we`ll be doing today:

As usually, first step is to open Photoshop and create a new document of 600×400px. Set the background to transparent.(I use it as a default setting when working in Photoshop. I find it being a nice way to start.).

A layer has been automatically created. Before starting to work on the layer, let`s make sure the layer will be fully editable. The technique used is considered to be a non-destructive technique. The first layer will be used as background and I want to make it looking like a wall. This means I`ll apply both smart filters and blending options. Grab the Paint Bucket Tool(G) and paint with white the empty canvas.

Now, go to Filter->Convert for Smart Filters to convert the layer for filters. Stylize the layer by adding a “Color Overlay” style. Set the color to #e3e3e3 and change the Blend Mode to Multiply.

Go to Filter->Noise->Add noise and add a monochromatic gaussian noise of 4px. Notice that the layer has received a new layer effect category called “Smart Filters”. Now, you can change anytime the color of the background and the noise.

The background looks like this:

Let`s build the sticky note. Grab the Rectangle Tool(U) and draw a rectangle of 300×250px. Again, make sure to work in “Shape Layers” mode to ensure that the design will be editable after finishing it.

Add some layer styles to the paper shape like color overlay and stroke to make it look like a real paper.

Grab the Line Tool(U) and with a weight of 1px, draw 7 horizontal lines and then color them in a dark yellow(#f2f0df). Arrange them at 30px distance one of each other.With the same Line Tool(U) draw 2 vertical lines this time(color #ef8b8b) and arrange them on the left side of the shape, at a distance of 5px one of each other. Now our design really looks like a real paper.

To make it looking like a real sticky note, the design needs a sticky tape. The process is simple. We`ll use the Pen Tool(P) to create a sticky tape shape. Grab the Pen Tool(P), make sure to be in “Shape Layers” mode in order to create a new shape and layer, set the color to white and draw a shape like in the image(to draw straight lines, hold Shift key while clicking):

The shape still doesn`t look like a real sticky tape. To make it looking real, reduce the opacity of the layer to 60% and add a smooth drop shadow of 1px.

To make it even more realistic, rotate a little bit the tape.(Edit->Transform->Rotate). Now, the design looks really good.

Let`s add a nice shadow at the bottom of the paper. With the Pen Tool(P) draw under the paper layer a shape like in the image.(Make sure to draw a little bit outside the corner of the paper).

Convert the new layer created for Smart Filters(Filter->Convert for Smart Filters) and add a gaussian blur of 2px. Reduce the opacity of the layer to 25% and you`ve just obtained a clean shadow. Duplicate the layer, flip it horizontally(Edit->Transform->Flip Horizontal) and position the second shadow under the bottom-left corner of the paper. And this is how you design clean and smooth shadows for any type of shapes.

Let`s add a final touch, some text inside the paper. I used a beautiful calligraphic text-font called “Daniel”. Download it and with a clean blue, type in something interesting.

With this final touch, our paper sticky note is done. Take a look at what we`ve done today!

50 Super Cool Photoshop Actions You Might Want to Use

2Expert — Tue, 20 Dec 2011 05:20:36 +0000

Using Photoshop actions can make your life easier and help you edit your photos more quickly. Basically, actions are nothing more than a series of normal Photoshop operations recorded so you can run them in sequence quickly, without having to remember just what steps to do, and in what order.

Whenever you perform a repetitive task in Photoshop, you can save yourself time and effort by using actions. Here we tried to list 50 awesome actions for your reference

1. The Yummy One

2. Black N White Actions

3. Vintage Effects

4. Portrait Action

5. Vintage Color Effect

6. Wedding Theme Action

7. Dream Blur Action

8. 2 Strip Tri-Color

9. Photoshop Action 2

10. Deviant Action2

11. Fake Depth of Field Instantly

12. Dazzle Effect 3

13. Dazzle Effect 4

14. Soften Skin Effect

15. Five Powerful Colors

16. Clouds Effects

17. Create Awesome Vintage Effect

18. Intensify Your Eyes

19. Action Set 1

20. 50 Post work Actions

21. Vintage Effect

22. Gritty HDR Photoshop Action

23. Candy Girl Vintage Action

24. Sharp Action

25. Page Curl Action

26. Gum Dichromate print

27. Silk Smooth

28. Outer Space Action

29. Sunny Action

30. Comic Photoshop Action

31. Cool Action Set

32. Pencil Draw Photo Shop Action

33. Vignette Effect Action

34. Nature Actions

35. State Fair

36. Infrared Action

37. Draw Effect Photoshop Action

38. PS Action For Photoshop Retouching

39. Postage Stamp Action

40. Cyanotype Effect

41. Enhanced Sepia

42. Painting Effect Action

43. Lith Print Action Hard Boiled

44. Lomography Photo Action

45. Modelise Action

46. Action Contagious

47. Double Sketch Effect Action

48. Other Side Action

49. Warm Up Your Photos

50. Color Effect

50 Free And Useful Web UI Elements Psd Files For Download

2Expert — Sat, 17 Dec 2011 06:33:04 +0000

The range and diversity of free available PSD files is truly enormous and is increasing day by day as some of the talented designers are sharing their new and high-quality PSD files. Finding a high-quality PSD file not only does save the time that otherwise will be consumed in searching on the internet but also makes the work much more easier.
Here we are sharing a collection of some high-quality and Free Web UI Elements PSD files for your download. We hope this list would be of great assistance for the designer. So, learn from the examples and do it even better!

Webdesign pack

Flex 3 Stencil

PSD Button collection

Free PSD Price Box Templates

Free PSD Media Player

Windows 7 Taskbar

Turquoise PSD

Button Template

Apple Style Navigation Menu

Free Shopping Cart Icons

12 Free Weather Icons

4 Free Globe Icons

10 Free Avatar Icons

Four colour web elements

5 Free PSD Shiny Price Badges

Functional Buttons

Slider Boxes

Free Web UI Element Pack

Free 5 PSD Clock Icons

Free PSD Progress Tracker Bars

74 Free PSD Board Letters

iPad GUI Kit in PSD Format

Free Video Player Interface (PSD)

Greyscale web elements

3 Shadow Pockets

Video Player UI

Free 5 Credit Card Icons

8 Free Subscribe Badges

Business People Silhouettes

Mail Feedback Form

Webdesigner kit

4 Curled Pages

4 Free 30 Day Money Back Guarantee Badges

Web Buttons

4 Free Stickers

Gold & Silver Effect Styles

Grey buttons for WEB

Colorful Buttons

PSD Media Buttons Set

Twitter Icons .PSD

Email Guys Icon Set

Free 8 3D

Grunge / Gothic Navigation Menu

10 Free Grunge Frames

Free Layered House Icon

Dark GUI Kit

Video Player

Mini UI Elements

Webdesigner Toolkit

Facebook GUI free PSD resource

40 High Quality and Free Multimedia PSD Files

Madalin Tudose — Fri, 16 Dec 2011 06:30:18 +0000

Nowadays people enjoy listening to their favorite songs and watching at their favorite videos online…websites in this niche are very popular because we all love listening to music and watching at funny stuffs on the internet. But web designers are literally fighting to create beautiful and functional player skins, just to offer you a better experience when listen and watching videos. Therefore, I`m showcasing 40 great free Photoshop resources of multimedia skins, elements and buttons ready to be coded into awesome apps!

50 Awesome Abstract Photoshop Brush Sets

Madalin Tudose — Mon, 12 Dec 2011 07:19:12 +0000

Abstract Photoshop Brushes are simply stunning. One single pack can blow away and upgrade a normal and simple design to a new level of awesomeness. Have you ever tried to create a sci-fi photo manipulation but you felt that something is still missing? Well, these brush sets might be what you need! Browse this showcase and enjoy no less than 50 great brush sets ready to be downloaded and used!

50 Best Metallic Textures You May Want to Use

2Expert — Wed, 07 Dec 2011 23:48:43 +0000

Photoshop is such an awesome tool which provides everything a designer need. It allows you to create your own textures, brushes, etc… Its moreover like a market place where many vendors will be there to provide you tools to get your work done. Photoshop market place has million of free and paid brushes, textures and filters available.

Here we gathered 50 best metallic textures for your future designs.

1. Rusted blue painted metal sheet

2. Damaged metal texture

3. Steel texture

4. Fully damaged texture

5. Blue and Yellow with Rust

6. Damaged Paint

7. Interesting Rust texture

8. Yellow Metal base

9. Lots of chains texture

10. Metal Grid

11. Painted metal texture

12. Shining Steel texture

13. Rusted Bolts

14. Pealed Paint

15. Heavy Rust

16. Metal Rods

17. Metal texture with cracks and Scratches

18. 3D Tiling Preview

19. Heavy Paint Peal

20. Flat metal texture

21. Pipes texture

22. Yellow paint metal texture

23. Metal floor

24. Crackles Galvanized

25. Metal painted Scratches

26. rust heavy paint cracked seam weld

27. Metal hole cut damaged

28. Metal plate roll up Bare

29. Tiled metal texture

30. Metal texture with holes

31. Heavy metal pipe

32. Thick Scratches

33. Heavy metal Base

34. Smooth metal textures

35. Copper metal texture

36. Heavily scratched Metal

37. Stone like metal texture

38. Interesting Metal texture

39. Washed metal texture

40. Copper metal batch texture

41. Metal floor 2

42. Abalone metal texture

43. HD Metal texture Package

44. Metal package10 images

45. Aluminum Foil Texture package

46. Gold foil metal texture

47. Metal package 9 photos

48. Metal Package 3

49. Chain Package

50. Metal floor textures

50 Free PSD Files for Mobile Design and Development

Madalin Tudose — Mon, 28 Nov 2011 07:59:30 +0000

Smartphones are more and more present in our lives thanks to their purpose: to help us in our day-by-day activities…The number of mobile apps is growing fast and you can find now an app for almost everything. Need a better sleep? Get an app…do you feel like there`s room for more productivity in your activities? get an app…designers are struggling to deliver professional interfaces but yet still friendly just to use the app with pleasure…I want to come in designer`s help by presenting 50 free resources for mobile design and development!