Web Design Blog | Web Design Fan | Resources for Web Designers and Graphic Designers » Tutorial http://webdesignfan.com Web Design Fan is a blog focused on the beautiful and interesting world of web design and development. We post tutorials, review web tools and services, give away graphics, and deliver all of the information web designers need the most. Mon, 21 May 2012 11:00:45 +0000 en hourly 1 Samsung Galaxy S Photoshop Tutorial + Free PSD http://webdesignfan.com/samsung-galaxy-s-photoshop-tutorial-free-psd/ http://webdesignfan.com/samsung-galaxy-s-photoshop-tutorial-free-psd/#comments Tue, 24 Jan 2012 20:39:09 +0000 Muhammad Wildan http://webdesignfan.com/?p=9054 Hello everybody, in this tutorial we will create a Samsung Galaxy S with some simple techniques in Photoshop. We will be using the Rounded Rectangle Tool, the Pen Tool, shape mode and some effect in Blending Options. So, you should know the basics of them.

Preview of Final Results

final results

Download the PSD

samsung-galaxy-s-PSD.zip | 13 MB

Resources

Step 1

Firstly, we must create a new document ( Ctrl + N ). See the following image.

1

Step 2

To make background more beautiful, double clicks ìBackgroundî layer to change it become ìlayer 0î. Then double clicks it again to add Layer Style.

2

This is background’s appearance after been added Layer Style.

3

Step 3

Now, we will make the main body. Create a big rounded rectangle with the Rounded Rectangle Tool. Set the radius to 75px, and then colored it with #252f39.

4

Step 4

Duplicate it, change the color to white (#ffffff), and then set the opacity to 20%.

5

Step 5

Create a black part like image below with ìRounded Rectangle Toolî again.

6

Step 6

Now, create a rounded rectangle again like above but smaller than previously and colored it with white. Set Fill to 15%.

7

Step 7

Create a black rectangle with the Rectangle Tool, and then go to Filter > Blur > Gaussian Blur. Set radius to 20 px.

8

Step 8

Set the opacity to 40%.

9

Step 9

Now, we will makes camera and the sensors. Create a small white circle with the Ellipse Tool, then set the opacity to 5%.

10

Step 10

Afterwards, create a rectangle with the Rectangle Tool at right side and then set the opacity to 5% too.

11

Step 11

Add white circle upon the rectangle, then set the opacity to 7%.

12

Step 12

To makes more good looking, add the SAMSUNGís logo.

13

Step 13

Double clicks its layer, and then add this Layer Style.

14

Step 14

For the screen, create a rectangle with the Rectangle Tool.

15

Step 15

Create a new layer, then convert it to Clipping Mask (Ctrl + Alt + G) to the screen layer. Colored it with #686862

16

]]> http://webdesignfan.com/samsung-galaxy-s-photoshop-tutorial-free-psd/feed/ 4 Integrating Datepicker with jQuery http://webdesignfan.com/integrating-datepicker-with-jquery/ http://webdesignfan.com/integrating-datepicker-with-jquery/#comments Tue, 09 Aug 2011 18:12:52 +0000 Pratima Paliwal http://webdesignfan.com/?p=8371 Gone are the days when we have to write code, manually from scratch, to create a Website in an editor, mostly it was Notepad. Nowadays, we are using tools like Adobe Dreamweaver, Zend Studio, Microsoft Visual Studio Express and existing code libraries to simplify our work and get it done with fewer efforts in less time.

Today, we will discuss about one such code library named jQuery. It is an open source, is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. In this write up, we will show how you can create a Datepicker using this jQuery library.

You can download the source files used in the end of the article.

]]> Gone are the days when we have to write code, manually from scratch, to create a Website in an editor, mostly it was Notepad. Nowadays, we are using tools like Adobe Dreamweaver, Zend Studio, Microsoft Visual Studio Express and existing code libraries to simplify our work and get it done with fewer efforts in less time. Today, we will discuss about one such code library named jQuery. It is an open source, is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. In this write up, we will show how you can create a Datepicker using this jQuery library. You can download the source files used in the end of the article.

Adding Default Datepicker

Step 1

Create a standard HTML file first.

Step 2

You should link the default datepicker JS and CSS files within the <head> section of your HTML file. You can download these files at the end of this article. Here is the code:

<link rel="stylesheet" typePreview post="text/css" href="demos.css">

<link rel="stylesheet" type="text/css" href="jquery-ui.css">

<script src="jquery-1.5.1.js"></script>

<script src="jquery.ui.core.js"></script>

<script src="jquery.ui.widget.js"></script>

<script src="jquery.ui.datepicker.js"></script>

You can customize the demo.css file to change the layout and positioning of datepicker. In addition, you can extract the CSS code used in the HTML from it and add it within style tag for integrating the datepicker in your Website. We suggest you not play with the jquery-ui.css file as it is a member of jQuery libraries and Google AJAX APIs.

