WebStockBox » Photoshop Tutorials

Free High Quality PSD Files For Designers

Tom — Fri, 11 Nov 2011 15:40:36 +0000

365psd is a huge resources for high quality of UI design, web design, logo, icons, button and so much more. If you’re a designer looking for free resources for use in your design projects or you want to share your own resource, this place is the right place for you.

The PSD files at 365psd are free for both personal and commercial use. That means any PSD you download can be reused in any project without worrying about licensing.

Link : 365psd

Free iPhone and IPad GUI PDF File

Tom — Thu, 09 Jun 2011 11:20:36 +0000

I really like these high quality iPhone and iPad GUIs, they are look so real. I use these GUIs for design some iOS app that I plan to make in the near future. If you’re designing an iOS app, these GUIs can save your time. These iPhone and iPad are made for Photoshop.

Link : iPhone 4 GUI PSD (Retina Display)
Link : iPad GUI PSD

Photoshop Guide For Web Designer

Tom — Tue, 29 Mar 2011 00:38:53 +0000

This simple website has many useful guides for all web designer on how to design and organize layers of your design using Photoshop. I found it helpful and want to she it with you.

The Photoshop Etiquette Manifesto for Web Designers is a list of helpful and *subtle* suggestions to organize Photoshop Documents, making the transfer of them less painful.

If you’re new to Photoshop and want to learn how to use Photoshop in the right way. This site will give you examples of what you should do or shouldn’t do.

Link : http://photoshopetiquette.com/

Beginner Guide to Design and Code a Flexible Website

Tom — Wed, 26 May 2010 18:04:31 +0000

New to web design? If yes this is the right tutorial for you.

In this tutorial, we’re going to be designing and coding a simple blog-style web-page. We’ll pay special attention to making our design flexible and accessible by using clean and simple XHTML and CSS. This tutorial is aimed at beginners, and anyone looking to improve the accessibility of their web designs.

Link : View the tutorial

Free iPad GUI PSD File For Photoshop

Tom — Thu, 25 Feb 2010 19:54:38 +0000

iPad is a new product from Apple, it’s a tablet computer that has a very good user interface. If you’re a designer or developer, you should download this free iPad GUI for designing your app inteface in Photoshop. And the iPhone GUI is also available for download.

Link : iPad GUI
Link : iPhone GUI

Design Web Layout with Photoshop and Convert to WordPress Theme (Video Tutorial)

Tom — Mon, 14 Dec 2009 04:14:02 +0000

And again… good video tutorials from Css-Tricks, This is a very useful tutorial series, one tutorial you’ll learn three things in web development progress. The three steps as I mentioned are about design and convert your design to web code and then template.

You’ll learn from this tutorial on how to create a web layout using Photoshop, convert to XHTML/CSS and then convert your files to WordPress theme.

I really like these tutorials even I knew how to design web layout using Photoshop and convert it to WordPress theme, some techniques are useful to me.

The tutorials are in three parts and you can download the video too.

Part 1: Photoshop Mockup (59:50 min)
Part 2: HTML/CSS Conversion (01:11:10 min)
Part 3: WordPress Theme (50:59 min)

Create WordPress Theme with Photoshop Plugin “Divine”

Tom — Tue, 17 Nov 2009 16:26:17 +0000

If you want to create a wordpress theme and don’t know how to code, this tool will help you convert your PSD file to WordPress theme.

Divine is a plugin for Photoshop for covert your design to WordPress theme. You need no special extended knowledge about HTML, no special skills in coding, basics are completely enough to convert PSD to WordPress.

Now, this tool is in beta and available for free download. checkout the link below for more info.

Link : www.divine-project.com

30 Cool Photoshop Text Effect Tutorials

Tom — Thu, 08 Oct 2009 15:54:55 +0000

Various styles of cool text effects created by using Photoshop that collected by Six Revision. Luckily, there are tutorials that we can learn how to create them all.

The tutorials are very good quality, easy to follow and come from top Photoshop tutorial sites.

Personally, I like a “Gold Text Effect” and “The sugar Bag Effect”. If you’re looking for some cool text effects you should take a look.

Link : 30 Cool Photoshop Text Effect Tutorials

30 Top Photoshop Tutorial Websites For Web Designers

Tom — Tue, 22 Sep 2009 19:42:38 +0000

Top 30 amazing photoshop tutorials site you should checkout.

Link : 30 Top Photoshop Tutorial Websites For Web Designers

22 Professional Photoshop Image Enhancing Tutorials

