Online photo portfolio

This tutorial will show you how to create a clean looking layout for your portfolio.

Create a new file (File>New) with 766×699 px and 72 dpi.

Create Online Photo Portfolio in Photoshop CS3

Choose after that the Rectangle Tool (U) to represent the background of the site’s page to be next:

Create Online Photo Portfolio in Photoshop CS3

Apply the next layer’s parameters by making a mouse’s click on the corresponding layer on the layers’ panel.Blending Options>Gradient Overlay

Create Online Photo Portfolio in Photoshop CS3

Gradient’s parameters:

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3 Read more of this post

Photo portfolio web page layout

This tutorial will show you how to create a clean looking web layout for your portfolio.

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create a new file (File>New) with 766×750 px and 72 dpi. Next use the Paint Bucket Tool (G) to paint the new layer with this shown color – #0F1715

Create Photo Portfolio Web Page Layout in Photoshop CS3

Find in Internet a kind of pattern, like this one:

Create Photo Portfolio Web Page Layout in Photoshop CS3

Edit>Define Pattern. Create a new layer and select this option Edit>Fill, to insert the pattern on our main picture. Read more of this post

Web design tips for beginners

At the outset we need to remember that Web design is a tricky art which is driven by technology and code. Hence it is splendid mix of creative and the analytical skill sets. To create a visually appealing, functional site which is useful to the end user, all the aspects have to seamlessly blend.

  1. A vision for your site and clarity is essential, before going ahead, you should be clear with the “Hows” and “What’s” before getting your hands dirty. A clear vision helps you come up with a rough master plan of how to go about designing your site.

    Understand what is the core purpose, who the actual end users are, what you are trying to accomplish and what message you want to convey to your audience, once you have done this introspection you’ll have a better idea of how to proceed.

    Remember your website is a tool for communicating and sharing ideas in the best possible way with your target audience, try to see if this basic goal has been met.

  2. A easy to use navigation is the backbone of any website. The navigation should be straight forward, highly intuitive and prominent. Today most of the sites have a horizontal main navigation bar which is available throught the site in all the pages. Apart from providing a means to move back and forth between sections of the website it also ‘grounds’ the website, hence a great Navigation design is crucial for any site. ‘Bread crumbs‘ which show navigation trails at the top of the page look classy and help the user figure our exactly where he is located, so that he does not get lost in the maze of diverse web pages. It helps the user to quickly retrace his steps in case he wants to go back.

  3. Typography deals with font types and sizes. Though there are a plethora of fonts for the print media, however when it comes to the web, we need to design with only a few common fonts found across most computers. Since content is central to a web design, skillfully used fonts, font colors and font sizes result in great readability and account for at least 50% of good web design.

    Try to play with the size and font type of different titles, headings, sub-headings and content to make the content more readable. You can also give similar treatments to certain groups of content or components for easy identification. It’s a simple trick to group sections together and to keep the user focussed on the content.

  4. It is best to spend a fair deal of time initiallylooking at related sites and trying to understand what best suites your project. Try to come up with a layout that has the end user and his requirements in mind. It should exactly be mapped to the users needs, tasks that he is generally likely to perform on the site and his expectations from the site. It should be neat, well conceptualized and should put the user at ease.

    Things to avoid are cluttering the layout with too many big images, animations, backgrounds etc. Instead use eye catching icons to attract your users attention to a particular area of the screen. Personally I am all for simple, neat, minimalistic design with a lot of white space and just the bare minimum graphics. Some times designers over emphasise on graphics whereas the general user is more interested in being able to grasp the information, hence graphics shouldonly be used to complement the content, not distract the user.

    It would be a good idea to sketch your draft layout on paper and progressively improve it till you are ready with a clear picture. It is advisable to spend a lot of time and energy on coming up with your layout, as a well conceived layout is always proves to be a time saver down the line.

    Ultimately a site layout should strikes the right balance between aesthetics, functionality and User needs.
    Web Design Layout
    (Sample Layout designs of webpages)

  5. Colors are always known to affect moods, hence it is important to select your page colors to suit your theme. Its always good to have a Primary color and Secondary colors defined for your site. Even a simple page with ‘just right’ colors creates a memorable and lasting impression on the user. Whereas an incompatible color scheme can make even a great site look gaudy resulting in the user being distracted while using the website.Color Wheel

    Professionals refer the color wheel (shown in the image) and with their understanding of color principles come up with sites that are not just functionally good but fully balanced in color usage. Choosing colors and other design principle is more of an art and can be acquired over a period of time through practise. However one thing is clear that it is of paramount importance which can make or break the user experience.

  6. Key to delivering a great user experience is to make your web page come to Life with a host of interactive design elements like Dropdown menus, On mouse over effects, Expand collapse menus, Scroll bars, Accordions etc to name a few. With a great User interaction design plan you can make your site easy to use, quick, and even a fun filled experience to the users.

    Though this might seem daunting to a beginnner, it is quite simple with the plethora of Javascript frameworks available today like Dreamweaver Spry, jQuery, JExt and MooTools etc. The new generation of web sites (Web 2.0 sites) rely on these heavily to enable animations, actions and other types of interactivity.
    Incorporate interactive design thoughtfully in your site, so that users are thoroughly engaged, are able to easily make sense of the information in an easy and funfilled way.
    For an example of a page created using Dreamweaver Spry go our article Dreamweaver Spry page.

  7. How many times have you waited in vain for a page to load and then switched to something else. Here are some reasons to create a fast loading page..

    1. Remember that making a user wait for long, will result is loosing a large section of your potential viewers, this is should be strictly avoided.
    2. Lighter fast loading pages are easy for users with slow internet connections to view.
    3. It is also seen that a web page load time is also taken as an aspect of page ranking by Search engine algorithms.

    Here is a list of ways to created a fast loading page..

    1. The first and foremost thing you could do is to remove or minimize Graphics, Flash and scripts as they hugely increase your file size.
    2. Optimize your HTML code, CSS code & script code by taking care to see that there are no extra tags, unnecessary nested tags or unused scripts or scripts with errors.
    3. Try to put scripts at the bottom of the HTML file if possible.
    4. As far as possible stick to a pure CSS tableless design right from the start of your page design. Theadvantage of Div tags over tables is that it results in better load time and you can better manage changes to your layout.
    5. Divs are also more scalable to meet any design change requirements in the future.
    6. On the server side, ASP, PHP and database performance optimization is crucial to a functional and fast loading web site.

    Remember there is nothing more pleasing to a user than a fast loading page, it is like a welcome sign ( or like being on time on your first date:-)) and it always gives a great first impression.
    For a detailed article on creating Fast Loading Page check out our article lorem Creating fast loading pages.

  8. Okay, so you’ve launched your site and you have high worth, useful, interesting and unique content. Well does this mean that visitors will start flocking in droves? Well, may be not, the internet is one mammoth reservoir of information that it is worse than finding a needle in a haystack. Hence making your website findable is also an important part of commercial web design, a game which you need to master to show that you exist on the web.

    While it is difficult to describe all the methods for improving Search Engine ranking some of the simplest ways are as follows..

    1. Have important keywords in your title, description, content and alt tags of your web page. This results in higher keyword density on the page and helps in improving your ranking with the search engines.
    2. Also use HTML instead of flash as the present web technology is not fully geared to understand a flash based webpage.
    3. Try to have as many other sites which link to your site, the search engine algorithm interprets this as a sign of a high worth site and gives it a higher page ranking.
    4. Use web site Analytics tools like Google analytics to monitor how your visitors use your site, where they come from and what keywords they type to find your site. The insight that this data can provide will be invaluable in coming up with a properly focussed SEO effort.

    Google at present leads the search engine race, the overall percentile distribution is as below..
    SearchEngine_PieChart

