FLAT DESIGN: Create Profile Card User Interface with Photoshop CC

USE SHAPES, SPACING, AND COLOR TO CREATE THIS COOL UI! | We will breakdown how to work with perfectly aligned shapes, grids, and even some cool sizing tricks for typography.

Colors Scheme: https://color.adobe.com/Improved-Flat-UI—By-Frank-color-theme-8953063/

Icons:

https://www.flaticon.com/free-icon/tick-inside-circle_61222

https://www.flaticon.com/free-icon/navigation_149431

https://www.flaticon.com/free-icon/paper-plane_149444

https://www.flaticon.com/free-icon/picture_149092

https://www.flaticon.com/free-icon/like_149217

In this Photoshop tutorial, we will create this sleek flat design avatar/profile card that would look great in almost any application. We will talk about how to use and work with shape layers, Adobe Color, layer styles, alignment using a grid, typography, the golden ratio, icons, and much more! If you’re into graphic design, page layout, app design, web design, or just love Photoshop, this tutorial will be right up your alley!

Tags: flat design Photoshop, photoshop CC, photoshop tutorial, photoshop tutorials, UI, UI design, UI Photoshop, UI design photoshop, web design photoshop, app design photoshop, mobile design photoshop, flat design tutorial, how to, graphic design photoshop, FEAT

Site Exclusive Tutorial Recording Notes:

Disclaimer: these are the actual notes I used to record this video and are written in a language you may or may not understand. Hopefully, you find them useful or cool.

1. New doc 2560×1440
2. Replace background layer with solid color layer set to #f1f1f1
3. Go to preferences and set the grid to grid line every 100pixels with 5 subdivisions
4. (!!!) Turn on snap to grid
5. Create rounded rectangle shape 800x1100px w/ 20px corners + white fill + add drop shadow black, 15%, 120º, 2-0-2
6. Create 400x400px ellipse shape and fill with a red and position 6x cells from the top of the card and center it horizontally
7. Drag in celeb photo and clip it to this shape
8. Show how to find a color scheme on color.adobe and download it to your properties panel for use (run search for “blue UI” and see what shows up)
9. Duplicate ellipse shape and drag it below. Use Properties panel to set size to 440x440px and center it and change fill to the center lightest gray color in scheme and add a drop shadow to this shape: black, 90º, 15% opacity, 3-0-3
10. Duplicate the base card shape up above all the layer and fill with the darkest blue in the scheme
11. Drag out a fresh rectangle while holding the Alt/Opt key when you begin dragging to activate the “minus” shape and cut the blue shape it is only 8-cells tall from the bottom of the card shape.
12. Use the Path Selection arrow to select both shapes and Merge them/convert to regular path
13. Grab the Line tool and set the weight to 2px and place vertical lines 13 cells in from each side of that dark blue line, kill the stroke and fill with the middle blue in the scheme and reduce opacity to 20%
14. Create rounded rectangle 280×100 w/ 15px corners and center it horizontally and set the fill to the lightest blue color
15. Add a Drop shadow to this with #477db3 color, 100% opacity, 90º, 5-0-0
16. Position this button two cells above the top of the bottom blue bar
17. Create a 60x60px ellipse and place near top right corner and fill with lightest blue in scheme
18. Drag in check mark icon and place in circle and clip solid color layer to that shape filled with lightest color in scheme
19. Type out “Margot Robbie” in one text field and make sure the text is CENTERED
20. Create a second text box and type “Margot Robbie was born in Dalby, Queensland, Australia and raised on the Gold Coast.” make sure text is centered here as well.
21. Set text to Helvetica “Light” weight.
22. Heading will be 60pt and the body text will be 23pt
23. Duplicate her name and move it above the avatar and fill text with “Los Angeles, CA” and set the size to 23pt and add the navigation icon
24. Size to 5% of size and clip a solid color layer to it filled with the middle blue in our scheme
25. Duplicate the main title text, change type to say “Follow” and drag it down over the button and make it Helvetica Bold, 37pt size, fill set to the lightest gray in the scheme – align and place in middle of the button
26. Drag in three icons, size them to 13%, align to vertical centers, and move 40px in from the left-most edge of each button
27. Clip a fill layer with the red in our scheme to each icon
28. Duplicate down a copy of the location text and set fill to the red in the scheme and left-align the text, and make the weight medium
29. Add text:
30. Posts
31. 635
32. Favorites
33. 3,472
34. Messages
35. 1,293
36. Align and make exact placement of the text as you wish
37. Group each icon + text + solid color layer and then align each group horizontally in each “button” if you prefer this look.
38. Group all UI card layers and center in overall document