Tag Archives: Create

10 Easy Steps On How To Create A Good Photography Portfolio

21 Kasım 2011 13:28 ⋅ Leave a Comment ⋅

Creating a showcase of photographs is not an easy task and most of the time the photographers have basic or no knowledge of design at all. Moreover, creating such a portfolio in which the images have to be in focus is a tricky task and even the more experienced designers might fail providing a good layout, therefore I thought of sharing with you a list of tips for designing photography portfolios.

The difference between a web design portfolio and a photography showcase is huge. The focus has to be on pictures, not on content, while the normal way of designing, with the header, content box, sidebar and footer changes totally from a layout to another. The more inspired and original you can be, the better your design will be. When you are a photographer, it is very important to have a platform where you can show clients your work – this has the same importance as for a web designer.

Most of the time the photography portfolios are heavily reduced to a showcase – which can be the home page, a contact section and maybe an “about me” page. It sounds simple, but there are still many things to figure out before being able to design properly such a layout.

1. Think of your target

Yes, you’ve heard this before so many times – and I know it annoys you. It is so simple to just overlook it and why not do it? In the end all of us want as many clients as possible and don’t want to make our audience narrow. Well, I tend not to agree with you, and I would suggest you to think seriously about who you want to work with.

A good example is a wedding photographer – this page would be totally different from the one of a roadshow photographer. It will probably be white, including many circles (which suggest continuity), will have maybe floral arrangements and might be full of happiness and sunshine. If you are a roadshow photographer, you might want to design with a darker color, keeping a balance between organized and chaotic (although do not get too close to organized) and so on. Think of what kind of clients you want to attract and then design for them. It is so important!

White and clean – wedding photographer portfolio

2. Think of the number of images

You have to do this because most of the layouts look good with a small number of pictures uploaded, but how will it look when you will have an odd number of pictures to show? There needs to be a balance between the number of pictures on the page and the negative space you leave between or around them. If you have many pictures, consider using pagination or categories to separate them – and do it for the sake of the user. Don’t forget that they never saw you pictures before and if you are really interested in them, it takes a lot of effort for the human eye to analyze them. Don’t make it even more difficult for the visitors.

This page is a good examples of how to present your work.

3. Make the images stand out

When I say this, I usually mean keeping a high contrast between the pictures and the background; and I usually recommend having black as background, because there is most of the time more contrast than when viewing the showcase on white. This tip is good for bringing out the contrast of the photos and it is also a good idea to try to look at the pictures on different backgrounds, so that you make the best out of them.

Good example of contrast between background and picture

4. Consider the quality

When I visit a photography portfolio or even a showcase, I expect all the time to be able to see the pictures in full size if I click on them – and it would better be huge. I want the pictures to look good and fit my screen if I would like to have it as a desktop background. And not only about this – but if I want to see all the details, I can’t do it properly on a small picture.

To avoid keeping the visitors wait too much, have two versions of each picture (you can resize them with a JavaScript too). This way if somebody is interested in seeing one of your pictures larger, he knows that this comes with the price of loading time.

5. Be flexible

According to official statistics, less than 1% of the internet users have 800×600 displays. However, this does not mean 800×600 is the smallest resolution you have to design for – think of mobile devices as well. It is not highly probable that a potential client will want to use his bandwidth with your pictures, but what if they are on a wireless connection? This means you have to think about all the possible resolutions.

The showcase bar disappears after a few seconds and the picture is in full screen in the browser

You can do this by making you pictures be 100% of the width of the div which displays them, and the height can be set to auto. This will make the pictures resize according to the screen. It is not difficult to do and is very useful, so why not spend few more seconds to customize this?

6. Show only the best work

This is also for the web designers, not only for photographers. It is always good to make a point fast and then let the visitor make a decision – the World is moving fast and we don’t have time to view all the crap work people have done. Therefore only show the top-notch work and let the potential client move on, if he wants to. Don’t keep him tight – he will leave without seeing every piece of your work anyway.

Is is also a good idea to order your pictures. Even if you select your best work, some of your pictures simply have to stand out. Put them first and leave the other good ones for the second page.

7. Describe the photos

When potential clients look at pictures, they want to know who it is they are looking at. They might also want to hire one of the models, which is not a bad thing either. Write short notes about each one of your pictures and let the client know what is he looking at. It is also much more important to give each picture a short description than a title. Naming the tools you’ve used for shooting and post-processing might be a good idea too.

Kenn Reay talks about his pictures in the description.

8. Emphasize the contact information

Sure, the most important thing is to show your work, but how does this help if you do not get clients? It is important to lead the visitor to your contact page if possible, otherwise always make it clear that he can contact you right away. Having the e-mail address in the footer might work too, but it depends a lot on your layout. It is entirely your decision which information you give out, but I would also show them I am present and active on social media.

By having a normal navigation, the contact link does not have to be emphasized, because it is where the user knows it should be.

9. Ask for feedback

I never release a website before asking for feedback – it is just in the manual. Always ask the others – experts or not – about their opinion on how your site looks. It is really important to know what the others think, especially because after hours and hours of looking and analyzing your portfolio, you do not notice the small details anymore – and this is crucial. Never release a website before asking people for opinions.

10. Keep it dynamic

By this I mean that you have to keep your portfolio updated. It is not difficult to do this anymore thanks to the bunch of tools we have at our disposal. Nobody wants to see a good photographer not uploading his latest work and potential clients do not enjoy this for sure. Never replace old strong images with bad ones. Don’t forget about tip #6, showing only the best work.

Conclusion

Having to design a photography portfolio is not an easy task, as said in the beginning, not even for an experienced designer. There are many small tips you have to take into consideration and I hope this list helps all of you in designing better for our fellow photographers out there. With this is mind, I share with you a list of good links on the same topic.

8 Tips for a Great Photography Portfolio on I Shoot Shows

Great Photography Portfolios for Your Inspiration on The Photo Argus