Tom — Sun, 24 May 2009 20:19:01 +0000

Adobe Photoshop is the premier tool for digital artists when it comes to professionally enhancing images. Whether you’re a beginner just learning the ropes or an advanced user looking for unique techniques to add to your Photoshop arsenal, you’ll find some tutorials here that you’ll surely want to bookmark.

In the article I found from sixrevisions.com, you’ll discover plenty of tutorials that deal with enhancing images, adding unique and impressive effects, and recreating digital replications of popular traditional photography techniques.

" />

Topics
1. Cross Processing 2. Lomo Photography 3. HDR Photo Effect 4. Gritty Effect 5. Dave Hill Look Photo Effect 6. Soft Focus Photography 7. Movie Photo Effect 8. Extreme Contrast Photo Effect 9. Infrared Photo Effect 10. Soft Focus & Glow Effect 11. High Pass Filter	12. Vintage Photo Effect 13. Split Toning Black & White Effect 14. Change Hair Color Tutorial 15. Coloring Effect Tutorial 16. Light Effects 17. Snow Photo Effect 18. Streams Of Dusty Light 19. Photo Color Correction 20. Enhance Skin Tutorial 21. Gaussian Blur 22. Tilt-Shift Miniature Fake Technique

Link : 22 Professional Photoshop Image Enhancing Tutorials

Free Download Photoshop Brushes and Patterns

Tom — Fri, 22 May 2009 19:06:25 +0000

brusheezy.com is where you can browse ton of photoshop brushes and patterns for free and they add new everyday.

If you’re a web designer and you want cool photoshop brushes or patterns for web design or other design projects, you can browse from their database.

And if you create your own brushes or patterns, you can submit your work into their database too.

Link : Free Download Photoshop Brush and Pattern

Creating Coverflow Style Images in Photoshop

Tom — Fri, 27 Mar 2009 22:08:33 +0000

If you’re using iPod, iPhone or iTunes as your music player, they are all display album cover in coverflow style.

This is a video tutorial on how to use Photoshop to convert a lousy 2D image into a fancy-schmancy iTunes-style image with perspective.

In the video tutorial will tech you how to create fading shadow and how to transform image. You can view the video tutorial in full screen mode for better view.

Photoshop Tutorial: Creating a Cute Scotch Tape

Tom — Mon, 16 Mar 2009 18:42:21 +0000

I’ve seen many websites and blogs use this Photoshop technique to decorated their web templates and photos. I think, It’s cute and looks really good when they stick it on their photos on their blogs.

If you want to create your own scotch tape, this is the right Photoshop tutorial for you.

I found this cute Photoshop tutorial on photoshopstar.com that you’ll learn how to create a cute and fancy scotch tape, check out the link below for the tutorial and hope you like it.

Link : View the tutorial

Creating a Favicon For Your Web Using Photoshop and Dreamweaver (Video Tutorial)

Tom — Thu, 26 Feb 2009 19:45:05 +0000

In this video tutorial, you’ll learn how to create a favicon for your website. The favicon is a little icon that will show on the address bar when you surf the web that have their own favicon.

The tutorial will show you from start using Photoshop to create a favicon, then switch to Dreamweaver to create the code for displaying the favicon for your website. For HD version of the tutorial, check out the link below.

View in HD version
Tools For Creating a Favicon Online

What’s favicon?

From Wikipedia, the free encyclopedia
A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16 pixel square icon associated with a particular website or webpage. Browsers that provide favicon support typically display a page’s favicon in the browser’s Address bar and next to the page’s name in a list of bookmarks.

Convert a Design From PSD File to HTML (Video Tutorial)

Tom — Tue, 24 Feb 2009 19:33:19 +0000

The most popular post in this blog is how to convert PSD to CSS/XHTML, today I found another video tutorial on how to convert Photoshop PSD file to HTML on net.tutsplus.com. In the video, you’ll learn the techniques to convert your layout to HTML using Photoshop with simple web layout for easily learning.

Link : View the video tutorial

Create a Modern Dark and Sleek Button

Tom — Sat, 21 Feb 2009 16:38:00 +0000

One of the popular post on this blog is about how to design a good looking web layout including how to design stunning menu and buttons.

This one is another great button design for your web layout that I found on deviantart.com. You’ll learn from the tutorial on how to create a nice looking modern-dark-sleek tech style button using Photoshop or you have not much time, you can download a PSD file that you can instantly edit in Photoshop and apply for your web design or graphic design project. Check out the links below for more info.

Link : View the Tutorial
Download PSD File

40 Useful Photoshop Web Layout Tutorials

Tom — Fri, 06 Feb 2009 15:42:23 +0000

Do you want to learn to create web layout using Adobe Photoshop? This is a collection of 40 high-quality tutorials on creating web layouts from scratch using Photoshop that I found on Sixrevisions.

The article contains a copious variety of tutorials to help you learn and master the various techniques involved in creating beautiful web layouts. You don’t need to know much about Photoshop. The tutorials are well explained, easy to follow and you can download some layout at no cost.

Link : 40 Useful Photoshop Web Layout Tutorials

Endium – Web 2.0 Style Menu (Free PSD File)

Tom — Tue, 27 Jan 2009 18:35:17 +0000

Very nice design web 2.0 menu. Free download PSD file that you can edit in Photoshop, and use in your web design project.

Download .PSD file
Link : Endium – Web 2.0 Style Menu

Plastic Style Web Menu

Tom — Wed, 21 Jan 2009 19:04:27 +0000

Beautiful plastic style web menu I found it on Designwar and I really like it. You can download PSD file for editing in Photoshop for free.

Download
Link : designwar.net

Creating a Gradient Web Background

Tom — Mon, 05 Jan 2009 00:57:34 +0000

This video shows you a technique on how to create a gradient web background. The tutorial started with creating a gradient image in Photoshop, then shows you how to create a gradient web background in Dreamweaver CS3.

Watch the tutorial in HD version

Pos Free Photo Editor

Tom — Fri, 28 Nov 2008 09:42:24 +0000

If you want a free photo editor for editing image for your website or blog, Pos Free Photo Editor is a good one.

Pos Free Photo Editor is a lite version of Pos Photo Editor, it’s simple, easy to use and it has all functions that you need to enhance your photos at no cost.

Download and try it yourself. Available for windows Xp/Vista

Link : Pos Free Photo Editor

Learn to Create Old Polaroid Photos In Photoshop

Tom — Sat, 01 Nov 2008 20:08:53 +0000

This is a really nice Photoshop tutorial that I found on magnusfx.com. It’s about how to turn your image to and old image easily, and the result looks really nice. I think you can apply this photoshop technique to your web design.

Link : Learn to Create Old Polaroid Photos In Photoshop

Photoshop Tutorial – Design a Light Lime and Blue Navigation

Tom — Fri, 24 Oct 2008 19:47:37 +0000

I found this Photoshop tutorial on coregfx.org and found that it’s interesting and I want to share the tutorial with you. This tutorial is about how to design a nice web navigation that you can see in the image below.

Link : View Tutorial : Design a Light Lime and Blue Navigation

Creating A Glossy Navigation Bar Using Photoshop

Tom — Wed, 15 Oct 2008 19:21:55 +0000

In this tutorial from magnusfx.com, you’ll learn how to create a nice glossy web navigation bar using Adobe Photoshop and you also can download a free PSD file of this tutorial for instantly use in your web design project.

Link : View the tutorial – Creating A Glossy Navigation Bar Using Photoshop
Download PSD file

Photoshop Tutorial – Design a Professional Dark Web Header

Tom — Fri, 03 Oct 2008 10:12:56 +0000

This Photoshop tutorial from idotutorials.com, you’ll learn how to design a professional dark web header with nice navigation bar using Adobe Photoshop, and you can also download the file in .psd format.

Link : Photoshop Tutorial – Design a Professional Dark Header

3D Web Design Effect in Photoshop

Tom — Wed, 17 Sep 2008 17:26:11 +0000

In this tutorial, will show you some very easy techniques, using gradients and layer styles, that we can use to produce nice subtle 3D effects in our web designs

3D Web Design Effect in Photoshop from godonholiday on Vimeo.

View this video in HD version on Vimeo

Slicing Web Layout With Photoshop Video Tutorial

Tom — Wed, 06 Aug 2008 08:08:26 +0000

If you design your web layout using Adobe Photshop and want to learn how to convert or slice your web layout into a HTML and images files that you can use Adobe dreamweaver to edit contents, add menu and publish to the internet, this video tutorial is right for you.

In this photoshop video tutorial from tentonbooks.com, you’ll learn how to slice your web layout with adobe Photoshop.

Tutorial Part 1
Tutorials Part 2

Free Photoshop PSD Files for Web Design (badges, stickers, cubes, pushpins…)

Tom — Fri, 13 Jun 2008 21:58:54 +0000