Step 3

Now, you have to add a container in the body tag to create the datepicker. Following is the code for it:

<div>

<p>Select the date: <input type="text"></p>

</div>

The scripts mentioned in above JS file works automatically and adds the datepicker in the input box created. When a user clicks the box, the datepicker will appear.

Complete Code of default datepicker

<html>

<head>

<title>Default jQuery Datepicker</title>

<link rel="stylesheet" type="text/css" href="demos.css">

<link rel="stylesheet" type="text/css" href="jquery-ui.css">

<script src="jquery-1.5.1.js"></script>

<script src="jquery.ui.core.js"></script>

<script src="jquery.ui.widget.js"></script>

<script src="jquery.ui.datepicker.js"></script>

<script>

$(function() {

$( "#datepicker" ).datepicker();

});

</script>

</head>

<body>

<div style="width:500px; height:auto; font-size:small;">

<div class="demo">

<p>Select the date: <input type="text"></p>

</div>

</div>

</body>

</html>

Output

Following is a screenshot of the output:

screenshot of default jquery datepicker

Screenshot of default jQuery datepicker

Date Format Options

In the default jQuery datepicker, the date is displayed in the default format MM/DD/YYYY after selecting any date. jQuery allows you modifying the date format. Let us have a look how to customize the date format for datepicker.

Step 1

Change the default script code with this one:

<script>

$(function() {

$( "#datepicker" ).datepicker();

$( "#format" ).change(function() {

$("#datepicker").datepicker( "option", "dateFormat", $( this ).val() );

});

});

</script>

The jQuery provides following date formats:

  1. mm/dd/yy like 06/12/10
  2. yy-mm-dd like 10-06-12
  3. d M, y like 6 Jun, 10
  4. d MM, y like 6 June, 10
  5. DD, d MM, yy like Sunday, 6 June, 2010
  6. ‘day’ d ‘of’ MM ‘in the year’ yy like day 6 of June in the year 2010

Step 2

Add the follow code in the HTML below the div demo code:

<p>Select the format to display date:

<select>

<option value="mm/dd/yy">Default - mm/dd/yy</option>

<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>

<option value="d M, y">Short - d M, y</option>

<option value="d MM, y">Medium - d MM, y</option>

<option value="DD, d MM, yy">Full - DD, d MM, yy</option>

<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the ye ar' yy</option>

</select>

</p>

screenshot of datepicker with date format options 300x71

Restricting the Date Range

You can restrict the date ranges on and specify the interval in which one can select the dates. Make use of minDate and maxDate options to set the beginning and end dates of the interval.  For example, if you are using June 6 as current date then minDate = -20D will be 20 days before June 6 and maxDate = +1M 5D will be one month 5days after June 6. The dates will be disabled before minimum date and after maximum date.

You can use following script code and change the minDate & maxDate as per your requirement.

<script>

$(function() {

$("#datepicker").datepicker({minDate: -40, maxDate:"+2M +5D" });

});

</script>

Output

restricting the date range in datepicker 300x112

Displaying the Inline Datepicker

Well till now we have worked to display the datepicker only when user clicks textbox. There is no scripting for this as you just have to show the datepicker div without any input box. Following is the HTML code to display inline datepicker:

Select the Date: <div></div>

inline jquery datepicker

Datepicker with Drop-down Boxes of Years & Months

To have the drop-down boxes or menus of years and months in a datepicker, you just have to add two Boolean options changeMonth & changeYear and set them to true.

<script>

$(function() {

$( "#datepicker" ).datepicker({

changeMonth: true,

changeYear: true

});

});

</script>

datepicker with menus of year and months

Conclusion

You can easily add a datepicker using the codes mentioned above. The datepicker is not limited to the above features only. You can also add following features to the datepicker:

●      Populating another text field on selecting a date

●      Displaying buttons on the datepicker

●      Showing dates of other months in the current month

●      Showing weeks of the year

●      Displaying multiple months

●      Adding icon trigger to launch datepicker

●      Date Range with two datepickers one for ‘from’ and another for ‘to’

Demo & Download

jQuery Datepicker Demo: Click here

Download the files: demo-jquery-datepicker.zip

The zip file will also have the code of above listed features. Please read the readme.txt for details of the contents of zip file.

Unlike MB6-202 training program, our best 70-441 tests and MB4-212 training courses provide you quick success in first try of 70-506.

]]> http://webdesignfan.com/integrating-datepicker-with-jquery/feed/ 3 How to Create a Simple Login Form Design http://webdesignfan.com/how-to-create-a-simple-login-form-design/ http://webdesignfan.com/how-to-create-a-simple-login-form-design/#comments Fri, 17 Jun 2011 13:30:00 +0000 Tomas Laurinavicius http://webdesignfan.com/?p=8005 Today I would like to show you how to create a clean and detailed login form design in Photoshop. In few simple steps you will see how to use blending options, layer styles, how to stylize type for the web and more.