10 Cool Photo Portfolios and Gallery WordPress Themes on Inspired M

Top Five Photography Portfolio Tips on All Art Schools

Five Tips for Building Your Photography Portfolio on Digital Photography School


1stwebdesigner – Graphic and Web Design Blog

Posted in: Css - Xhtml ⋅ Tagged: , , , , ,

10 Easy Steps On How To Create A Good Photography Portfolio

21 Kasım 2011 13:28 ⋅ Leave a Comment ⋅

Creating a showcase of photographs is not an easy task and most of the time the photographers have basic or no knowledge of design at all. Moreover, creating such a portfolio in which the images have to be in focus is a tricky task and even the more experienced designers might fail providing a good layout, therefore I thought of sharing with you a list of tips for designing photography portfolios.

The difference between a web design portfolio and a photography showcase is huge. The focus has to be on pictures, not on content, while the normal way of designing, with the header, content box, sidebar and footer changes totally from a layout to another. The more inspired and original you can be, the better your design will be. When you are a photographer, it is very important to have a platform where you can show clients your work – this has the same importance as for a web designer.

Most of the time the photography portfolios are heavily reduced to a showcase – which can be the home page, a contact section and maybe an “about me” page. It sounds simple, but there are still many things to figure out before being able to design properly such a layout.

1. Think of your target

Yes, you’ve heard this before so many times – and I know it annoys you. It is so simple to just overlook it and why not do it? In the end all of us want as many clients as possible and don’t want to make our audience narrow. Well, I tend not to agree with you, and I would suggest you to think seriously about who you want to work with.

A good example is a wedding photographer – this page would be totally different from the one of a roadshow photographer. It will probably be white, including many circles (which suggest continuity), will have maybe floral arrangements and might be full of happiness and sunshine. If you are a roadshow photographer, you might want to design with a darker color, keeping a balance between organized and chaotic (although do not get too close to organized) and so on. Think of what kind of clients you want to attract and then design for them. It is so important!

White and clean – wedding photographer portfolio

2. Think of the number of images

You have to do this because most of the layouts look good with a small number of pictures uploaded, but how will it look when you will have an odd number of pictures to show? There needs to be a balance between the number of pictures on the page and the negative space you leave between or around them. If you have many pictures, consider using pagination or categories to separate them – and do it for the sake of the user. Don’t forget that they never saw you pictures before and if you are really interested in them, it takes a lot of effort for the human eye to analyze them. Don’t make it even more difficult for the visitors.

This page is a good examples of how to present your work.

3. Make the images stand out

When I say this, I usually mean keeping a high contrast between the pictures and the background; and I usually recommend having black as background, because there is most of the time more contrast than when viewing the showcase on white. This tip is good for bringing out the contrast of the photos and it is also a good idea to try to look at the pictures on different backgrounds, so that you make the best out of them.

Good example of contrast between background and picture

4. Consider the quality

When I visit a photography portfolio or even a showcase, I expect all the time to be able to see the pictures in full size if I click on them – and it would better be huge. I want the pictures to look good and fit my screen if I would like to have it as a desktop background. And not only about this – but if I want to see all the details, I can’t do it properly on a small picture.

To avoid keeping the visitors wait too much, have two versions of each picture (you can resize them with a JavaScript too). This way if somebody is interested in seeing one of your pictures larger, he knows that this comes with the price of loading time.

5. Be flexible

According to official statistics, less than 1% of the internet users have 800×600 displays. However, this does not mean 800×600 is the smallest resolution you have to design for – think of mobile devices as well. It is not highly probable that a potential client will want to use his bandwidth with your pictures, but what if they are on a wireless connection? This means you have to think about all the possible resolutions.

The showcase bar disappears after a few seconds and the picture is in full screen in the browser

You can do this by making you pictures be 100% of the width of the div which displays them, and the height can be set to auto. This will make the pictures resize according to the screen. It is not difficult to do and is very useful, so why not spend few more seconds to customize this?

6. Show only the best work

This is also for the web designers, not only for photographers. It is always good to make a point fast and then let the visitor make a decision – the World is moving fast and we don’t have time to view all the crap work people have done. Therefore only show the top-notch work and let the potential client move on, if he wants to. Don’t keep him tight – he will leave without seeing every piece of your work anyway.

Is is also a good idea to order your pictures. Even if you select your best work, some of your pictures simply have to stand out. Put them first and leave the other good ones for the second page.

7. Describe the photos

When potential clients look at pictures, they want to know who it is they are looking at. They might also want to hire one of the models, which is not a bad thing either. Write short notes about each one of your pictures and let the client know what is he looking at. It is also much more important to give each picture a short description than a title. Naming the tools you’ve used for shooting and post-processing might be a good idea too.

Kenn Reay talks about his pictures in the description.

8. Emphasize the contact information

Sure, the most important thing is to show your work, but how does this help if you do not get clients? It is important to lead the visitor to your contact page if possible, otherwise always make it clear that he can contact you right away. Having the e-mail address in the footer might work too, but it depends a lot on your layout. It is entirely your decision which information you give out, but I would also show them I am present and active on social media.

By having a normal navigation, the contact link does not have to be emphasized, because it is where the user knows it should be.

9. Ask for feedback

I never release a website before asking for feedback – it is just in the manual. Always ask the others – experts or not – about their opinion on how your site looks. It is really important to know what the others think, especially because after hours and hours of looking and analyzing your portfolio, you do not notice the small details anymore – and this is crucial. Never release a website before asking people for opinions.

10. Keep it dynamic

By this I mean that you have to keep your portfolio updated. It is not difficult to do this anymore thanks to the bunch of tools we have at our disposal. Nobody wants to see a good photographer not uploading his latest work and potential clients do not enjoy this for sure. Never replace old strong images with bad ones. Don’t forget about tip #6, showing only the best work.

Conclusion

