Full course at: https://goo.gl/GRzFNA
Free Exercise Files: https://goo.gl/GUjJJs
Free Cheat Sheet: https://goo.gl/tRhpwr
Photoshop CC 2015 Web Design Tutorial – Web Design Structure How to use the vector shape tool to create website design structure in Photoshop CC 2015.
Picking website colors in Photoshop – Adobe Photoshop CC 2015 Web Design Tutorial 21/48
Video Transcript:
0:00hey video watcher my name is den and by
0:02the end of this video you’ll learn why
0:04you should use the victor shape tool to
0:06add structure to your Photoshop web
0:08design mockups this particular video is
0:10a free extract for my course called how
0:12to make money building professional
0:14website mock-ups using Photoshop if
0:16you’re serious about making money as a
0:17web designer there’s a discount code for
0:19you in the description below the sales
0:22pitch ends and we start drawing big
0:24colored boxes together all right and
0:26this tutorial going to mock up some of
0:28the big kind of structured areas using
0:30the rectangle tool now the rectangle
0:32tool for the people that are web
0:33designers know that it creates
0:35essentially div tags that you can pull
0:37the style and size and colors and things
0:39from later on so you’ve got to make sure
0:40you’re using this rectangle tool here if
0:43you can’t find the rectangle tool click
0:45hold drag it down and you might find the
0:47last tool you’re using the ellipse tool
0:48you might have to hold it down and grab
0:50the rectangle tool what we’re going to
0:53do is if you’re following along using my
0:54template i am going to there’s an option
0:56here so it’s called delete me I am gonna
0:58actually do like that because it gets
1:00rid of these little green boxes there’s
1:01my little advertising bits there so I’m
1:03going to bend him I’m gonna zoom a
1:05little bit command + and I’m going to
1:07zoom in so I can see the edges of my
1:10desktop view and what I’m going to do is
1:12I’m going to start creating okay so my
1:14first box is going to be my big kind of
1:17main hero image I’m going to use this
1:19purple here so I’m going to click that
1:21or pick it from your swatches panel and
1:22I’m going to click hold and drag and
1:24what you’ll notice is that I can drag
1:26over the edges it’s no problem okay and
1:28it rest the edges there now if yours has
1:31gone the wrong color like mine hairs its
1:33remember the last color even though my
1:34foreground color says be this lovely new
1:36bring your laptop up or what you can do
1:38is just click on it again and or drive
1:40change or if i go to undo i can click up
1:43here and pick the color from my swatches
1:45panel great and so that’s going to be my
1:48big kind of hero graphic image what i’m
1:50going to do now is I’m going to add my
1:52nav bar so use a rectangle tool again
1:54and I’m going to click hold and drag
1:56over the top here and I’m guessing a
1:59little bit okay so this is going to be
2:00my navigation bar what I want to do is
2:02fill it with black now black is
2:04somewhere in the top of your swatches
2:06here and or you can use it from up here
2:08I’ll pick this is my foreground color
2:11great so that’s going to be my
2:13navigation panel what we’re going to do
2:15in the end is we’re going to have an
2:16image underneath the navigation that we
2:18can still see so what we’re going to do
2:19is we’re gonna have this nav bar
2:21selected the way I know it’s selected I
2:23can see it here in my layers pet what
2:25I’m going to do is double-click the word
2:27rectangle and call this one navbar and
2:29i’ll call this one here hero graphic now
2:39on the navbar here I’ve got this one
2:41called opacity now if I lower the
2:42opacity a little bit okay maybe down to
2:45about eighty percent what you’ll notice
2:46is if I lower it right down can you see
2:48it’s actually quite transparent over the
2:50top of the background now this is up to
2:51you and how much lc3 you want it to be
2:54and will change it probably later on
2:55when we get our image underneath but
2:58from the moment that’s how you change
2:59the opacity of any of your rectangles
—————————————————————————————————
Facebook:https://www.facebook.com/BringYourOwnLaptop
G+: https://plus.google.com/+ByolAuAdobe
Twitter: https://twitter.com/danlovesadobe/
Pinterest: https://www.pinterest.com/byolaptop/
Website: https://www.bringyourownlaptop.co.nz/
Course Url: https://goo.gl/lQKAZr
——————————————————————————————————–
Trending topic on youtube
#Adobe #Photoshop #Tutorial
#HowtoDesignaWebsiteinPhotoshop
#PhotoshopTutorial
#CC_2015
#WebDesign_Structure
Thanks and Subscribe Channel
source