Hope you will find this tutorial useful and you will learn something new. Please share your opinion about this tutorial in comments section below.

]]> Today I would like to show you how to create a clean and detailed login form design in Photoshop. In few simple steps you will see how to use blending options, layer styles, how to stylize type for the web and more.

Hope you will find this tutorial useful and you will learn something new. Please share your opinion about this tutorial in comments section below.

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.
login.zip (1 MB)

Tutorial Resources

Fonts: Nevis

Photo: grass farm

Pattern: 20 Repeatable Pixel Patterns

Preview

login form design

Step 1: Create a new document

Open Adobe Photoshop and start by creating a new document CTRL+N. Then make the document 600 px by 420 px with a white background.

step01

Step 2: Guidelines

We need to add some guidelines. Go to View > New Guide… and add following guidelines: vertical at 90 px, 100 px, 500 px and 510 px, horizontal at 70 px, 80 px, 340 px and 350 px.

step02

Step 3: Background

At first create a new group (Layer > New > Group…) called “Background”. After that click twice on background layer and unlock it, then move it inside the group and download grass farm photo by davedehetre. Now drag photo to your Photoshop window and using Move Tool (V) drag it to your login form design document. Resize if needed by clicking Ctrl+T.

step03

Step 4: Body

Minimize “Background” group by clicking a small grey arrow next to the group’s title and create one more new group (Layer > New > Group…) called “Login Form”. After that set foreground color to white (#FFFFFF) and pick Rounded Rectangle Tool (U) with radius set to 5 px. Further draw a rounded rectangle between an external guidelines. An example shown on the picture below.

step04

Now click right mouse button on rounded rectangle layer and select Blending Options… after that apply following options.

step041

step042

Finally reduce Fill of the layer to 35%.

step043

Change foreground color to grey (#E8EBF2) and pick Rounded Rectangle Tool (U) with radius set to 5 px again. After that draw another rounded rectangle between an internal guidelines. An example shown on the picture below.

step044

Now click right mouse button on previous created rounded rectangle layer and select Copy Layer Style. Then click right mouse button on just created rounded rectangle and select Paste Layer Style and do not forget to change Fill to 100%.

step045

Now go to Filter > Noise > Add Noise… and set Amount to 1%. An example shown on the picture below.

step046

Create a new layer (Shift+Ctrl+N) and name it “Stripes”. After that download pixel patterns from 20 Repeatable Pixel Patterns. Then hold Ctrl button and click on grey rounded rectangle layer thumbnail to make selection. Now select Paint Bucket Tool (G), choose Pattern and load pixel patterns that you have downloaded. Select pixelpattern6 and fill selection.

step047

Click Ctrl+D to deselect and reduce “Stripes” layer Opacity to 3%.

step048

Step 5: Input elements

Change foreground color to white (#FFFFFF) and pick Rounded Rectangle Tool (U) with radius set to 5 px and draw 360×40 px size shape. After that move it 23 px down from the grey rounded rectangle top corner. An example shown on the picture below.

step05

Now click right mouse button on white shape layer you that just created and select Blending Options… then apply Stroke option.

step051

Change foreground color to green (#7EA431) and pick Horizontal Type Tool (T), choose Nevis font, set type size to 16 pt and write “E-mail:”. Place it 20 px to right from input shape left corner.

step052

Click on white input shape layer and duplicate it by clicking Ctrl+J. After that move it 20 px below the first one. Then write “Password:” inside the duplicated input element.

step053

Set foreground color to white (#FFFFFF) and grab Ellipse Tool (U). After that hold Shift button and draw 12×12 px size circle and paste layer style copied from input element layer.

step054

Change foreground color to green (#7EA431) and pick Horizontal Type Tool (T), choose Nevis font, set font size to 14 pt and write “Remember Me”. After that place it in the same level as circle. An example shown on the picture below.

step055

Now click right mouse button on text layer and select Blending Options… then apply following option.

step056

Now write “Forgot Password?” apply the same drop shadow option and place it on the right side as shown on the example below.

step057

Step 6: Login button

Pick Rounded Rectangle Tool (U), set radius to 5 px and draw 360×60 px size button. After that click right mouse button on it’s layer and select Blending Options… then apply following options.

step06

step061

step062

Set foreground color to white (#FFFFFF) and select Horizontal Type Tool (T), choose Nevis font, size set to 30 pt and write “LOGIN”. After that click right mouse button on text layer and select Blending Options… and apply drop shadow option.

step063

step064

Conclusion

We’re finally done with our login form design. Hope you’ve found this tutorial useful and covered techniques will help you in future projects. Any comments and suggestions are welcome.

Get fast success in testking mcitp exam questions by using our latest MB7-841 exam. We also offer up-to-date MB6-827 questions and answers for your prep of 70-640.

]]> http://webdesignfan.com/how-to-create-a-simple-login-form-design/feed/ 9 Tracking Links with PHP, jQuery and MySQL [Video Tutorial] http://webdesignfan.com/tracking-links-with-php-jquery-and-mysql-video-tutorial/ http://webdesignfan.com/tracking-links-with-php-jquery-and-mysql-video-tutorial/#comments Wed, 08 Jun 2011 17:55:40 +0000 Web Design Fan http://webdesignfan.com/?p=7974 Join the Fan Club!

You are currently viewing a premium “Member’s Only” post from the Web Design Fan Club. To continue viewing this awesome content after June 16, you can become a member for the heavily discounted of $36/year or join us on a monthly basis for $9/month after June 16.

Did you read that right? Yes, yes you did. $36 for the year (8 months free) if you become a yearly subscriber before June 16. Seems kind of foolish to pass something like that up, eh?

Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. From WordPress themes to premium icon sets and vectors, advanced tutorials to educational resources and files, the Web Design Fan Club delivers. Not only that, but you gain access to interviews with some of the best web designers and developers working today.

moneyback

Today, Doug will be guiding you through the steps to integrate jQuery with PHP while using a MySQL database to count clicks on links. This tutorial will help beginning coders see how to get started using MySQL with PHP and see cool jQuery tricks to improve the look and functionality of designs. We also have the source files for download below so that you can work along with the video.


Note: Due to the video provider, the quality may be slightly off. Download our high quality edition below for a clearer picture.

Source: Download here

High Quality Video Download: Download here


Comments?

Did you enjoy the video? More importantly, did it help you learn anything? We’d love to hear about it.

Save your time and get on time success in MB7-232 exams by using our latest MB7-224 and other superb exam pass resources of MB6-288 and 70-580.

]]> http://webdesignfan.com/tracking-links-with-php-jquery-and-mysql-video-tutorial/feed/ 0 Awesome Wooden Icon Set Showcase and Tutorial http://webdesignfan.com/awesome-wooden-icon-set-showcase-and-tutorial/ http://webdesignfan.com/awesome-wooden-icon-set-showcase-and-tutorial/#comments Sat, 16 Apr 2011 15:00:51 +0000 Zachary Brown http://webdesignfan.com/?p=7597 Wooden Mac OS X Dock Icon Set (you will see it later in the post, too) and it intrigued me because though I usually don't like this style, I really admired these. Inspired, I dug deeper and found some other wood icon sets to share with all of you. I also snuck in a really cool tutorial from Design Instruct at the end. Enjoy.]]> The other day I came across a fantastic icon set that I really wanted to share. It was a Wooden Mac OS X Dock Icon Set (you will see it later in the post, too) and it intrigued me because though I usually don’t like this style, I really admired these. Inspired, I dug deeper and found some other wood icon sets to share with all of you. I also snuck in a really cool tutorial from Design Instruct at the end. Enjoy.

Made of Wood by Thvg

wood thvg 229x300

The icon set that inspired the post. A beautiful wooden Mac OS X Dock icon set with a glossy finish. I especially like the Applications folder icon.

Wooden Icons by Pakito

wood pakito 300x225

Another cool set from DeviantArt. These really impressed me and would give any design a touch of elegance.

Glossy Wooden Social Media Icons

wood social 300x282

Solid set that would do well in a design that needed a good wooden texture to distinguish their social media icons. All the standard social networks are present in addition some more obscure ones, as well.

Glossy Wooden Arrow Icons

wood arrow 300x286

From the same style as the social media icons above, these are great for any design looking for a solid wooden texture. An incredible amount of different shapes and sizes included in this set.

Burnt Wood Social Media Icons

wood burnt 300x300

This icon set has a new take on wooden social icons and it is interesting. These icons were a product of this tutorial: Burn Wood Text Effect.

Wooden Slick Drives by Thvg

wood slickdrives 300x272

Another entry by icon artist Thvg, these icons redo your drive icons in the same style as the wooden folder icon set above. Another nice offering.

Create a Wooden Social Media Icon Quickly with Photoshop

wood tut 300x150

This tutorial from Design Instruct guides you through the steps to creating a very cool wooden icon that, while in this instance used for Twitter, can be used for other purposes, as well. Here is an example of other icons in this style from Timothy Blake’s Dribbble account.

Got any others?

If you know of a great wooden icon set I didn’t list, please leave it in the comments for us. Thanks!

]]> http://webdesignfan.com/awesome-wooden-icon-set-showcase-and-tutorial/feed/ 2