Dribbble is a great place for inspiration. And it is also the platform where creatives meet their clients. So the way you present your work there matters like nowhere else. If you’re just starting your journey as a designer and want to make your first steps on Dribbble, then this tutorial is for you.

I will show you how to design a Dribbble-worth shot using Lunacy, a 100% free design app that has everything you need for the task. We will create a couple of views for a concept of a mobile app with fancy graphics. And we will do that without even leaving Lunacy.
You can watch this video or follow the step-by-step guide below.

Let’s start with the background of our shot.
Launch Lunacy and create a new document. Create an artboard (A). I selected the Dribbble Shot Retina option from the list of presets in the right panel. Adjust the zoom so that the artboard fits the canvas.
Add a rectangle (R) the size of the artboard. Change the Fill of the rectangle to #CEC2FF.

Add some ellipses (O) and adjust their colors. I used the following: #9B85F3, #F385EE, #B3FFA4, and #AEF4FF.

Creating a dribbble shot in Lunacy

Add another rectangle over the ellipses:

  • Color: #FFFFFF
  • Opacity: 5%
  • Background blur: 400 or more
Creating a dribbble shot in Lunacy

The background is ready. Group (Ctrl+G / ⌘ G) all the objects on the artboard and then lock the group to prevent it from accidental editing.
Now create another rectangle:

  • Size: 375*812 px
  • Color: #FFFFFF
  • Corner radius: 24 px

This will be a view of a mobile app.

Creating a dribbble shot in Lunacy

Open the UI Kits tab and select the Apple iOS UI Kit. Add the following top bar components:

  • Bars/Navigation Bar/iPhone – Compact/Light/Default
  • Bars/Status Bar/iPhone/Light

Select the Bars/Navigation Bar/iPhone – Compact/Light/Default component and detach it from components.

Creating a dribbble shot in Lunacy

Adjust the object: remove the unnecessary elements, edit the text, color, and alignment of objects. I removed the plus button, changed the texts to Back and Categories, and set the texts’ color to #000000. Also, I set the radius of the upper corners to 24 px.

Creating a dribble shot in Lunacy

Now let’s switch to the bottom of the app view and add a new rectangle of 375*84 px in size. Set the radius of the lower corners to 24 px.

Creating a dribbble shot in Lunacy

Copy the style of the navigation bar background (Ctrl+Alt+C / ⌘ ⌥ C or using the context menu).

Creating a dribbble shot in Lunacy

And paste this style to the new rectangle (Ctrl+Alt+V / ⌘ ⌥ V or using the context menu). That’s a very useful feature. No need to set up object properties in the right panel.

Creating a dribbble shot in Lunacy

Open the Icons tab and select an icon. I used the Paper icon in the Fluent Systems Filled style. Then add a text block (T) below the icon.
Set the Tint of the icon to #898989. The text settings are the following: Inter Semi Bold, size 11 px, color #1A1A1A, opacity 40%. Then select the text and the icon and align them horizontally.

Creating a dribbble shot in Lunacy

Group the icon and text and create four duplicates (Ctrl+D / ⌘ D).
Select all the icon-and-text groups and align them. Try the Tidy up button and the Smart Distribute feature.

Creating a dribbble shot in Lunacy

Change the icons and texts of the duplicates. Then change the color of the group in the center to #000000.

Creating a dribbble shot in Lunacy

Add a small rectangle below the bar. This will be the Home indicator. Set its size to 135*5 px, corner radius to 10, and color to #D2D2D2. You can use the eyedropper (I) to pick up the color of existing objects.

Creating a dribbble shot in Lunacy

Now let’s add some beauty.
Go back to the top of the app view and add a 160*160 px rectangle. Set its color to #FFBCBA, and the corner radius to 12.

Creating a dribbble shot in Lunacy

In the Icons tab, select the Emoji style. Find an icon, for example, Musical note. Place the icon over the rectangle. Align the icon to the center of the rectangle.

Creating a dribbble shot in Lunacy

Then add two text blocks below the rectangle:

TextFontWeightSizeColor
Top textMusicInterMedium18#000000
Bottom text13,453 itemsInterRegular18#ADADAD

Select the rectangle, icons, and texts, and group them.

Creating a dribbble shot in Lunacy

Now duplicate this group 5 times and make some changes:

ColorIconText 1Text 2
Duplicate 1#91E3BCPopcornCinema124 items
Duplicate 2#FFE477SchoolCourses455 items
Duplicate 3#AEBFFEBookBooks2,874 items
Duplicate 4#E9BAFCMask--
Duplicate 5#F7BAD5Stadium--

You should get a result like this:

Creating a dribbble shot in Lunacy

Select all the objects making up the app view and create a duplicate.

Creating a dribbble shot in Lunacy

In the duplicate, select the cards and the bottom bar, and delete them. Also, delete the Categories text on the top bar.

Creating a dribbble shot in Lunacy

Select the Text tool and create a large text block as shown below. I used the following text settings: Inter Black, size 40 px, and color #000000.

Creating a dribbble shot in Lunacy

Now create a text field with a placeholder text and a button.
For the text field create a 335*44 px rectangle. Set its color to #F7F7F7 and corner radius to 8. For the text, use the following settings: Inter Medium, 18 px, color #000000, opacity 40%, align left.

For the second button, create a rectangle with size 335*44 px and corner radius 8. Delete the fill and add a border with color #1A1A1A and thickness 2. Add a text to the center of the rectangle: Inter Medium, size 20 px, color #000000.

Creating a dribbble shot in Lunacy

Select both groups. Set the horizontal space between them to 200. Align the groups to the center of the artboard.

And the last step. Open the Illustration tab and add some illustrations. I used the images in the Casual life 3D style.

Creating a dribbble shot in Lunacy

That’s it. Our design is ready.

Result

Create your designs in Lunacy and share them with us on social media: Twitter, Facebook, and Discord.

Check out the other Lunacy tutorials:

Don’t forget to tell your fellow designers and developers that starting from version 8 Lunacy runs not only on Windows but also on macOS and Linux. Send them this link https://icons8.com/lunacy and help us spread the word about Lunacy.

About the author: Julia G, a wonderful creature responsible for QA and SMM at the Lunacy team.




Try tools for creators by the Icons8 team:

Icons8

Icons8, a library of about 130K+ icons and clip art images

Offline app icons8

Offline app and plugins to drag’n’drop icons and clip art to any design tools

Moose

Moose, the big collection of high-quality stock photos

illustrations

Ouch! , a library of vector illustrations and collages

Background Remover

Background Remover, AI-based online tool for removing background from any photo

Mega Creator

Mega Creator, online tool for creating visual content from pre-made elements

Fugue

Fugue, royalty free music for videos of any kind

Lunacy

Lunacy, free graphic design software with built-in design resources

Smart Upscaler

Smart Upscaler, image upscaler to enlarge and enhance images using AI

Generated Photos

Generated Photos, unique, worry-free model photos generated by AI

Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit