Quote Maker UI Design:
So, Friends excited to learn how I designed this beautiful quote maker UI
design in adobe xd let's go to the topic and see how easy it was to create
this.
Watch Video Tutorial
First, create a new template in choose a web template 1366 x 768
In the second step insert a background image and make the logo/title box
For Logo/Title box (Shape)
select a rectangle tool and draw the shape by using the transform values
Transform:
(W 339, H 59, X 1027, Y 0)
set this according to your shape
Appearance:
Opacity 100%
Blend Mode Soft Light
Fill (#455A64 Opacity 100%)
Shadow (#9A2950, Opacity 100%, X -1, Y 5, B 20)
Border Radius 15 0 0 15
For Logo/Title box (Text)
Transform:
(W 283, H 35, X 1055, Y 15)
set this according to your shape
Text:
Font Trajan Pro
Size 34 Bold
Line Spacing 50
Appearance:
Opacity 100%
Blend Mode Normal
Fill (#AF4A6B Opacity 100%)
Shadow (None)
Now the third step is to create a shape for Quote Design
select a rectangle tool and draw the shape by using the transform values
Transform:
select 3D Transform
(W 560, H 666, X 65, Y 18)
Y Rotation 15 Degree
Appearance:
Opacity 100%
Blend Mode Multiply
Fill (#FFD6D3 Opacity 100%)
Shadow (#A02D54, Opacity 100%, X 3, Y 3, B 20)
Border Radius 15
Then add more shapes, text, illustration on it to look beautiful
For small box (Shape)
select a rectangle tool and draw the shape by using the transform values
Transform:
select 3D Transform
(W 536, H 325, X 76, Y 258)
Y Rotation 15 Degree
Appearance:
Opacity 80%
Blend Mode Normal
Fill (#FFFFFF Opacity 100%)
Shadow (None)
Border Radius 15
For small box (Text)
Transform:
select 3D Transform
(W 418, H 181, X 112, Y 362)
Y Rotation 20 Degree
Text:
Font Trajan Pro
Size 28 Bold
Line Spacing 40
Appearance:
Opacity 100%
Blend Mode Normal
Fill (#972F56 Opacity 100%)
Shadow (None)
For small box (Flower illustration)
import the illustration and apply the below-given values to it
Transform:
select 3D Transform
(W 511, H 224, X 89, Y 74)
Y Rotation 20 Degree
Z Rotation 3 Degree
Appearance:
Opacity 100%
Blend Mode Normal
Last to add form design in our quote maker
select a rectangle tool and draw the shape by using the transform values
Transform:
(W 553, H 607, X 750, Y 81) set this according to your shape
Appearance:
Opacity 100%
Blend Mode Normal
Fill (#FFD5D1 Opacity 100%)
Shadow (#9A2A4F, Opacity 100%, X 0, Y 3, B
20)
Border Radius 15
in the inner shape which is the form input fields use these
values
Transform:
set this according to your shape
the appearance will apply same to all except
button
Appearance:
Opacity 100%
Blend Mode Soft Light
Fill (#FFFFFF Opacity 100%)
Shadow (#9F3959, Opacity 100%, X 0, Y 1,
B 6)
Border Radius 15
It is completed Thank you,
To convert this template into HTML go to see this post.
0 Comments