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.
New doc 2560×1440
Replace background layer with solid color layer set to #f1f1f1
Go to preferences and set the grid to grid line every 100pixels with 5 subdivisions
(!!!) Turn on snap to grid
Create rounded rectangle shape 800x1100px w/ 20px corners + white fill + add drop shadow black, 15%, 120º, 2-0-2
Create 400x400px ellipse shape and fill with a red and position 6x cells from the top of the card and center it horizontally
Drag in celeb photo and clip it to this shape
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)
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
Duplicate the base card shape up above all the layer and fill with the darkest blue in the scheme
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.
Use the Path Selection arrow to select both shapes and Merge them/convert to regular path
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%
Create rounded rectangle 280×100 w/ 15px corners and center it horizontally and set the fill to the lightest blue color
Add a Drop shadow to this with #477db3 color, 100% opacity, 90º, 5-0-0
Position this button two cells above the top of the bottom blue bar
Create a 60x60px ellipse and place near top right corner and fill with lightest blue in scheme
Drag in check mark icon and place in circle and clip solid color layer to that shape filled with lightest color in scheme
Type out “Margot Robbie” in one text field and make sure the text is CENTERED
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.
Set text to Helvetica “Light” weight.
Heading will be 60pt and the body text will be 23pt
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
Size to 5% of size and clip a solid color layer to it filled with the middle blue in our scheme
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
Drag in three icons, size them to 13%, align to vertical centers, and move 40px in from the left-most edge of each button
Clip a fill layer with the red in our scheme to each icon
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
Align and make exact placement of the text as you wish
Group each icon + text + solid color layer and then align each group horizontally in each “button” if you prefer this look.
Group all UI card layers and center in overall document
I make videos about being creative with photography, design, and filmmaking. I'm a commercial photographer, a logo designer, a camera nerd, an artist, a wannabe thinker, and I like to read books. I arrived on planet earth in the year 1989.