Having to design a photography portfolio is not an easy task, as said in the beginning, not even for an experienced designer. There are many small tips you have to take into consideration and I hope this list helps all of you in designing better for our fellow photographers out there. With this is mind, I share with you a list of good links on the same topic.

8 Tips for a Great Photography Portfolio on I Shoot Shows

Great Photography Portfolios for Your Inspiration on The Photo Argus

10 Cool Photo Portfolios and Gallery WordPress Themes on Inspired M

Top Five Photography Portfolio Tips on All Art Schools

Five Tips for Building Your Photography Portfolio on Digital Photography School


1stwebdesigner – Graphic and Web Design Blog

Posted in: Css - Xhtml ⋅ Tagged: , , , , ,

10 Easy Steps On How To Create A Good Photography Portfolio

21 Kasım 2011 13:28 ⋅ Leave a Comment ⋅

Creating a showcase of photographs is not an easy task and most of the time the photographers have basic or no knowledge of design at all. Moreover, creating such a portfolio in which the images have to be in focus is a tricky task and even the more experienced designers might fail providing a good layout, therefore I thought of sharing with you a list of tips for designing photography portfolios.

The difference between a web design portfolio and a photography showcase is huge. The focus has to be on pictures, not on content, while the normal way of designing, with the header, content box, sidebar and footer changes totally from a layout to another. The more inspired and original you can be, the better your design will be. When you are a photographer, it is very important to have a platform where you can show clients your work – this has the same importance as for a web designer.

Most of the time the photography portfolios are heavily reduced to a showcase – which can be the home page, a contact section and maybe an “about me” page. It sounds simple, but there are still many things to figure out before being able to design properly such a layout.

1. Think of your target

Yes, you’ve heard this before so many times – and I know it annoys you. It is so simple to just overlook it and why not do it? In the end all of us want as many clients as possible and don’t want to make our audience narrow. Well, I tend not to agree with you, and I would suggest you to think seriously about who you want to work with.

A good example is a wedding photographer – this page would be totally different from the one of a roadshow photographer. It will probably be white, including many circles (which suggest continuity), will have maybe floral arrangements and might be full of happiness and sunshine. If you are a roadshow photographer, you might want to design with a darker color, keeping a balance between organized and chaotic (although do not get too close to organized) and so on. Think of what kind of clients you want to attract and then design for them. It is so important!

White and clean – wedding photographer portfolio

2. Think of the number of images

You have to do this because most of the layouts look good with a small number of pictures uploaded, but how will it look when you will have an odd number of pictures to show? There needs to be a balance between the number of pictures on the page and the negative space you leave between or around them. If you have many pictures, consider using pagination or categories to separate them – and do it for the sake of the user. Don’t forget that they never saw you pictures before and if you are really interested in them, it takes a lot of effort for the human eye to analyze them. Don’t make it even more difficult for the visitors.

This page is a good examples of how to present your work.

3. Make the images stand out

When I say this, I usually mean keeping a high contrast between the pictures and the background; and I usually recommend having black as background, because there is most of the time more contrast than when viewing the showcase on white. This tip is good for bringing out the contrast of the photos and it is also a good idea to try to look at the pictures on different backgrounds, so that you make the best out of them.

Good example of contrast between background and picture

4. Consider the quality

When I visit a photography portfolio or even a showcase, I expect all the time to be able to see the pictures in full size if I click on them – and it would better be huge. I want the pictures to look good and fit my screen if I would like to have it as a desktop background. And not only about this – but if I want to see all the details, I can’t do it properly on a small picture.

To avoid keeping the visitors wait too much, have two versions of each picture (you can resize them with a JavaScript too). This way if somebody is interested in seeing one of your pictures larger, he knows that this comes with the price of loading time.

5. Be flexible

According to official statistics, less than 1% of the internet users have 800×600 displays. However, this does not mean 800×600 is the smallest resolution you have to design for – think of mobile devices as well. It is not highly probable that a potential client will want to use his bandwidth with your pictures, but what if they are on a wireless connection? This means you have to think about all the possible resolutions.

The showcase bar disappears after a few seconds and the picture is in full screen in the browser

You can do this by making you pictures be 100% of the width of the div which displays them, and the height can be set to auto. This will make the pictures resize according to the screen. It is not difficult to do and is very useful, so why not spend few more seconds to customize this?

6. Show only the best work

This is also for the web designers, not only for photographers. It is always good to make a point fast and then let the visitor make a decision – the World is moving fast and we don’t have time to view all the crap work people have done. Therefore only show the top-notch work and let the potential client move on, if he wants to. Don’t keep him tight – he will leave without seeing every piece of your work anyway.

Is is also a good idea to order your pictures. Even if you select your best work, some of your pictures simply have to stand out. Put them first and leave the other good ones for the second page.

7. Describe the photos

When potential clients look at pictures, they want to know who it is they are looking at. They might also want to hire one of the models, which is not a bad thing either. Write short notes about each one of your pictures and let the client know what is he looking at. It is also much more important to give each picture a short description than a title. Naming the tools you’ve used for shooting and post-processing might be a good idea too.

Kenn Reay talks about his pictures in the description.

8. Emphasize the contact information

Sure, the most important thing is to show your work, but how does this help if you do not get clients? It is important to lead the visitor to your contact page if possible, otherwise always make it clear that he can contact you right away. Having the e-mail address in the footer might work too, but it depends a lot on your layout. It is entirely your decision which information you give out, but I would also show them I am present and active on social media.

By having a normal navigation, the contact link does not have to be emphasized, because it is where the user knows it should be.

9. Ask for feedback

I never release a website before asking for feedback – it is just in the manual. Always ask the others – experts or not – about their opinion on how your site looks. It is really important to know what the others think, especially because after hours and hours of looking and analyzing your portfolio, you do not notice the small details anymore – and this is crucial. Never release a website before asking people for opinions.

10. Keep it dynamic