Nice and free Photoshop collection of PSD files for web design work in one package.

Deluxive Creative Pack 001 was designed by Deluxive. In the package has many web 2.0 style PSD files for web design sush as badges, bubbles, cubes, smokes, pushpins, post it note, photo frame, date and more…

You can download and use these PSd styles for free as you wish.

Download Deluxive Creative Pack 001
Link : Free Photoshop PSD File for Web Design

Photoshop Tutorial – Creating Web 2.0 Style Navigation Bar

Tom — Mon, 09 Jun 2008 23:11:19 +0000

Learn to create a nice web 2.0 style navigation bar using Adobe Photoshop in this tutorial from pscloud.com

Link : Photoshop Tutorial – Creating Web 2.0 Style Navigation Bar

Photoshop and Flash Integration Video Tutorial

Tom — Mon, 02 Jun 2008 15:51:10 +0000

If you want to work with Photoshop and Flash integration by importing Layered PSD file from Photoshop to your Flash canvas, you’ll learn the technique in this video tutorial.

In this video, you’ll learn about importing fully editable, fully layered Photoshop files directly into Flash. Then you’ll see a few other nifty techniques for gettin’ over into Flash, including the new PSD Importer Options.

Link : Photoshop and Flash Integration Video Tutorial

Converting Photoshop PSD To XHTML/CSS Video Tutorial Part 2

Tom — Tue, 22 Apr 2008 07:27:58 +0000

As my Previous post Converting Photoshop PSD To XHTML/CSS Video Tutorial (Part 1) from Css-trick.com, now Css-tricks released new video tutorials about this technique again because good feedbacks on video tutorial part 1.

In these new videos tutorial, you’ll learn from a new web layout and more techniques from photoshop slice techinique to how to code web page in XHTML and CSS in text editor.

The videos are in good quality and you can learn from these videos easily.

The video tutorials are in 3 episode

Video tutorial episode 1 (22.03 minutes)
Video tutorial episode 2 (25.45 minutes)
Video tutorial episode 3 (23.48 minutes)

Free Web 2.0 Layer Styles For Photoshop

Tom — Mon, 24 Mar 2008 10:05:52 +0000

This is a collection of 131 web 2.0 layers style for Adobe Photoshop. You can use this style for your graphic design work or web design.

The layers style will help you save time for your work. You just simply choose styles that you like and apply to your work and all done.

You can download and use this style at no cost

Installation

Download and unzip file.
Open Adobe Photoshop.
Go to Edit > Preset Manager.
At Preset Type, choose Styles and click load.
Browse to your file, then click load, all done. You’ll see new styles in your style palette.

Link : Free Web 2.0 Layer Style For Photoshop
Download Web 2.0 Layer Style

Copy and Paste Image From Photoshop to Dreamweaver Video Tutorial

Tom — Fri, 14 Mar 2008 05:55:29 +0000

In this video tutorial, you’ll learn how to use copy and paste image from Photoshop to Dreamweaver and learn a basic image tool of Dreamweaver.

This is a video tutorial from Adobe design center, great source for learn how to use adobe products.

Link : Copy and Paste Image From Photoshop to Dreamweaver Video Tutorial (03.07)

You can also view this tutorial as HTML format

Download : Source files (10.7 MB)

Design a Website Using Photoshop and Dreamweaver Intregation Video Tutorial

Tom — Wed, 05 Mar 2008 21:46:25 +0000

Layers Magazine has released a new video tutorials on how to design a website using Photoshop and Dreamweave together.

Photoshop and Dreamweaver are the tools that many web designers use for design their website. You’ll learn some good Photoshop and Dreamweaver intregation techniques from this video tutorial.

In this tutorial, you’ll learn how to slice photoshop web template file and convert to HTML file, then you can use Dreamwaver to customize and add your contents.

View Video Photoshop and Dreamweaver Intregation
Video format : Flash Video

Converting Photoshop Web Template File To HTML/XHTML/CSS Web Page File Video Tutorial

Tom — Tue, 19 Feb 2008 09:46:10 +0000

In these videos tutorial, you will learn how to convert photoshop web template file in .PSD to HTML file and Css file.

These videos are form css-tricks.com. The video tutorials have 3 parts and they’re great video tutorials, you’ll learn how to convert file from photoshop to HTML and Css file and how to code Css file at the same time.

The videos tutorials are in quicktime format
Video tutorial 1 (10:10 minute)
Video tutorial 2 (17:10 minute)
Video tutorial 3 (31:53 minute)