First, create a new template in choose a web template 1366 x 768
Second, create a navigation menu on the left side
Create a vertical rectangle for the menu bar
Transform:
(W 90, H 500, X 0, Y 134)
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #ffffff opacity 100%
Border Radius (0, 15, 15, 0)
Shadow (#bfbfbf, 100%, X 0, Y 0, B 3)
Then make your own icon shape (like home, arrow) or bring them from other
sites.
For menu round button
The first circle (for border design)should be behind the menu rectangle
Transform:
(W 59, H 59, X 60, Y 353)
Rotate 95 deg
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #ffffff opacity 100%
Border (#bfbfbf, 100%, Size 1, Dash 50, Gap 80)
Second circle (center)
Transform:
(W 50, H 50, X 66, Y 359)
Rotate 180 deg
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #ffffff opacity 100%
Border (#bfbfbf, 100%, Size 1, Dash 78.5, Gap 100)
Shadow (#bfbfbf, 100%, X 0, Y 0, B 3)
Third circle (center blue color)
Transform:
(W 42, H 42, X 70, Y 363)
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #355193 opacity 100%
In the third step, we will create background design shapes
Star shape circle design
create 5 same size circle with the following and set them as shown in the
image
Transform:
(W 10, H 10)
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #355193 opacity 100%
Dashed line design
Transform:
(W 0, H 500)
Appearance:
Opacity 100%
Blend Mode Normal
Border (#bfbfbf, 100%, Size 1, Dash 88, Gap 50)
set the star circle shapes at both corners of the line and make it a group and
make another copy of this group.
then set the design groups at the position mentioned below.
Transform:
The first group on the left side position (X 105, Y62)
The second group on the right side position (X 1290, Y62)
before making a group make a copy of the star circle and line shape for
later use.
now make more copies of the star circle shape and give them color as you want
and create small and big circles and set them all as shown in the image above.
Now create a rectangle with the following
For Top Position
Transform:
(W 600, H 10, X 230, Y 0)
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #355193 opacity 100%
border none
For Bottom Position
Transform:
(W 600, H 10, X 230, Y 758)
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #355193 opacity 100%
border none
Now set the dashed line with this shape as shown in the above image.
In the next step, we will create a portfolio detail area
Now create a rectangle box
Transform:
(W 600, H 650, X 230, Y 59)
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #ffffff opacity 100%
Shadow (#bfbfbf, 100%, X 0, Y 0, B 3)
set star circle shapes at the top corner of this rectangle
For image background shapes design
create a circle
Transform:
(W 250, H 250, X 240, Y 90)
for all three shapes
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #6279BF opacity 100%
bend/press it from the right side, make two more copies reduce the opacity of
the other two shapes respectively 60 and 40 percent, and rotate a little bit
(rotate 25 deg)
create another circle for an image
Transform:
(W 180, H 180, X 310, Y 204)
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #ffffff opacity 100%
Shadow (#bfbfbf, 100%, X 0, Y 0, B 3)
Now set the image in this circle
For Text and Chat Button
Heading Text
Transform:
(W 249, H 76, X 530, Y 134)
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #6279BF opacity 100%
Text:
Font Dosis
Size 60 SemiBold
Align Center
AV 0
Line-Height 76
Small Text
Transform:
(W 256, H 76, X 530, Y 225)
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #6279BF opacity 100%
Text:
Font Dosis
Size 30 SemiBold
Align Center
AV 0
Line-Height 38
Chat Button
make a chat button as it is like a menu button and put an icon in it like a
chat icon.
Expertise Title and Circle
Title
Transform:
(W 134, H 38, X 280, Y 475)
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #6279BF opacity 100%
Text:
Font Dosis
Size 30 SemiBold
Align Left
AV 0
Line-Height 38
Line
Transform:
(W 330, H 0, X 425, Y 495)
Appearance:
Opacity 100%
Blend Mode Normal
Border (#bfbfbf, 100%, Size 2, Dash 0, Gap 0)
Dot Circle
Transform:
(W 10, H 10, X 775, Y 485)
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #6279BF opacity 100%
Progress Circle
Transform:
(W 80, H 80)
for all three circles set them as in the image
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #ffffff opacity 100%
Border (#bfbfbf, 100%, Size 2, Dash 120, Gap 40)
Shadow (#bfbfbf, 100%, X 0, Y 0, B 3)
In the last step, we will create social media icons shapes
Create circles for social media icons
Transform:
(W 90, H 90) for all three circles set them as in the image
Appearance:
Opacity 100%
Blend Mode Normal
Fill color should be #ffffff opacity 100%
Border (#bfbfbf, 100%, Size 2, Dash 78, Gap 100)
Shadow (#bfbfbf, 100%, X 0, Y 0, B 3)
after creating circles put social media icons in them.
all is done the beautifull unique portfolio ui design web template created
successfuly.
0 Comments