By this I mean that you have to keep your portfolio updated. It is not difficult to do this anymore thanks to the bunch of tools we have at our disposal. Nobody wants to see a good photographer not uploading his latest work and potential clients do not enjoy this for sure. Never replace old strong images with bad ones. Don’t forget about tip #6, showing only the best work.

Conclusion

Having to design a photography portfolio is not an easy task, as said in the beginning, not even for an experienced designer. There are many small tips you have to take into consideration and I hope this list helps all of you in designing better for our fellow photographers out there. With this is mind, I share with you a list of good links on the same topic.

8 Tips for a Great Photography Portfolio on I Shoot Shows

Great Photography Portfolios for Your Inspiration on The Photo Argus

10 Cool Photo Portfolios and Gallery WordPress Themes on Inspired M

Top Five Photography Portfolio Tips on All Art Schools

Five Tips for Building Your Photography Portfolio on Digital Photography School


1stwebdesigner – Graphic and Web Design Blog

Posted in: Css - Xhtml ⋅ Tagged: , , , , ,

Create An eCommerce Landing Page In Adobe Photoshop

06 Kasım 2011 11:03 ⋅ Leave a Comment ⋅

In this week’s tutorial we are going to create an eCommerce landing page using Adobe Photoshop. This tutorial is intended for new designers who are planning on designing an eCommerce template. So what are we waiting for? Ready your workspace and let’s get started.

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1900px document in Photoshop.

Ruler Tool is very useful for this tutorial. Make sure that rulers and guides are turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

One thing important in using Ruler Tool is the Information Panel. The use of this is when you are measuring using the ruler, the information will be shown in the information panel. Make sure that this is shown in your panel at the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create another guide, but now change the value to 1180px, this will make a total of 960px to the center of our canvas.

Step 2: Working on Background

As you can see in the full preview above, the template was divided into three backgrounds, first on the top which holds the logo, navigation and slider. Second a noise background that holds the products, and third on the footer area.

First Background: Using Rectangle Tool(U) color #b6c9c9 create a 100% by 600px. Download the pattern provided in the resource because we will be applying a pattern overlay to the shape we have just created.

Apply this Blending Option

  • Pattern Overlay

Second background: using the same tool create a 100% by 1010px shape.

Apply this Blending Option

  • Inner Shadow: #fff

  • Gradient Overlay: #fff, #f2e9e9

  • Stroke: #c7c3c3

Let’s add a noise to this shape by going to Filter – Convert For smart filters. Again, go to Filter – Noise – Add Noise.

Third background: using the same tool fill the remaining area with #007573.

Apply this Blending Option

  • Inner Shadow: #000

  • Pattern Overlay

Result!

Step 3: Working on the Header

The header for this template will contain the logo, navigation links, buttons, search and shopping cart.

Logo

I used a font called Oswald which can be found in Google Fonts. Using Text Tool(T) 36pt place our logo in a separate word Phone & Shop. The distance will be 100px below starting from the top of the canvas and 20px from the left starting guide.

Phone: Apply this Blending Option

  • Gradient Overlay: #383e44, #5c636a

Shop: Apply this Blending Option

  • Drop Shadow: #000

  • Gradient Overlay: #f6f3f3, #fff

Result

Main Navigation

Notice our navigation has rounded corners on the upper left and right corners. First thing to do is select Rounded Rectangle Tool(U) and set the Radius to 10px. Create a 960px by 75px shape, place it 40px below the logo. Now that it is properly placed create another layer above it and fill the rounded corners in the bottom part. Once you have done it merge this two layers.

Apply this Blending Option

  • Gradient Overlay: #007472, #008e8b

  • Stroke: #007472

Result

Open up the Iconsweets icon set and grab the home logo and place it as shown in the screenshot below.

Apply this Blending Option

  • Drop Shadow: #000

  • Gradient Overlay: 0% #fff, 20% #dbdada, 40% #fff, 60% #dbdada, 80% #fff, 100% #dbdada

Result

Next we will add our Dividers. Select Line Tool(U) and create 2 1px lines. First line color will be #007472 and #009c9a for the second line. Place it 20px from the right of the logo.

Next is adding our navigation links. For this tutorial the links are BLACKBERRY, HTC, SAMSUNG, SONY ERICSSON, IPHONE. Font will be Oswald 15pt color #fff. The distance of each link will be 20px left and right from the Separators/ Dividers. I will leave it up to you to measure it using Ruler Tool(I). Also, add the same Drop Shadow as we did in our home logo.

Last thing we need to make is the hover state. We will just make an small arrow head facing the navigation links, to do this create a shape as shown in the screenshot below using Pecil Tool(B) in a separate layer.

Search

Select Rounded Rectangle Tool, set the Radius to 20px and also make the fill color to #fff. Once it is set create a 180px by 25px shape as shown in the screenshot below.

Apply this Blending Option

  • Inner Shadow: #007472

Label the search bar with text search phones using Text Tool. The text format will be Arial 12pt color #009c9a. Then lastly open up the search icon, resize it and place it as shown in the screenshot below. Search icon color will be #007472.

Top Navigation (Register & Login buttons)

For the text links I used Helvetica 12pt color #007472. Add it using Text Tool. Next select Rounded Rectangle Tool(U) set the Radius to 20px create a two 80px by 25px shape and label it with text Helvetica 12pt color #fff.

First Shape: Apply this Blending Option

  • Inner Shadow: #fff

  • Gradient Overlay: #e5a61f, #fbb829

  • Stroke: #d69d23

For the label text add a 1px Drop Shadow 30%.

Result!

Second Shape: Apply this Blending Option

  • Inner Shadow: #fff

  • Gradient Overlay: #2792c3, #34abe1

  • Stroke: #2792c3

For the label text add a 1px Drop Shadow 30%.

Result!

