this geometric pattern is mesmerizing and the techniques to make it are both
interesting and useful to know so let's make this vector together in
today's tutorial every portfolio website needs a good
domain name and that is super simple to do with
hover learn more about this first class service and how to showcase your
work through a new portfolio site later in today's video
but also how you can grab 10 off your first purchase with hover
i do have a nice beige kind of color for my background and i did simply make that
with the rectangle tool and i locked it down with command or
control 2 and most of you guys probably know this kind of stuff anyway
but for the pattern we do want a nice dark color
and we only want the stroke selected in the color palette
and you can of course toggle this with command or control
x as seen here so press m for the rectangle tool and
whilst holding down shift click and drag to make a perfect
square on your artboard so the thickness of your square is
entirely up to you guys and we can change that later so it's not
really crucial at this stage the thickness that you use
we want to open up the appearance panel because we are going to make some great
use of the vector superpowers found in this panel
so firstly we want to duplicate this stroke in the fly down menu
that's going to leave us with two strokes the same size
but click that new stroke and then offset the path
found here
so make sure you have the preview box checked and also type in the value that
best fits your design
we're going to repeat this process two more times so do click the new stroke
duplicate it and offset the path exactly the same as we did before
we do want to end up with four different strokes equally distanced apart
so when you've arrived at this stage you should have four squares that
effectively are on one vector path but now it's time to expand
the appearance of this design and then also ungroup
everything this is going to leave you with four
vector paths independent of each other
and so for the next step press c which is going to access the scissors tool
and then click the top left anchor point of the smallest
square so once that's been completed press a for the direct selection tool
and carefully click the anchor points whilst holding down a click and move it
outward and you should be able to see the smart
guides showing you when things are snapping in a fixed position or you can
just hold down shift which will make sure the line
stays level as you out stretch it towards the left
so yeah move it to the very end square and it should snap
directly onto the path perfectly we're going to want to repeat this process
two more times and also clean up the remaining lines
in this top section okay so the top section is complete
now do the exact same for the bottom right section and i am actually going to
skip ahead today so you don't have to watch the
same process again so we've arrived at this shape here and
i do have some neat and handy tips to show you so let's finish off this
geometric design so one thing that you will for sure want
to keep in mind relates to the strokes that your design is made up of
you can see here that my design has a stroke value of seven
but if i select my design and then scale it down by clicking and dragging
whilst holding down shift my design stays at a value of seven
in terms of the stroke but the design looks very different and actually it
does look pretty cool however if you want to be able to change
the size of your design but keep the appearance same and also
relative you will need to activate the scale stroke options in the preferences
settings
so i would now suggest that you set the stroke value to whatever you think looks
best for your design so maybe you want some thick strokes and
thin gaps or something different it's entirely up
to you but when you are ready select the entire design and hold down
the alt option key and your cursor should change as you can see here whilst
still holding down the alt option key click upward if you also hold down shift
at this moment your design is going to remain in line
perfectly as you drag it up but yeah drag it up until you see the smart
guides letting you know things are perfectly in
line and by the way smart guides can be turned on or off with command
and control u so with the duplication at the very top
select it hold down shift and also rotate it
90 degrees in this way great we now need to select everything
and then duplicate it over to the right using the alt option key one more time
with the new selection still highlighted hold down shift again
and rotate things 180 degrees at this time
make sure to release your mouse click before you release any keyboard
shortcuts you can still alter the stroke weight
value if you don't think it looks right for your design
but now we have a sort of geometric square i select the square and then
duplicate it exactly over to the right once then directly after press command
or control d multiple different times
so essentially repeat the process of duplicating and arranging your design
as you see fit
i personally like to hold down shift and rotate the design 45 degrees
after it's finished because i think that orientation looks best
so when you're happy with your design on the artboard grab the rectangle tool
with m and then carefully drag a rectangle
around the perimeter of your box
then select everything excluding your background because that should be locked
anyway and then right click so you can access
the clipping mask
this just neatens things up a little bit but you can also experiment with the
transparency modes
as this will kind of blend your design into the background
so as you should be able to see by now setting up a personal presence online to
promote your skills is pretty essential and a service that
can really help with that is hover now hover is a great place to find and
grab your domain name with over 400 domain extensions
available to you so maybe you cannot afford the dot-com
version of your domain name you will still have many many other
options available to you hover also offers totally free whois
privacy and you can create personalized email
addresses that match your domain and this is one key aspect to appearing
professional online so as an example my email address could
be tom at satori graphics.net as opposed to satori graphics at
hotmail.com it just looks more professional hover
also has a superb customer support team where they're open
to either having a talk a chat an email or even sharing a tweet about your
problem there is also a hover connect feature
that allows you to connect your domain name to website builders
if you are of course using a website builder now if you want to grab 10 off
your first purchase with hover follow the link down
in the description box below if you guys want to learn something else
today do click a video on screen but until next time design your future
today peace