Web Design Blog | Web Design Fan | Resources for Web Designers and Graphic Designers » Tutorials 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. Tue, 24 Jan 2012 20:41:21 +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/ 1 Create Awesome Post-It Note Art with Photoshop http://webdesignfan.com/create-awesome-post-it-note-art-with-photoshop/ http://webdesignfan.com/create-awesome-post-it-note-art-with-photoshop/#comments Thu, 22 Dec 2011 14:30:04 +0000 Gerard Harris http://webdesignfan.com/?p=9016 Earlier this year, the full force of post-it note art broke with some of the most amazing visualizations ranging from Super Mario and Kirby to Elvis Presley and Ray Charles. However, where do you start if you want to get involved yourself? If you’ve got a design package like Adobe Photoshop with a grid function, the whole process is actually quite straightforward to design, leaving you with a simple, but time consuming, job of just following your design when you start sticking post-it notes to the wall.

Below is the process you need to follow to use Adobe Photoshop to design your own post-it note picture.

The first thing to do is to measure your workspace, whether it’s a wall, ceiling or window and work out how many post-it notes it would take to fill the space by simply dividing the total space by the size of an individual note.

Once this is done, you need to turn on the grid function (select View, Show and check Grid, or pres Control apostrophe) and create a canvas size that matches the dimensions of post-it notes that you need for the collage to the squares in the grid.

post it 1

The next step is to either sketch out your overall design, or import an image for the design into Photoshop and expand it to fill the canvas size you’ve selected. With Snap To Grid on (select View, Show, Snap To and Grid) use the Eyedropper Tool to select the main colour in the background of each square, then use the Rectangular Marque Tool to select the grid square and use Paint Brush Tool to fill it in. Repeat this process until every square on your canvas is covered.

post it 2

You’ll notice the 8-bit change in the design pretty quickly and get a feel for any manual changes you might need to make to keep it looking good.
post it 3

post it 4

Now that you have your design in place, it’s simply a case of matching the post-it notes on your work surface to the squares on the Photoshop canvas. Before you know it, you’ve finished your first ever post-it note art.

post it 5

]]> http://webdesignfan.com/create-awesome-post-it-note-art-with-photoshop/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 Building a Compact jQuery News Ticker http://webdesignfan.com/building-a-compact-jquery-news-ticker/ http://webdesignfan.com/building-a-compact-jquery-news-ticker/#comments Mon, 20 Jun 2011 17:03:34 +0000 Nathan Rohler http://webdesignfan.com/?p=8070 Many websites today feature a small news ticker that provides text links to pages with recent news or other features. It's a great way to highlight important links without using much space. In this tutorial, I'll show you how to easily build one of these news tickers using jQuery. We'll start with a HTML list of links, then use jQuery to make them automatically cycle, fading in and out. When the user hovers over a link, the ticker will pause so they can click the link to learn more.

]]> Many websites today feature a small news ticker that provides text links to pages with recent news or other features. It’s a great way to highlight important links without using much space. In this tutorial, I’ll show you how to easily build one of these news tickers using jQuery. We’ll start with a HTML list of links, then use jQuery to make them automatically cycle, fading in and out. When the user hovers over a link, the ticker will pause so they can click the link to learn more.

Before getting started, be sure to view the demo to see how the ticker works. Here’s what the finished project will look like:

Finished ticker

HTML Demo

Tutorial Details

  • Technologies: HTML, CSS, JavaScript, jQuery
  • Difficulty: Intermediate
  • Estimated Completion Time: 20-30 minutes

Intro: Preparations

You should create an empty HTML file and save it somewhere convenient now; we’ll be working with it throughout this tutorial. We’ll be working exclusively with client-side code, so there’s no need for a server – you can preview directly on your computer. In the demo files we’ll use inline CSS and JavaScript, but you can externalize these if desired.

Tip: For this type of tutorial, it can be helpful to use jsBin or jsFiddle to follow along. These free online tools let you experiment with HTML, JavaScript and CSS without having to create any files on your computer. Best of all, you can save, version and share your experiments. It’s a great way to perfect a technique without cluttering up your computer with tons of files.