Next add the Cart icon, so go ahead and place it as shown in the screenshot below. For the text I used Oswald 14pt color #383e44, #fff and I added a Drop Shadow 30% to the #fff text.

Step 4: Working on Slider

This slider will contain a slideshow image for a specific post with title, description, price, and a button to link to that specific post. This slideshow will have 3 tabs for the purpose of navigating and switching specific posts. So let’s get started!

Slider Preview

Start by creating a 660px by 355px shape using Rectangle Tool(U).

Set the Foreground color to #c2e7e7. Next using Rectangular Marquee Tool(M) create a 460px by 130px selection. Next, select Gradient Tool(G) and set the gradient to foreground to transparent. Once it is set, fill the slection.

We will be adding title and description to the highlighted part using Text Tool(T). I used Helvetica Condensed 48pt color #383e44 for the Title and Helvetica Light 14pt color #50565c for the description.

For the price text I used Helvetica Ultra Light 48pt color #fbb829. For the view details button create a 140px by 45px shape using Rectangle Tool(U) and apply the same blending option as we did in the sign in button. The label text size will be 16pt.

Lastly you will need to add a sample image preview.

Tabs

Using Rectangle Tool(U) create a 3 300px by 122px shape as shown in the screenshot below. For the first shape make it #fff and for the two remaining shape make it #e9e7e7.

Now we will be adding lines using Line Tool(U) to make the tabs looks solid and cool. So using Line Tool(U) create a lines as shown in the screenshot below. Line color I used is #d9d2d2 and #f5f5f5.

Notice in the preview of the slideshow in the first tab there is an arrow head indicating it is the active state. To do that select Pencil Tool(B) set the color to #d9d2d2. Refer to the screenshot below for you to know how I did it.

Next we will fill the tabs with text and the phone Icon. Download phone icons from the resource I provided and place it as shown in the screen below.

For the active state text I used Helvetica Bold 16pt color #383e44 for the title and Helvetica Thin 13pt color #009c9a for the description.

For the non active tabs I used the same size and color but for the description text color will be #50565c.

Text: Apply this Blending Option

  • Drop Shadow: #fff

Result!

Shadows & Highlights

Create a selection as shown in the screenshot below and fill it with Linear Gradient foreground to transparent.

Mask the layer by clicking the mask icon from the layers panel. Now using Brush Tool paint the top area to make the shadow fades. Then lastly you will need to set the Opacity to 20%.

Duplicate the shadow layer and place it on the other side. Next thing, make a selection as shown in the screenshot below and use Radial Gradient to fill it with #fff gradient. Then, change the Blend mode to Soft Light.

Step 5: Working on Featured Product

We are going to divide 960px into 4 columns with 20px distance with each column from the right. Refer to the screenshot below for the guide lines measurements.

The first column will be for our sidebar and the rest will be the width of the featured products. The 45px measurement will be the height of the tabs. Using Rounded Rectangle Tool(U) set the radius to 10px and create a shape as shown in the screenshot below.

For the first tab you will need to duplicate the layer and cut out the not including area. Refer to the screenshot below.

Apply this Blending Option

  • Inner Shadow: #000

For the base layer apply the same blending option as we did in our main navigation. Also, font style and dividers are the same.

Lastly add a 3px border on the bottom color #fbb829.

Next we will create the base layer to hold the featured products. Select Rectangle Tool(U) create a 715px by 300px shape.

Apply this Blending Option

  • Stroke: #d9d2d2

  • Gradient Overlay: 0% #e9e7e7, 40% #e9e7e7, 50% #fff, 60% #f3f3f3, 100% #ffffff

Result!

Using Line Tool(U) add two 1px lines as shown in the screenshot below. Top line color #d9d2d2, bottom line color #f5f5f5.

Place a phone icon at the center in the second column and behind the phone create a selection at the very bottom as shown in the screenshot below and fill it with #000. Once you have fill it go to Filter – Blur – Gaussian Blur 1px.

Next create a 115px by 30px shape using Rectangle Tool. Apply the same blending option as we did in our register button. Refer to the screenshot below for more info of making the button.

Using Text Tool(T) add the name of the product. Text format will be Helvetica 14pt color #383e44. Place it as shown in the screenshot below and once you have done it group all the layer and duplicate it two times and place it accordingly for the third and fourth columns.

Next we will create a horizontal scroll. Using Rounded Rectangle Tool(U) set the radius to 20px and create a shape as shown in the screenshot below.

Apply this Blending Option

  • Drop Shadow: #fff

  • Gradient Overlay: #dbd8d8, #f5efef

  • Stroke: #d9d2d2

Create another shape using Rounded Rectangle Tool(U) as shown in the screenshot below. Apply the stroke as we did in the first shape.

Result

Step 6: Working on Products List

In this part I will not go on to detail because all styles here are the same on the featured product section. I will just walk on to an overview on how I did it.

Header Part

In here I created 45px of height shape using Rounded Rectangle Tool(U) and applied the same blending option as we did in main navigation & tabs. Text format are the same and styles. Notice at the right side there is an arrow and numbers. For the arrow I created this using Pencil Tool(B) and applied the same drop shadow as we did on every text. For the active number I used color #fbb829. Also for the distance from featured product & product list is 20px.

In this part all styles are copied from the featured product, so I will leave it up to you. height of each product list will be 250px. I moved the button on the right part and added a price on the left part. Distance from the boundary box will be 20px. The text format for the prize is Helvetica 18pt color #fbb829.

Step 7: Working on Sidebar

Sidebar will contain a Category list & What’s Hot list. Again I will not go on to detail in doing this Il just walk you through it.

Categories

In the header part size of the header is 45px, the same text style and format.

The height of the base will be 215px and I apply 1px stroke color #d9d2d2

Next I added a the list of categories using Text Tool(T). Text format will be Helvetica 15pt color #50565c. I also make a divider using Line Tool(U) color ##d9d2d2. The distance will be 15px top and bottom for the text. Just refer to the screenshot below.

