id33b1: 1stwebdesigner

duminică, 6 mai 2012

1stwebdesigner

1stwebdesigner

Recreate Google+ Pages Using Adobe Photoshop

Posted: 06 May 2012 06:00 AM PDT

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

Google Plus fans out there all know that Google+ got a redesign that makes it prettier and simpler to navigate. We are going to recreate the whole design. Imitating  a design is a way to learn new things and apply it to future projects. What beginner’s will learn from this are how useful Direct Selection Tool(A), Pen Tool(P) and Shape Tool(U) can be in making a website design in Photoshop. If you haven’t added yet 1stwebdesigner into your Google+ circles add it now!.

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

Resources for this tutorial

Step 1: Setting up the Document

As we all know with the Google+ redesign, there is a big white space on the right side that wraps the content, depending on the resolution of the screen you’re using to view it. For this tutorial we’re working with a 1366 x 768 resolution.

Instead of 1366px let’s make a 1400px x 1300px document in Photoshop.

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

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

Also one thing important in using the Ruler Tool is the Info(Information) Panel. Use the Info Panel to see the ruler information in the information panel. Make sure this panel is visible on the right. If it is not shown you can access this by going to Windows – Info.

As you can see in the Google+ layout the navigation was placed on the left side and the content and chatbox placed on the right. As I mentioned earlier, if you’re working on a higher resolution there will be a big white space on the right side wrapping the content. The white wrapper has a 20px margin from the chatbox. Take a screenshot by pressing Print Screen on your keyboard and paste it in Photoshop and try to measure the width using Ruler Tool(I).

Here is the result of what I measured. Don’t forget to add guidelines in every measurement.

  • Navigaiton: 100px
  • Content: 1035px
  • Chatbox: 212px

For the background fill it with #f1f1f1.

Step 2: Working on Top Header (Links, Google+ Logo, Search, Profile Notification Area )

Links

Using the Rectangle Tool(U) with a fill color of #2d2d2d create a 100% by 30px shape.

Apply this Blending Option:

  • Drop Shadow: #000000

Next, using the Text Tool(T) add the top links and follow the text format as shown in the screenshot below.

  • Active Color: #fff
  • Normal State: #bbbbbb

As you may have noticed, there is a Plus icon and little arrow facing down. Do this by simply using the Pencil Tool(B). Refer to the screenshot below.

Google+ Logo

For the Google+ logo,  just grab a copy of their original logo and place it 27px from the left.

Search Bar

Using the Rectangle Tool(U) create a 512px by 30px shape 57px from the logo with a fill color of #fff. 

Apply this Blending Option:

  • Stroke: #d9d9d9

Next will be the search button. Using the Rounded Rectangle Tool(U) create a 70px by 30px shape.

Apply this Blending Option:

  • Gradient Overlay: #3079ed, #4d90fe

  • Stroke: #3079ed

Let’s create that search icon. Select Ellipse Tool(U) create a 10px by 10px shape and make the Fill color on the layers panel to 0%.

Apply this Blending Option:

  • Stroke: #fff

Next select the Rectangle Tool(U) and create a 2px by 4px shape with a fill color of #fff. Rotate it to 145 degrees and place it as shown in the screen shot below.

Profile Notification Area

The notification area (or whatever you call it), is aligned with the chatbox. Using the Rounded Rectangle Tool(U) with a Radius of 2px create the following shape with desired sizes mentioned below. Every shape will have a distance of 15px.

  • 1st Shape: 30px by 30px
  • 2nd Shape: 74px by 30px
  • 3rd Shape: 40px by 40px

As you can see the second shape which is the Share Button has an arrow in the middle of the right side of the shape. To create, this we need to modify and add the Anchor Points of the shape.

To do this you must:

  1. Select the Vector Mask of the shape on the layers panel.(You should see a thin black line on the shape)
  2. Select the Direction Selection Tool(A) and click on the black line.
  3. Select the Pen Tool(P). With the help of this tool we can now add or remove anchor points. Also with the help of the Direct Selection Tool(A) we can move the points and change the look of the shape.
  4. Add these anchor points using the Pen Tool(P). The distance of each point is 5px.
  5. Using the Direct Selection Tool(A) move the anchor point 5px to the right. Pull the point(black circle) by 1px to the anchor anchor point.

Apply this Blending Option:

  • Gradient Overlay: #ededed, #f7f7f7

  • Stroke: #c6c6c6