If you’re creating your own HTML file, here’s the code you should have to start:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>jQuery News Ticker</title>
  <style type="text/css">
  /* CSS will go here */

  </style>
</head>

<body>

  <!-- Markup will go here -->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script type="text/javascript">
  // JavaScript will go here

  </script>
</body>
</html>

Note the designated places for markup, CSS and JavaScript. Additionally, note that we have included jQuery 1.6 from Google’s CDN.

Step 1: The HTML Markup

We’ll use a dedicated <div> to hold the ticker. The links will be contained within an unordered list (<ul>). By using an HTML list to define the links, we ensure that the ticker will gracefully degrade for users with JavaScript disabled, and that search engines will still be able to see and follow all of the links. Add the following HTML markup to your page:

<div id="ticker" class="newsTicker">
    <a href="#">Newsroom</a>
    <span class="divider">|</span>
    <ul>
        <li><a href="#story1">Story headline 1</a></li>
        <li><a href="#story2">Another Story headline 2</a></li>
        <li><a href="#story3">Some third story headline</a></li>
        <li><a href="#story4">A final, fourth headline</a></li>
    </ul>
</div>

Update the list to contain an <li> for each of the links you want in the ticker. I’ve chosen to put a ‘Newsroom’ link at the start, but that’s up to you.

Step 2: Styling

Now it’s time to make the scroller look nice. In the <style> tag in the <head>, add the following CSS:

#ticker
{
    border: 1px solid #666;
    background: #DDD;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #333;
    font: 13px/16px Arial,Verdana,sans-serif;
    padding: 3px 7px;
    width: 400px;
}
#ticker .divider {
    padding: 0 4px;
}
#ticker a, #ticker a:visited
{
    color: #333;
    text-decoration: none;
}
#ticker a:hover
{
    color: #930;
}

This adds some background and border to the overall ticker, and styles the links. These styles are just to get you started – if you want, you can add some creativity at this point! As we style, keep in mind that the <ul> won’t be present in the rendered HTML – it will be replaced with a single link that changes. That’s why there are only link styles and no list-related styling.

Step 3: Making It Work

Now we’re ready to add the jQuery-enhanced JavaScript to make the ticker actually work. I’ll show you the overall chunk first, then break down what each portion is doing.

Add the following chunk of JavaScript to the <script> tag at the bottom of the page:

$(function()
{
    $('#ticker').each(function()
    {
        var ticker = $(this);
        var fader = $('<span class="fader">&nbsp;</span>').css({display:'inline-block'});
        var links = ticker.find('ul>li>a');
        ticker.find('ul').replaceWith(fader);

        var counter = 0;
        var curLink;
        var fadeSpeed = 600;
        var showLink = function()
            {
                var newLinkIndex = (counter++) % links.length;
                var newLink = $(links[newLinkIndex]);
                var fadeInFunction = function()
                    {
                        curLink = newLink;
                        fader.append(curLink).fadeIn(fadeSpeed);
                    };
                if (curLink)
                {
                    fader.fadeOut(fadeSpeed, function(){
                        curLink.remove();
                        setTimeout(fadeInFunction, 0);
                    });
                }
                else
                {
                    fadeInFunction();
                }
            };

        var speed = 5500;
        var autoInterval;

        var startTimer = function()
        {
            autoInterval = setInterval(showLink, speed);
        };
        ticker.hover(function(){
            clearInterval(autoInterval);
        }, startTimer);

        fader.fadeOut(0, function(){
            fader.text('');
            showLink();
        });
        startTimer();

    });
});

If you preview now, you should see a working ticker that cycles through all of your links. If you hover over the ticker, it will pause; if you move your mouse away again, it will restart. Now, let’s break down what all of that code is doing.

Breaking Down the JavaScript – Overview

In plain English, here’s what the JavaScript is doing:

  • Everything is wrapped in a document-ready trigger, so it will be called once the document is ready for manipulation
  • We locate the news ticker
  • We create an array that references the links, then replace the unordered list element in the document with a holder span. That holder will be used for displaying the current link.
  • We define a function that transitions from one link to the next
  • We create a timer, and set it to automatically pause when the user hovers over the ticker
  • We show the first link and start running the timer