Next I added a bullet using Ellipse Tool(U) fill color #d9d2d2.

Apply this Blending Option

  • Inner Shadow: #000

Result!

What’s Hot

In this part it is just a copy of categories section and I added a phone icon and price. So I will leave it up to you. Text, color, distance will be the same.

Step 8: Working on Footer

Footer section will be divided into 5 columns this will contain News letter, Account Info, Shipping Info, Quick Links, and Follow us.

News Letter

Using Text Tool(T) add the following text as shown in the screenshot below.

Using Rectangle Tool(U) create two 205px by 30px shape with a distance of 10px and label it “Name & Email” using Text Tool(T). Text format will be Helvetica 13pt color #009c9a.

Next grab a copy of sign in button and uncheck the stroke from the blending options. Change the label to Register and place it as shown in the screenshot below.

Account Info, Shipping Info, Quick Links

For the header I used the same format as we did in the news letter. The links will be Helvetica 13pt color #fff. Dividers distance for each block is 25px and the dividers color is #009c9a.

Follow Us

In here still the same header format and then you will need to download the social icons and place them accordingly.

Social Icons: Apply this Blending Option

  • Drop Shadow: #000

And finally we’re done. I hope you learned something from this tutorial and may this tutorial help you in your future projects. For beginning designers I hope you followed this and if you have something to ask just drop it below. Thank you for reading and godless everyone. :)

Final Preview


1stwebdesigner – Graphic and Web Design Blog

Posted in: Css - Xhtml ⋅ Tagged: , , , , ,

8 Techniques To Create An Irresistible Landing Page

02 Kasım 2011 10:40 ⋅ Leave a Comment ⋅

A landing page is a very important tool for online marketing and is also known as a lead capture page. The definition of it is a single page that appears in response to clicking on an advertisement. These pages are usually designed with a clear scope: to sell or make the user subscribe. They are normally extensions of the advertisement link the user clicks on. You can find links to landing pages in social media, e-mail or search engine marketing campaigns and many other places. You can find them all over the internet. With a clear goal of converting the visitors into buyers or subscribers, the landing pages have to be convincing right from the first moment, otherwise they will not lead to the desired purpose.

1. Embrace or avoid the fold

There are many discussion about the fold on the internet and even if I don’t have a preference, I can see that each one of them has advantages and disadvantages. The fold (the part of the page visible without scrolling down) can be used to your advantage if you manage to make the user scroll down. People say the users do this anyway, but I might not agree. If the things above the fold are not interesting, I will not scroll – why would I, after all?

Although I do not think designers should expect people to scroll, if they have a nice teaser over the fold then they can put much more information about the campaign or product under it. For example, I’ve seen landing pages with illustration above the fold and with the boring and long text under it. The illustration got the user interested and now it is more likely for him to read the information, regardless of how boring it is. This is the way I usually like to advise people to do it.

The others say that animation or illustration should not be above the fold, because it loads slowly and it drives the user away. I consider this totally unfounded and stupid to say. We are all designers here, nobody uploads images of 5MB that load in 1 minute. If we still do that, it means we either do it on purpose or we should find other jobs. This argument is not valid. Moreover, if you manage to attract the interest of the user with the boring text, what good will the illustration under the fold do?

2. You need a clear call to action

The first point we’ve talked about is not the most important – this one is. Having a clear call to action will not distract the user’s attention and he can focus on the purchase (which is exactly what you look for). It is a huge mistake to design a cluttered landing page and not make the call to action clear, because in the end it all comes down to how much you’ve sold. The page has to be simple and explicit for all kinds of users. Bare in mind that not only IT experts and computer geeks visit the ads, so do beginners. The purpose of the website needs to be defined by the user within a matter of seconds.

It is not difficult to focus the call to action, you just need to use some of the following elements:

  • Ask a question
  • Make use of the graphics to direct the user’s eye (no Vegas Lights though, please – gradients or background images work well here).
  • Keep the most important thing on the top of the page
  • There has to be a contrast between the dominant color of the page and the call to action. It needs to stand out.
  • Keep it short – one sentence should be enough; simplify everything as much as possible – you need to sell, not to tell stories.

Groupon has a great landing page which you can see below. If we take a look at the list above, we can see that Groupon used some of the elements I’ve named. They asked a question (which is not really a question, but the user still has to confirm the city), they keep the call to action on top (very close to the Golden Area), there is contrast between the green background and the light call to action box and the text is short (“Save 50% to 90% in Vancouver”). And voila, they have a very useful and productive landing page.

The Landing Page of Groupon

3. Use infographics

It should be clear for everybody out there that long blocks of text will not sell anything. People do not read too much anymore; therefore we have illustrations, animations and sound to replace the old way of doing it. Text does not grab attention, graphic elements do. Therefore you should try to maintain a balance between these two. I know it is difficult because people should be interested in text and what you offer, but they are not; and you are there to make them buy. So design the way they want it!

Text and graphics can easily be combined by a good graphic designer, so if you are not one of them, find one. This concept is called infographics. They are quite easy to notice and usually they get the point across to the viewer quickly. This way you can have both text and graphic in one interactive concept and make them work together.

If you are stubborn and really wish to insert blocks of text, look into a typography manual. Keep the font at a decent size, increase the line height and pick a friendly and easy-to-read font. People are more likely to run away (and they will, trust me) if they see a large block of text. It gives a feeling of the internet back in the 90s, for those who experienced it – you don’t want that on your landing page.

Below you can see two examples of how an infographic works. These two are not landing pages, I just want to show you how easily text and illustration can be combined.

Bankruptcies Infographic

Infographic by Coca Cola

4. No other links

Removing any other link besides the call to action buttons is important, because the last thing you want is to drive the user away to another page. You can have a Privacy Policy link which should open in a separate tab, but don’t include other links. Users get carried away pretty fast. As the experts advise, there are only two options for a user who hits a landing page: signing up or leaving the page.