Create a website using html and css styles

We will split this web page into four parts :
› Header Area
› Preview Area
› Content Area
› Footer Area

All the above Areas defined above are contianed inside a div with id wrapper.
Define this <div id=wrapper> just after the starting <body> tag. 

Let’s have a look at the basic format of the webpage :

<body>
<div id=wrapper> <!– CODE FOR HEADER AREA –> <!– CODE FOR PREVIEW AREA –> <!– CODE FOR CONTENT AREA –> <!– CODE FOR FOOTER AREA –> </div> <!– #wrapper –>
</body>

The CSS code for <div id=wrapper> is to give it a Blue(#1D4D6B) background color. This background color gets applied to all the elements which are contained inside this wrapper div.

#wrapper{
   background:#1D4D6B;
}

Let’s start with the Header Area.
The Header Area consists of the Company Name and the Main Navigation Menu.

This Header is made using only four div elements.
› Left Header and Right Header div contained inside the Center Header div.
› The last div is the Main Header div that contains all the other three div’s inside it.

<div id=header>
   <div id=center_header >

      <div id=left_header >
         Company Name
      </div><!-- #left_header -->

      <div id=menu >
         <a href=home.html>Home</a>
         <a href=About.html>About Us</a>
         <a href=Services.html>Services</a>
         <a href=Partners.html>Partners</a>
         <a href=Contact.html>Contact Us</a>
      </div><!-- #menu -->

   </div><!-- #center_header -->
</div> <!-- #header -->

Read more of this post

Text that creates backgrounds

EXTRA-LARGE HEADLINES

Looks like designers are having themselves a field day with big, bold headlines.  The kind that stop you in your tracks and make you read.


This site has the outsized headline in lower case and the content in all caps in a smart yet simple design that optimizes the use of color and type.

Preview in 50 Stunning Photoshop Text Effect Tutorials
Courtesy: LemonDesign Here every word begins with the letter ‘A’ which takes center-stage in no uncertain terms.

Create visual impact while leaving an impression with your message. Here’s some big, bold type to speed you on your way!  Choose from an array of exciting fonts. Read more of this post

Portfolio web layout

Learn how to create a web layout with services, portfolio, careers and others.

Select File>New option with 800×720 px and 72 dpi. Select the Rectangle Tool (U) to represent the background of the site to be next:

Create Portfolio Web Layout in Photoshop CS

Make the necessary adjustments on the layer’s parameters in the layers’ panel:
Blending Options>Gradient Overlay

Create Portfolio Web Layout in Photoshop CS

Gradient’s parameters:

Create Portfolio Web Layout in Photoshop CS

Using the Rounded Rectangle Tool (U), try to represent the primary layer reserved for the site’s panel: Read more of this post

Design a stylish portfolio layout in photoshop

The following assets were used during the production of this tutorial.

Apophysis Fractal

Pattern

Now that we have everything we need, so let’s start!

Step 1:- Create a new file with 1200px width and 1400px height.

step 1

Step 2:- Now select the “Paint bucket Tool” ad fill the background with color # ffffff.

step 2

Step 3:- Select the “Rectangle Tool” ad create a big rectangle. Fill it with color # 000000.

step 4

Read more of this post