Breaking Down the JavaScript – Details

Now, lets take an in-depth look at what each of these pieces of code is doing.

Note that we use the #ticker selector to locate the ticker. If you had multiple tickers in your page, you could change this to div.newsTicker instead, since we applied a class of newsTicker to our ticker.

Chunk 1 – Finding the content, Preparing the document

var ticker = $(this);
var fader = $('<span class="fader">&nbsp;</span>').css({display:'inline-block'});
var links = ticker.find('ul>li>a');
ticker.find('ul').replaceWith(fader);

In this first chunk, we create a jQuery reference

to the current ticker. Then, we create a new <span> that will be used to hold the current link. The fader class is applied, to enable styling if desired. Note that we set the display property of the span to inline-block. This is important to enable fading of the text in Internet Explorer. Without some annoyingly-complex trickery (treating the text as a block-level element to be precise), IE fails to fade the text. Next, we create a jQuery list that references all of the link elements that were defined in the markup, so we can use them later on. Having created this list, we destroy the unordered list, replacing it with the fader span.

Chunk 2 – Creating the "Show me a new link" function

var counter = 0;
var curLink;
var fadeSpeed = 600;
var showLink = function()
    {
        var newLinkIndex = (counter++) % links.length;
        var newLink = $(links[newLinkIndex]);
        var fadeInFunction = function()
            {
                curLink = newLink;
                fader.append(curLink).fadeIn(fadeSpeed);
            };
        if (curLink)
        {
            fader.fadeOut(fadeSpeed, function(){
                curLink.remove();
                setTimeout(fadeInFunction, 0);
            });
        }
        else
        {
            fadeInFunction();
        }
    };

In this next major chunk, we define the method that will fade the link in and out. A counter keeps track of which link we’re on. The fadeSpeed variable specifies how fast the fade effect should be. By default, we use 600 milliseconds (0.6 seconds). Next, we define the function that will swap out the links. In this function we increment the counter and select the next link in the earlier-created list, automatically cycling back to the first by using the modulus operator (%). Then we define a temporary function that updates the reference to the current link, adds it to the fader span, then fades it in. Note that we fade the fader, not the link itself; this is part of the trickery to make the fading work properly in IE. Finally, we check to see if a link already is being displayed. If so, we first fade out the fader and remove that link upon effect completion. Then, after a microscopic delay to avoid item reference problems, we call the method to display the new link. On the other hand, if no link exists, we just display the new link directly.

Chunk 3 – Configuring Automatic progression, Starting it up

var speed = 5500;
var autoInterval;

var startTimer = function()
{
    autoInterval = setInterval(showLink, speed);
};
ticker.hover(function(){
    clearInterval(autoInterval);
}, startTimer);

fader.fadeOut(0, function(){
    fader.text('');
    showLink();
});
startTimer();

In the final chunk, we start things running. The speed variable defines (again, in milliseconds) how long each link should be visible when the ticker is automatically progressing. By default, we use 5500 (5.5 seconds). We define a startTimer method that creates an interval to call the earlier-defined showLink method every few seconds. Next, we add the listener that will automatically pause and restart the ticker when the user hovers over and leaves it. Then, to start the initial display, we instantly fade out the fader, empty its existing contents (a space character that’s required to force it to fade), and use showLink to fade in the first link. Finally, we start the timer.

Summary

You’ve now created a simple, compact news ticker to display newsworthy links on your site. The ticker functions properly in all browsers (including IE!) and automatically pauses when hovered-over, to ensure a good user experience. To enhance the ticker, you could use a server-side script (like PHP) to dynamically output the links. There are many possibilities! Moreover, you’ve learned about how jQuery’s document manipulation and effect tools can be leveraged to create nifty, useful widgets for your page. Have fun with your new knowledge!

]]> http://webdesignfan.com/building-a-compact-jquery-news-ticker/feed/ 8 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/ 7