There are many examples on the internet where landing pages are actually part of the website. In this case you should try to eliminate the navigation as much as possible or at least make everything open in a new tab. The second choice is quite annoying and I wouldn’t go with it. I would rather try to put the navigation somewhere else – or, for better results, I would actually never have a landing page as part of the whole website.

5. Offer something for free

There is nothing wrong with offering something for free in exchange for the e-mail address or whatever it is you are asking for. Most of the time it actually helps. Make sure your landing page specifies that you offer a product, trial or anything else for free. Is there anybody out there that doesn’t like free stuff? Free always works, so why not go for it.

Vinotrac offers access for free

Although free always works, this doesn’t mean you should literally have the word all over the place. Quotes like “No obligation”, “No charge”, “No credit card required”, “No commitment required” and many others work very well too.

6. Where to sign up?

Landing pages are not only made for selling something, but also for convincing users to sign up for future details or updates. But how do you do this?

Well, this might be a difficult one, because you have two options: you can insert a form or make a call to action button which links to a form completion page. Which one should you use? It depends on the type of form you have.

Mail Chimp has a nice call to action button instead of a form to fill in.

If you need only up to four fields to be filled in, then put the form. Otherwise just create a call to action button which will take the user to a separate page where he can fill in a form with more fields. If you choose this, then make the button big and let the user know he goes to a page with a long and boring form to fill. If he gets there, it has to be his choice and he has to know what he should expect.

7. Focus on security too

Don’t leave this behind. Security is one of the biggest issues on the internet right now. Don’t let it be on your website too. Do everything you can to protect your users. Start with having a visible SSL certificate and an HTTPS connection. As said before, a link to Privacy Policy should not be skipped. And there is also a reason that every program you need makes you check a small box before you can continue. Even if you don’t, they want to be sure you’ve read the policy before.

Both Secure (https) and SSL connection are featured here

Most of the users tend to feel more comfortable on any kind of page if they notice these elements, therefore try to have as many as possible. Don’t forget you’re dealing with personal information such as e-mails or phone numbers or, even more, addresses and credit card numbers.

8. Closely follow the progress

There are many tools on the internet which can help you track the progress of your landing pages. The best of them is by far Google Analytics, which gives you an insight to how the users interact with your page. Try to look as much as possible into that and increase the conversion rate of your landing page. At the end of the day it all comes to this.

Conclusion

Having a landing page is something everybody looks into nowadays. They may sell a product, write newsletters, tease people with gossip from the latest technology trends or even spam users, all of them look to have a landing page which collects as much information as possible. Try to follow the tips above and tell us how well they’ve worked for you. If you think we’ve missed something, don’t hesitate to leave us a comment. We would be really glad with some more insights from you.

Read more

101 Landing Page Optimization Tips on Unbounce

Top Landing Page Tips From The Pros on Seldomstatic

Ten Tips For Landing Pages on Lead Generation

Five Landing Page Tips to Boost Your Conversion Rate on Search Engine Land

50+ Examples of Highly Optimized Landing Pages on Smiley Cat


1stwebdesigner – Graphic and Web Design Blog

Posted in: Css - Xhtml ⋅ Tagged: , , , ,

Artthatworks: Create A Beautiful Portfolio Landing Page In Adobe Photoshop

26 Ekim 2011 21:12 ⋅ Leave a Comment ⋅

Hello readers! In this week’s tutorial we will be making an awesome, beautiful portfolio in Adobe Photoshop. The landing page will contain a header section, slider, an eye-catching about you text, what you do, a section for your current project, a footer that will contain about you, latest news, and latest tweets. This tutorial will be detailed so that beginners can follow through. Let’s get started!

Here is what we will be making, click on the image for a full preview:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1750px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one important thing when using Ruler Tool is the Info(Information) Panel. This is very useful when you are measuring using the ruler as the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Repeat the step of create a guide but now change the value to 1180px, this will make a total of 960px to the center of our canvas.

Step 2: Working on Background

Fill the background layer with #d8e4d6. Download the pattern from the resource above. Now, select Paint Bucket Tool(G) set it to pattern from the dropdown menu.

Select a pattern as shown in the screenshot below. Create a new layer above the background layer and fill it, and lastly set the blend mode to Soft Light.

Select Rectangle Tool(U), set the fill color to #23353e. Create a 100% by 330px shape at the very top of the page.

Apply this Blending Option

  • Stroke: #1a272e

  • Drop Shadow: #fff

Go to Filter – Convert for Smart Filters, again go to Filter – Noise- Add Noise.

Step 3: Working on Header

The header section will contain a Logo and Navigation. Remember it is important to organize your layers by naming and grouping them. I will leave it up to you how you organize and name your layers.

First we will create a zigzag pattern the same as on the preview above. To create it create a new document size 15px by 15px, background to transparent. Using Pencil Tool (B) fill color #1a272e create a shape a shown in the screenshot below.

Go to Edit – Define Pattern name it zigzag. Now, using Rectangle Tool (U) with the same fill with our pattern, create a 100% by 20px shape at the very top of the canvas.

Using Rectangular Marquee Tool (M) create a 100% by 15px selection and fill it with the pattern we made using Paint Bucket Tool (G).

Apply this Blending Option

  • Drop Shadow: #fff

Result

Logo

For the logo I used a font name Lobster Two that you can find on Google Fonts. Let’s put up our site logo using Text Tool(T), size 36pt, color #fff.

Apply this Blending Option

  • Drop Shadow: #000

Navigation

For the navigation I used the font Museo that can also be found on Google Fonts. Select Text Tool (T), Museo 700, size 16pt, color #fff & #67b256 and add this navigation links home, portfolio, blog, contact.

Step 4: Working on Slideshow

The sideshow section will contain image preview, description, and controls.

Image Preview

