blogfreakz.com » Photoshop tutorials

Facebook GUI (.psd) & Facebook Application (Omnigraffle)

Mufti Ali — Thu, 22 Jul 2010 02:33:12 +0000

Facebook GUI (.psd)

Surgeworks made a Facebook Graphic User Interface (FBGUI) resource kit for Photoshop to make our work easier. The kit brings the Facebook vector icon and logo. Also, since the focus of this resource are the UI elements, it brings a main window with the header, menu and the chat window for you to set up your realistic mock-ups. Cannot forget to mention all the modal components, comment boxes, buttons, message boxes, tabs, etc.

Facebook Application (Omnigraffle)

This is a pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

Facebook GUI (.psd) : http://surgeworks.com/blog/design/facebook-gui-free-psd-resource
Facebook Application (Omnigraffle) : http://www.graffletopia.com/stencils/410

Incoming search terms for the article:

How to Create Dynamic Motion Wallpaper in Photoshop

Ahmad Hania — Thu, 01 Jul 2010 18:17:05 +0000

Many of us come across wonderful high end wallpapers or website backgrounds and wonder how it is done or how hard can it be. In this detailed Photoshop tutorial, you will learn how to create a dynamic motion effect wallpaper or website background by experiencing and using only three Photoshop Filters in Six easy to follow steps.

Step 1: Creating New File

We are going to start by creating a new file using Photoshop CS4. After opening Photoshop go to File >> New… or you can just use Ctrl+N. Use the images below for new file settings. You can just set the width and height of your choice but I am using 1440px*900px for this tutorial.

Step 2: Choosing Colors

Now we have to choose our colors that is going to be used as a theme of our wallpaper. We need two colors Foreground Color and Background Color. Set your foreground color and background color as in the images below.

I chose these two colors for this tutorial but again you can test other colors and test the results, but for the best results I recommend you choose two colors from the same tone but with different intensities with the darker color as foreground and the lighter color as background.

Step 3: Creating the Effects – Clouds

So, now after that we choose the colors for our wallpaper we will create the first effect. Go to Filter >> Render >> Clouds as below.

You should have a result as in the image below.

Step 4: Creating the Effects – Stained Glass

After creating our base effect now need to apply the next effect, go to Filter >> Texture >> Stained Glass… and use the values 23 for Cell Size, 3 for Border Thickness and 5 for Light Intensity as shown in the image below. You can test other values for different results.

You should have a result similar to the image below.

Step 5: Creating the Effects – Motion Blur

So, now we are going to apply our next and final effect, go to Filter >> Blur >> Motion Blur… and set the Angle value to 68 degrees and the Distance value to 500 pixels as in the images below.

Now, if you have followed the tutorial step by step then you should have a result similar to the final image below (Click on the image for the full resolution image).

Step 6: Conclusion

I created this tutorial to show you how easy to create wonderful wallpapers or website backgrounds by applying a few filters. I hope that you can all create better designs using filters and testing with different colors, filters and settings.

Incoming search terms for the article:

5 Best Web Design tutorials on november 2009

Mufti Ali — Thu, 03 Dec 2009 22:03:19 +0000

The selections todays especially from designm.ag who created online template layout and sixrevisions who created band website layout. This monthly round up come from sixrevision, designm.ag, gravpedia,circleboxblog and tutoriallounge. As alaways PSD files available for download

Design an Online Template Shop Layout Using Photoshop

How to Design a Band Website Layout in Photoshop

Design a Modern and Sleek Web Design Mockup in Photoshop plus a Free Template!

Corporate Business Website Design Tutorial (Free PSD file)

Create a gritty website layout

Incoming search terms for the article:

8 Best Web Design mockup tutorials on october 2009

Mufti Ali — Mon, 02 Nov 2009 17:55:09 +0000

There is a nice selection of sites in todays Monthly Web Design mockup tutorials, especially from 1stwebdesigner and sixrevisions who have both created very clean and stylish sites . This sort of minimalism is perfect for conveying information quickly, as you might see on vinyl banners or promotional mugs.

This roundup will not completed without minimalis design (designm.ag) my favorit one, wordpress design process (blog.spoongraphics) this is awesome, nature inspired layout design (grafpedia), magazine wordpress themes and another great Looking Web Layout in Photoshop. Most of theme PSD files also available for download.

1st Photoshop Web Design Professional Layout Tutorial

Post date: October 14th, 2009
View tutorial

Design a Green Corporate Layout in Photoshop

Post date: October 19th, 2009
View tutorial

Design a Minimal and Modern Portfolio Layout with Photoshop

Post date: October 29th, 2009
View tutorial

Wordpress Website Design Process for IT-IS Ltd

Post date: October 26th, 2009
View tutorial

How to Make a Creative Blog Layout

Post date: October 16th, 2009
View tutorial

Create a nature inspired layout in photoshop

Post date: October 19th, 2009
View tutorial

Design a car dealer website layout with Photoshop

