For starters you will learn how to create the color boxes using basic tools and some simple layer style attributes along with basic typing techniques.
Next, you will learn how to copy and paste layer styles and how to use this technique to create new color boxes and the numbered boxes. Using basic vector shape building techniques and some new layer styles you will learn how to create the arrows and the pointers.
Finally, you will learn how to save a simple action or a style and how to use them to create the highlighters or the frame for your zoomed ares.
1. Create a New Document, Set Up a Grid and Pick the Main Colors
Open Photoshop and hit Control-N to create a new document. Enter all the data shown in the following image and click OK.Enable the Grid (View > Show > Grid) and the Snap to Grid (View > Snap To > Grid). You will need a grid every 1px, so simply go to Edit > Preferences > Guides, Grid & Slices and focus on the Grid section. Enter 1 in the Gridline Every box and 1 in the Subdivision box. Also, set the color of the grid to
#a7a7a7. Once you have set all these properties click OK.
Try not to get discouraged by all that grid, it will ease your work
later and keep in mind that you can easily enable or disable it using
the Control-" keyboard shortcut. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. 
Step 2
For starters you need to pick your main color. For this tutorial your main color will be#0070be.
If you wish to choose a different color make sure that it's one that
doesn't hurt the eye and that it works on both dark and light
backgrounds.Focus on the Color panel (Window > Color), enter the color code mentioned a few moments ago then move to the Swatches panel (Window > Swatches) and simply hit the New Swatch button. Enter "mainColor" in the name box, click OK and you will find your new color in the Swatches panel. Next, you need to add variations of your main color. Return to the Swatches panel and simply save the
#1e8edc (name it "secondColor") and the #80b8df (name it "thirdColor") colors. 
2. Create the Color Boxes
Step 1
Set your "mainColor" as the foreground color and pick the Rounded Rectangle Tool. Focus on the the control panel and simply set the Radius at 5px. Move to your canvas and create a 77 x 75px vector shape.
Step 2
Focus on the Layers panel (Window > Layers) and simply double click on your blue rounded rectangle to open the Layer Style window. Activate the Stroke and the Drop Shadow then enter the properties shown in the following image. For the Stroke you'll need the "secondColor" while for the Drop Shadow you'll need that same "mainColor".
Step 3
Make sure that the Rounded Rectangle Tool is still active and simply create the set of vector shapes shown in the first image. Focus on the Layers panel, right click on the first shape that you made (the one with the Stroke and the Drop Shadow) and simply go to Copy Layer Style. Keep focusing on the Layers panel, select the six rounded rectangles made in this step, right click on one of these shapes and go to Paste Layer Style.
Step 4
Open the Character panel (Window > Character) and focus on your 77 x 75px rounded rectangle (the first vector shape that you made). Pick the Type Tool, simply click on your canvas, add the "R:" piece of text and place it as shown in the following image. Make it white (#ffffff) and use the Inconsolata font with the size set at 20px. Using the same tool and text attributes add the other two pieces of text shown in the following image. 
Step 5
Using the Type Tool (T), add the three piece of text shown in the following image and use the same attributes applied for the existing pieces of text.
Step 6
Focus on the Layers panel and open the Layer Style window for one of your pieces of text. Activate the Drop Shadow and enter the properties shown in the following image. Add the same attributes for the rest of the text.
Step 7
Make sure that the Type Tool (T) is still active and add a bunch of new text as shown in the following image. The Inconsolata font is a monospaced font, which means that your characters will occupy the same amount of horizontal space. This simply means that you won't have to worry about the length of your text when you will need to change the colors codes. Don't forget to add that subtle Drop Shadow style for this new text.
3. Create the Numbered Boxes
Step 1
Make sure that your "mainColor" is still the foreground color, pick the Ellipse Tool and create a 30px circle. Focus on the Layers panel, copy the Layer Style attributes used for one of your blue, rounded rectangles and paste them unto the vector shape made in this step.
Step 2
Pick the Type Tool, simply add a "1" and place it as shown in the following image. Make it white (#ffffff) and use that same Inconsolata font with the size set at 20px. Focus on the Layers panel, copy the Layer Style attributes used for one of the existing piece of text and paste them unto the piece of text made in this step. 
Step 3
Reselect your blue circle and that "1" and Group them (Control-G). Duplicate this fresh group (Control-J), select the copy and drag it several pixels to the right as shown in the first image. Focus on your group copy and simply replace that "1" with a "2". Repeat this technique and add eight group copies as shown in the third image. Don't forget to edit the text.
4. Create the Arrows and the Pointers
Step 1
Set the foreground color at#dfdfe1, pick the Rounded Rectangle Tool and create a 34 x 3px shape. 
Step 2
Make sure that your grey rounded rectangle stays selected and pick the Rectangle Tool. Hold the Shift button from your keyboard and simply add a 13px square as shown in the first image. Focus on the right side of this new shape and switch to the Direct Selection Tool. Select the top anchor point and drag it 5px down then select the bottom anchor point and drag it 5px up. In the end your square should turn into a trapezoid as shown in the second image.
Step 3
Keep focusing on your grey vector shape. Using the Direct Selection Tool, select the four anchor points that make up your trapezoid. Hold the Shift button from your keyboard then simply click inside your trapezoid and drag it 41px to the left as shown in the second image. Make sure that the four anchor points that make up this new trapezoid are select and hit Control-T. Rotate your selection 180 degrees, hit Enter and in the end things will look like in the third image.
Step 4
Keep focusing on your grey vector shape and make sure that it stays selected. Pick the Rounded Rectangle Tool, hold the Shift button from your keyboard and simply add four, 2 x 5px vector shapes as shown in the first image. Use the same tool, and holding the Shift button and add six, 4 x 3 px vector rounded rectangles for your arrow shape as shown in the second image.
Step 5
Reselect your arrow vector shape and simply replace that light grey with your "mainColor". Open the Layers Style window for your blue arrow and enter the properties shown in the following images.
Step 6
Duplicate your arrow (Control-J), select the copy and drag it several pixels to the right as shown in the first image. Make sure that your copy is still selected, hit Control-T, rotate it 90 degrees then hit Enter. Open the Layers Style window for the arrow made in this step, focus on the Inner Shadow and the Drop Shadow sections and simply edit the Angles as shown in the following images.
Step 7
Duplicate your two arrows (Control-J), select the copies and simply drag them several pixels down as shown in the following image.
Step 8
Focus on the copy of your horizontal arrow. Pick the Direct Selection Tool, select the anchor points that make up the right arrowhead and simply hit the Delete button from your keyboard. In the end things should look like in the second image.
Step 9
Focus on the copy of your vertical arrow. Pick the Direct Selection Tool, select the anchor points that make up the bottom arrowhead and simply hit the Delete button from your keyboard. In the end things should look like in the second image.
Step 10
Set the foreground color at#dfdfe1, pick the Rounded Rectangle Tool and create a 34 x 3px shape. 
Step 11
Make sure that your grey rounded rectangle stays selected and pick the Ellipse Tool. Hold the Shift button from your keyboard and simply add an 11px circle as shown in the first image. Continue with the Ellipse Tool, hod the Alt button from your keyboard and draw a 5px circle as shown in the second image.
Step 12
Reselect your grey vector shape and simply replace the existing fill color with your "mainColor". Focus on the Layers panel, copy the Layer Style attributes used for one of your arrow shapes and paste them unto the vector shape edited in this step.
Step 13
Duplicate your pointer (Control-J), rotate the copy 90 degrees and place it as shown in the first image. Open the Layer Style window for the shape made in this step and edit the Angle attributes used for the Inner Shadow and the Drop Shadow sections as you did for the two arrows. In the end you should have a set of six arrows and pointers as shown in the second image.Keep in mind that you can easily flip these paths using the Edit > Transform > Flip Horizontal/Vertical command. Also, if you wish to increase/decrease the length of your arrow/pointer, make sure that you do not stretch it.
Using the Direct Selection Tool, select the anchor points that make up the extremity of your arrow/pointer and drag them in the desired direction while holding the Shift button from your keyboard.
5. Create the Highlighters
Step 1
Open the Actions panel (Window > Actions), hit the Create New Set button, name it "Annotations" and click OK. Make sure that it stays selected, pick the Elliptical Marquee Tool, focus on your canvas and create simple selection. Make sure that it remains active, return to the Actions panel, simply click on the Create New Action button, name it "Circle" then hit Record. Hit Shift-Control-Alt-N to create a new layer then go to Edit > Fill. Enter the properties shown in the following image (pick a random color) and click OK.
Step 2
Make sure that the layer made in the previous step is still selected and focus on the Layers panel. Lower its Fill to 0% then open the Layers Style window. Enter the properties shown in the following image, click OK and return to the Layers panel. Right click on the same layer and simply go to Convert to Smart Object.
Step 3
Open the Layer Style window for the smart object made in the previous step, enter the properties shown in the following image and click OK. Return to the Actions panel and simply hit the Stop Layeing/Recording button. Double click on "Circle" action to re-open the Action Options window and assign a simple keyboard shortcut.
Step 4
Focus on the Actions panel and make sure that your "Annotations" set is still selected. Pick the Rectangular Marquee Tool, move to your canvas and create a simple selection. Make sure that it remains active, return to the Actions panel, click again on the Create New Action button, name it "RoundedRectangle" then hit Record. Now, go to Select > Modify > Smooth, enter a 3px Radius and click OK. Next, hit Shift-Control-Alt-N to create a new layer and go to Edit > Fill. Enter the properties shown in the following image (pick a random color) and click OK.
Step 5
Make sure that the layer made in the previous step is still selected and focus on the Layers panel. Lower its Fill to 0% then open the Layers Style window. Enter the properties shown in the following image, click OK and return to the Layers panel. Right-click on the same layer and simply go to Convert to Smart Object.
Step 6
Open the Layer Style window for the smart object made in the previous step, enter the properties shown in the following image and click OK. Return to the Actions panel and simply hit the Stop Layeing/Recording button. Re-open the Action Options window for your "RoundedRectangle" action and assign a keyboard shortcut.
Step 7
Using the Ellipse Tool, simply create a shape around the thing that you wish to highlight and make sure that it remains active. Hit the keyboard shortcut assigned for your "Circle" action and your action will do the rest.
Step 8
Using the Rectangle Tool, simply create a shape around the thing that you wish to highlight and make sure that it remains active. Hit the keyboard shortcut assigned for your "RoundedRectangle" action and your action will do the rest.
6. Create the Frame for the Zoomed Area
Step 1
Open the Layer Style window for the layer with your zoomed area and simply enter the properties shown in the following images. Make sure that this shape stays selected, open the Styles panel (Window > Stylies) and simply click the Create New Style button. This will make it easier for you to add these Layer Style properties for any layer that you like. Simply select it and click on your saved style.
Congratulations! You're Done!
Here is how it should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.
أدهم أبهابي مدون محترف مهووس بالتطوير و تغيير ألوان قوالب بلوجر ، أحب ألعاب الفيديو و كرة القدم، ناجحٌ في دراستي إتكلم الفرنسية و الإنجليسية و مالك مدونة نجوم ويب.
محول الاكواد محول الأكواد اضافة الإبتسمات اضافة الإبتسمات تابع المدونة تابع المدونة