We need to create a base layer to hold the images for our image preview. To do this select Rectangle Tool(U) and create a 960px by 300px shape.

Apply this Blending Option

  • Stroke: #fff

Now that we have a base layer we will create a shadow on both corners so that it will pop up and have some depth. To create a shadow create a shape using Pen Tool(P) as shown in the screenshot below.

Fill the shape with #000. Go to Filter – Blur – Gaussian Blur.

Again go to Filter – Blur – Motion Blur.

lastly set the layer Opacity to 50%.

Text Description

Using Text Tool(T) add text as shown in the screenshot below.

Slider Controls

To create the next & previous buttons select Rounded Rectangle Tool(U) Radius to 10px. Refer to the screenshot below for the guide.

Merge both shapes and resize it about 13px by 21px.

Apply this Blending Option

  • Drop Shadow: #fff

  • Inner Shadow: #000

  • Color Overlay: #cce7df

Duplicate the arrow and transform it on the other side. Change the Color Overlay to #fff and place it as shown in the screenshot below.

Now that we have our previous & next button, let’s create the identifier “circles” or what ever they call it. Using Ellipse Tool create a 19px by 19px shape color #cce7df. Apply the same Inner Shadow & Drop Shadow as we did in our Previous & Next buttons.

Make a selection of the circle by pressing Ctrl + Click to the vector mask thumbnail of the shape in the layers panel. Go to Select – Modify – Contract. Contract it by 5px and fill with #fff.

Apply this Blending Option

  • Drop Shadow: #000

Group the circles that we have just created and duplicate it 2 times. Select 1 of the circles and change the fill color to #67b256.

Step 5: Working on About Text

To start let’s create first the dashed lines pattern. Create a 20px by 20px transparent document. Using Pencil Tool(B) color #9b9b9b create a shape as shown in the screenshot below.

Name the pattern anything. Now, create a selection 960px by 20px and fill it with the pattern we just made. Duplicate the layer and apply a Color Overlay #fff.

Let’s add our About text using Text Tool(T). After placing the text add a drop shadow color #fff.

Make another selection 40px below the text and repeat the step as we did in making our dashed lines. Delete the middle section of dashed lines. You may have something that looks like in the screenshot below.

We will be placing a cool shape on the middle. Select Shape Tool(U) and select a shape as shown in the screenshot below.

Create that shape with the same fill color of our dashed lines and drop shadow.

Step 6: Working on What I Do

For this section we will just make a title header and a sample description about what you can offer. Also, we will be making a read more button. This section will be divided into 3 columns the width for each column will be 300px and the distance from each columns will be 30px I’ll leave you to create a guide for that.

Now, select Text Tool(T) and add a title header and a sample description, refer to the screenshot below for the format.

For the read more button. Select Rounded Rectangle Tool(U), set the Radius to 3px the color will be #67b256. Create a button using it the size will be 90px by 25px.

Apply this Blending Option

  • Inner Shadow: #fff

  • Stroke: #fff

Result!

Duplicate it twice and place it according to your guides.

Step 7: Working on My Current Projects

In this section we’re obviously placing our most current projects. The header will be the same text format and color as we did in our what I do. Using Text Tool(T) place the header text 60px below the read more button.

Select Rectangle Tool(U). For the images we will first make a base layer to hold the images, the size will be 300px by 150px. Place it 30px below the header.

Apply this Blending Option

  • Outer Glow: #000

  • Stroke: #fff

After applying, duplicate it twice and place it accordingly.

Step 8: Working on Testimonials

This section will contain thumbnail images of client work, testimonials, name, and a website url. For the image thumbnail create a base 90px by 90px #fff base shape using Rectangle Tool(U). Apply the same outer glow as we did in our current project. Place it as shown in the screenshot below.

Add dummy text for testimonials, name and website url using Text Tool(T). Refer to the screenshot below for the format.

Step 9: Working on Footer

Footer section will contain about, latest news, latest tweets, and copyright text. First we will need to create our base layer, this is just a repeated steps as we did in our header section. Using Rectangle Tool color #23353e cover the remaining section 80px below the testimonials. Next, you will convert it to smart filters by going to Filter – Convert for smart filters, again go to Filter – Noise – Add noise 0.5%.

Make a selection using Rectangle Marquee Tool(M) and fill it with zigzag pattern. Rotate it vertically as shown in the screenshot below.

Still this footer section will be divided into three columns. 1st column is for the about section, 2nd for latest news, and 3rd for latest tweets.

About Me

For the header the font and font color has change to #fff with a 1px #000 drop shadow. The dummy text for about me the text format is Droid Sans 13pt #a4afb4 and apply the same drop shadow.

To create the image thumbnail first you should grab a 130px by 160px image.

Apply this Blending Option

  • Outer Glow: #000

  • Stroke: #fff

Duplicate it twice and transform it by pressing Ctrl + T and rotate it a bit to the left and right.

Latest News

The same header and text. For the date and category color will be 667983, size 11pt. For the dividers color will be #0f161a, #37515e.

Grab a copy of read more button, change the color to #286065. Text wil be #fff, #0f161a.

Change Blending Option

  • Stroke: #0f161a


Result!

Latest Tweets

The same text format. Link color #67b256.

Copyright

Using Rectangle Tool(U) color #1a272e create a 100% by 70px at the very bottom of the canvas. Apply a noise using the same step as we did to our base layer in our header and footer.

Apply this Blending Option

  • Inner Shadow: #fff

Using Text Tool(T) add your copyright text. Droid Sans 12pt color #667983. Also, add a 1px drop shadow. Place this copyright text on the left side, on the other side duplicate a copy of the logo and place it at the bottom right side of our footer.

Wew! Here is our Final Result!

I hope you enjoyed and learned something from this tutorial. If you have questions just drop it below. :)


1stwebdesigner – Graphic and Web Design Blog

Posted in: Css - Xhtml ⋅ Tagged: , , , , , , ,