There you have it! We successfully modified and styled the shape. Take note that we will be using this step a lot in this tutorial. I will not walk you through every shape we will be creating later on, so it’s my challenge to you to do it on your own.

Fill the Shape with text using the Text Tool(T) using this format.

  • Arial Regular 13pt #666666

For the Plus icon use the Pencil Tool(B) 2px and for the arrow down just duplicate the one we create earlier and change the color to #909090.

Step 3: Working on the Sidebar (Hangout Button, Chatbox)

Hangout Button

Using the Rounded Rectangle Tool(U) create a 212px by 36px shape with a radius of 2px.

Apply this Blending Option:

  • Gradient Overlay: #f8f8f8, #ffffff

  • Stroke: #d7d7d7


Next we need to create that Hangout Icon. The shape color will be #6d6d6d, as I said, I will not go into detail, just follow the screenshot below to see where I put the anchor points.

When you’re done, create another shape with a fill color of #ffffff.

Now that we’re finished with these shapes. we will be using it again in doing the chatbox so we need to make the shape as custom shape. To do this right, click the shape using Direct Selection Tool(A) and click on Define Custom Shape, make sure to name it appropriately. Do this for both shapes. If we want to use this shape we can find it by using the Shape Tool(U) you should see the shape by scrolling down to the very bottom of the selection.

Lastly add the hangout text

  • Arial Regular 13pt #555555

Chatbox

As you can see in the screenshot above in my layers panel everything is organized by group. I started by creating a shape using the Rectangle Tool(U) with a fill color of #fff and in that shape I apply a stroke #d7d7d7.

Next I add those line separators using the Line Tool(U). The first one is 70px distance from the top and the color is #d7d7d7. Then the rest is the separator for each person who is online or whatever their status is. The distance of each separator is 42px, color #eeeeee, width 194px.

.

Next I add the chat with box. I create a 200px by 26px shape using the Rectangle Tool(U) with the same stroke color and place it on the center 7px distance from the divider. For the chat bubble icon I used the one we created using Shape Tool(U) and change the fill color to #909090. For the text the same text format we did in the share button.

Next I add the y-scroll. I create a 9px by 226px shape using the Shape Tool(U) with a fill color of #cbcbcb. On top of it I add line on every edge except the right side using Line Tool(U), 1px, color #b6b6b6. The shape is placed 1px from the right.

For each thumbnail picture the sizes are 32px by 32px. The distance of the name from the thumbnails is 25px.

Text Format:

  • Arial Regular 13pt #000000 (For your name)
  • Arial Regular 13pt #333333

Next is the status. Each person on my online list has a different status. Some are online, away, idle, busy. I will list the layer styles of each icon for you to follow and create your own.

10px by 10px shape.

Apply this Blending Option:

  • Inner Shadow: #6cd04d

  • Gradient Overlay: #36a226, #50b839

  • Stroke: #40a129

Apply this Blending Option:

  • Inner Shadow: #5dc443
  • Gradient Overlay: #39a529, #4db636
  • Stroke: #2b7c18

For this icon just add that 2 lines using Line Tool(U), 1px, colro #ffffff

Apply this Blending Option:

  • Inner Shadow: #f2c40c
  • Gradient Overlay: #e9a007, #eeb40a
  • Stroke: #a17802

Apply this Blending Option:

  • Inner Shadow: #f6d60f
  • Gradient Overlay: #e89d06, #edb20a
  • Stroke: #9c7402

Apply this Blending Option:

  • Inner Shadow: #dedede
  • Gradient Overlay: #aaaaaa, #c1c1c1
  • Stroke: #8b8b8b

And the last thing we will add is the drop down icon. Just duplicate a copy of the arrow down icon. Below that layer create a 12px by 12px shape using the Ellipse Tool(U) and apply a 1px stroke color #cdcdcd.

Step 4: Working on Main Navigation

I’m sure you have the G+ Freebies Icons now, place it at the center according to the screenshot shown above. The Icons have 35px between them. Also, the distance of the text from the icon is 10px.

  • Tahoma Regular 11pt #a7a7a7

For the more icons just create a 8px by 8px shape using Ellipse Tool(U) and copy the layer style of those icons.

Step 5: Working on Main Content(Page Title, Pots, Tabs, Profile Pic etc..)

To start, create the base layer or the wrapper using the Rectangle Tool(U). The width will be 1035px and apply 1px #d7d7d7 stroke.

Page Title

Create a guideline 20px from the top and from the left. Then, using the Text Tool(T) add the page title. Also grab a copy of the pages icon from the freebies and resize it to 15px by 15px.

  • Arial Regular 20pt #222222

