Create a proprietary UI suite with fireworks

If the interface is inconsistent, not refreshing, it is likely to lead to user churn-this tutorial will teach you to use fireworks to build the UI suite for later usage. and teaches you how to integrate the design elements for a case presentation.

The UI suite made with FW can be output as a vector format, with a shape that is adjustable--and supports retina, which is where the FW is!

Please download the documentation required for this tutorial: Support Files

01. New Document

Open FW, File > New, Height 280px, width 600px, resolution 72DPI.

Press and hold u to select the shape tool: Spend a 600px square, #ededed the color in the preset panel

02. Default button

button is the key, let's start defining the style.

Press U to draw a 150x45px rectangle.

In the preset panel, gradient > linear, three color points: #2685C9, #268EDE f6ea7 (left to right)

roundness 35% border 1px #14466B.

03. Add Details

Click on the plus sign of the panel below

Filters > Miscellaneous points > Added miscellaneous points > Quantity: 2 (Adjustable)

Filter >ps dynamic effect, tick the inner shadow: Opacity 43, distance 3, Angle-90 degree 5, others are 0

04. A little more detail.

Copy the finished rectangle and paste, leaving the new rectangle at the top, changing to 148x43px, moving 1px to the left, and moving down 1px. Remove all fill colors and effects, border 1px, color #2b93e3.

05. Add text

Now you need to add some text and use the Arvo font provided in the support file.

Enter text alignment to the center of the button. Font color #ffffff size 20px.

Then copy and paste the text, select the text at the bottom, move down 1px, and set the color to #0d2c42.

06. Organize Layers

Select all layers of the button, press CTRL+G: The layer is grouped and named the default button.

07. Hover Button

We need to create the hover state of the button.

Copy and paste the previous group, named Hover button, below the original button.

Press A to select the selected tool, select the rectangle, make the gradient settings, and change the rightmost color to #1a6196.

08. Activate button

Now we need the activation state of the button.

Copy and paste the previous group (hover button), name the Activate button, and place it below the original button.

Press A to select the selected tool, select the rectangle, make the gradient settings, and select the rollover gradient.

09. Label

Now we're done with the button section and now we're making the label.

Draw a 55x28px rectangle. Press p to draw a triangle to the left of the rectangle using the Pen tool.

Then press SHIFT to select two shapes, and click the Add/Join button in the preset panel to complete the shape combination

10. Label details

Select the shape, and the color is set to the #ffffff border 1px #BFBFBF.

Press U two times, select the Ellipse tool and press shift to draw a 8x8px circle in the left part of the label.

Select two shapes and click the Remove/Punch button.

Text color #666666 size 16 font arvo

11. Turn on the switch

Intend to design a switch on the open state.

Draw a 72x23px rectangle with a roundness of 100%. Select solid color Fill #ffffff border color #c8c8c8 (to match the label)

Text 16px, located on the left side of the switch, #666666 color.

12. Open Switch Details 1

We need to add a little detail so that the switch does not look peaceful.

Select filter >ps dynamic effects > Inner Shadow: Opacity 31, distance 3, Angle 90°, size 5

13. Open Switch Details 2

Draw a 23x23 circle, put it on the right side of the switch, add a 1px color #b6b6b6 border

Gradient > Cone, gradient from #ffffff to #dddddd, set a total of six intervals, self adjustment, the final metal texture.

14. Open Switch Details 3

Copy the circle and paste the bottom. Change the fill color to remove all styles for #000000.

Filters > Blur > Gaussian blur, Value 2.1

Move Down 2px, left 2px, opacity 50%

15. Switch off

Group Open switch and put it on the right side of the button.

Copy on the switch, change on to off, and the text moves to the right end. Move two circles to the left and resize the shadow to the right 4px.

16. Personal Data

To draw a 200x170px rectangle, be sure to align the other components in the Personal Data box document, preferably by tidying up the buttons, labels, and switches. Then fill the color #ffffff border 1px color #999999.

Now, draw a 200x82px rectangle above the profile box, and the border 1px border color #0F3756.

17. Details of personal particulars

In the preset panel, select Gradient > Linear, Three colors: #2685C9, #268EDE, #1F6EA7,

Copy the rectangle and paste it to the top. Reduce width and height by 2px, add border 1px color #2b93e3.

18. Details of personal Information 2

Use the Arvo font, size 20, color #0D2C42, enter the name in the profile box, and then center.

Copy and paste text, change color to #ffffff down 1px

19. Picture in the profile

Paste your personal avatar, size set to 60x60px. Draw a circle over the image to make sure the circle has no padding or no borders.

Select the circle and image at the same time. Modify > Mask > Group to mask.

Re-copy this circle and add a 2px color fffff border

20. Alignment panel

Using the Alignment panel, you can achieve a quick center of personal portrait.

Window > align Open Alignment panel

Click on the personal avatar, click on the Profile box, and then align.

21. Biographical text in personal data

The Resume text section uses the Arial in 13px color #666666 for this text.

Remember to center align when you are finished typing.

22. Comment on the star

Holding down the Shape tool in the toolbar, you will find the star shape, draw a 28x26px star, copy it five times, and put the Nova shape on the right side of the previous star for each copy.

The first star style is the same as Step 2, and the other star fills the #ffffff border #bfbfbf

23. Arrange

If you haven't sorted and aligned before, you're going to start now.

Use Ctrl+g to group each element and reasonably name it. This is important because in the future if you want to use this set of components, orderly naming and arranging will help you a lot.

24. Add page numbers

Copy a previously drawn button and move to another area of the canvas. Change the size to 30x30px, replace the text with "<", and then center.

25. Copy the Grouping

Copy page Number group, move right, text to "1".

Copy, move to the right end, text to ">"

26. Replicate again

Copy page number grouping again. Copy six times, page numbers from 2 to 7.

Then select these page numbers directly, fill the color #ffffff border color #bfbfbf

27. Share button

The share buttons included in the suite are easy to use. Download the supporting files and add them to the UI suite. If the feeling is not exquisite enough, you can change the buttons yourself.

28. Last Organizational arrangement

Finally, we should check whether the whole arrangement is orderly. If not, then hurriedly tidy up, arrange again.