Post date: October 6th, 2009
View tutorial

Create a Magazine Wordpress Theme from Scratch in Photoshop

Post date: October 15th, 2009
View tutorial

Incoming search terms for the article:

9 Best Web Design mockup tutorials on september

Mufti Ali — Wed, 30 Sep 2009 00:26:59 +0000

Continuing monthly feature on blogfreakz, we will share with our reader the best web design and photoshop mockup tutorials on september. You can send us a recommendation for next month post by clicking here: Submit News.

Design a Transparent Website Layout in Photoshop

Post date: September 1, 2009
ViewÂ tutorial

Design a Magazine style Wordpress layout + Offering the coded theme-MagaBlue

Post date: September 1, 2009
ViewÂ tutorial

Create a Web Layout with 3D Elements using Photoshop

Post date: September 3rd, 2009
ViewÂ tutorial

Design a creative design studio layout

Post date: September 2nd, 2009
ViewÂ tutorial

How to Create a Dark and Sleek Blog Design in Photoshop

Post date: September 7th, 2009
ViewÂ tutorial

How to Create a Unique Colorful Site Layout

Post date: September 4th, 2009
ViewÂ tutorial

Create a wordpress interface in Photoshop

Post date: September 22nd, 2009
ViewÂ tutorial

Design a Clean Portfolio Site in Photoshop

Post date: September 28nd, 2009
ViewÂ tutorial

How to Make an Impressive Blog Layout in Photoshop

Post date: September 28nd, 2009
ViewÂ tutorial

Incoming search terms for the article:

8 Excellent Web Design mockup tutorials on August

Mufti Ali — Tue, 08 Sep 2009 05:19:21 +0000

This post is summary of web design mockup tutorials on augustÂ periode.Â This detailed tutorials using photoshop and adobe illustrator. Featured authors including Chris Spooner, Tyler Denis,Steven Snel,Matt,Ravzan and many more. PSD file also available to download on this tutorial. I hope you enjoy this post.

1. Create A Forum Layout Using Photoshop

Post date: August 4, 2009
ViewÂ tutorial

2. How To Create a Green Grunge Web Layout

Post date: August 10, 2009
View tutorial

3. How to Create a Clean Blog Design with Photoshop

Post date : August 12, 2009
View tutorial

4. Design a Sleek and Modern Hosting Layout

Post date:Â August 14, 2009
View tutorial

5. Create An Orange Web Layout Using Photoshop

Post date: August 14, 2009
View tutorial

6. Business Layout #6

Post date : August 22, 2009
View tutorial

7. Design a Stylish Blue Blog Theme in Photoshop

Post date: August 24, 2009
View tutorial

8. Create a Fun Illustrated Toy Site Design in Photoshop

Post date: August 31, 2009
View tutorial

Incoming search terms for the article:

10 excellent PSD to HTML/CSS tutorials

Mufti Ali — Tue, 25 Aug 2009 16:48:14 +0000

Excellent tutorials on converting photoshop mockup to HTML/CSS. These tutorials is step by step process which are easy to follow.

How to Convert a Photoshop Mockup to XHTML/CSS

Follow this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.

view tutorial

Design a Beautiful Website From Scratch

Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I’m going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail.

view tutorial

Web Design Layout #9

Good afternoon, welcome to another tutorial by the hv-designs team in this tutorial il show you how to create a web design layout, currently the 9th one in our tutorial database.

view tutorial

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

Today I’m going to take you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!

view tutorial
view demo

Portfolio Layout #10: Learn To Code It

Hello, welcome to the coding tutorial of the portfolio #10 layout. In this tutorial il explain the steps to take in slicing and coding the layout. Before attempting this tutorial i highly suggest you create the layout before hand and have it ready.

view tutorial

How To Build Your Own Single Page Portfolio Website

A great looking portfolio site is crucial for any designer to instantly present their work to potential clients or employers. A simple, single page site can do this effectively by displaying three key features of large header with short introduction, examples of your work and methods of contact all in one, extremely browsable page. Let’s take a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.

view tutorial

The Design Lab: PSD Conversion

Hello, welcome to another layout coding tutorial. In this tutorial il show how to code my design lab layout tutorial. Make sure you have your PSD ready made in photoshop.

view tutorial

Coding The Creative Design Layout

Welcome, in this tutorial il teach you how to convert my “creative design layout” into a working CSS/HTML valid website.

view tutorial

PSD to CSS to Wordpress PT.2

Hello welcome to part #2 of the “mywordpress” tutorial, today were going to be converting our PSD file into a working CSS template ready for when we convert it over to wordpress.

view tutorial

PSD > HTML/CSS

Firstly open up photoshop and create a new document 900 x 845 pixels, fill your background layer with the color white if it isnt already. For our background i also want to add some stripes to it so create a new document 4 x 4 pixels with a transparent background. Zoom in 1600%, select the “pencil” tool and a 1 pixel brush, create 4 squares like this.

view tutorial