Button

Create a guideline as shown in the screenshot shown above. Next using the Rounded Rectangle Tool(U) with a Radius of 3px, create a 78px by 30px shape with a fill color of #3d9300. Apply a 1px #29691d stroke. Lastly place it 30px from the guideline.

Label it with text Arial Regular 11pt #ffffff. Next create a 13px by 13px shape using the Ellipse Tool(U) make the Fill in the layers panel to 0% and apply a 2px #fffffff stroke on it.

Banner

For the banner create a 890px by 180px shape using the Rectangle Tool(U), place it 20px below starting from the button. Lastly add a 1px #d7d7d7 line above the shape that will cover the entire wrapper.

Profile Picture

First you need to create this guide as shown in the screenshot below.

Using the Rounded Rectangle Tool(U) with the same Radius, create a 260px by 260px shape with a fill color of #ffffff.

Apply this Blending Option:

  • Drop Shadow: #000000

  • Stroke: #cccccc

Create another shape above it using the Rectangle Tool(U) the size will be 250px by 250px align it on the center.

Below that shape create another 250px by 90px shape using the Rounded Rectangle Tool(U) with a fill color of #f9f9f9.

Apply this Blending Option:

  • Drop Shadow: #efefef

  • Stroke: #cccccc

Using the Line Tool(U) create those 1px #cccccc lines as shown in the screenshot below.

For the +1 button I create a shape using the Rounded Rectangle Tool(U) with the same Radius and modify the anchor points except the bottom left.

For the +1 Icon I create it using the Pen Tool(P) just refer to the screenshot below. Then, I apply a 1px Drop Shadow color #621e12.

Next we will create the share icon. Still use the Pen Tool(P) for this one, just refer to the screenshot below. The fill color for the shape is #c1c1c1.

Apply this Blending Option:

  • Drop Shadow: #ffffff

  • Inner Shadow: #000000


For the link icon I used the Rounded Rectangle Tool(U)  and a combination of 4 shapes. 1st 2 shape is 8px by 8px color #e4e4e4, one at the bottom and other one is on the top with a distance of 2px. 3rd shape is 4px by 9px color #f9f9f9 and place it on the center. The last shape is 2px by 5px and place it in the center again. I group it in a folder and rotate it 45 deg. and lastly add a 1px by 6px line using Line Tool(U).

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

  • Arial Regular 13pt #333333
  • Arial Bold 16pt #333333

Tabs

Create a 264px by 30px shape using Rounded Rectangle Tool(U) with a fill color of #fdfdfd and apply 1px #dedede stroke.

For the active tab create a 63px by 30px shape with a fill color of #fcfcfc.

Apply this Blending Option:

  • Inner Shadow: #000000

  • Stroke: #cbcbcb

Add a separator for the non active tabs using Line Tool(U) color will be #dedede, distance 62px.

Lastly add the text using Text Tool(T).

  • Arial Regular 13pt #000000(Active)
  • Arial Regular 13pt #333333

Posts

Create a 48px by 48px using Rounded Rectangle Tool this will be for the thumbnail pic. Next create a shape as shown in the screenshot below the total size is 504px by 584px.

Apply this Blending Option:

  • Drop Shadow: #000000

  • Stroke: #cccccc

Next we will going to add the text. Follow the format as shown in the screenshot below.

Make the +1 icon and share I con as custom shape or just simply duplicate it and apply the same layer style as we did on the share icon. Place it as shown in the screenshot below.

Below the base shape create a 493px by 64px shape with a fill color of #f8f8f8.

Apply this Blending Option:

  • Drop Shadow: #efefef

  • Stroke: #d5d5d5

For the comment text box create a 460px by 30px shape with a fill color of #ffffff and apply a 1px #dddddd stroke. Lastly label it with text.

Sidebar

This part is pretty easy just follow the screenshot below.


Finally we’re done. I know this tutorial is not that interesting because we just copy the Google+ page design. But the point of this tutorial is copying what new or let say a design that you like that you want to know how it is designed on photoshop. I hope beginners who followed this tutorial learn something new and hopefully you can apply it to you future projects. If you have questions, comments and suggestions just drop it below. Also kindly answer this question “If I would make another web design tutorial what would it be?”. Thanks for reading till next time. :)
Publicat de la 17:29

Niciun comentariu:

Trimiteți un comentariu

Abonați-vă la: Postare comentarii (Atom)