Fons Mans Profile picture
Mar 11 16 tweets 6 min read
Learn how to create the #AppleEvent invite with @figma in just a few steps!

A tutorial thread 👇 Image
Let's get started.

Grab the apple logo and make sure it's a vector. I use the @figma plugin @brandfetch for this.

Give the logo a black fill and 2px white inner stroke Image
Duplicate the shape, and make one of the duplicates a mask.

Now copy the shape again, remove the floating leaf and reduce the size so you end up with something like this: Image
Repeat this process 3 more times to achieve the following 'tunnel' look: Image
Apply colours the different strokes, use the image below as a reference (Outer stroke is a gradient, the others are solid colours) Image
Now it's time for some glow! select the outer shape and apply inner shadow (yep we're using shadows as glow 😅) Make sure to: Set it to 100% opacity, give it a lot of blur and apply quite some horizontal offset. Image
If you're happy with the look, repeat the process for the other shapes to achieve a look like this: Image
To blend some of the colours together, add 2 purple ovals and give them quite some blur.

Also add a black oval and apply some blur as well (we'll use this one to create a shadow effect) - check the image below for the placement Image
Now set thes purple layers to the 'color' blending mode Image
To give an extra tunnel effect, add 4 strokes as an extension of the 2 outer shapes. Check the image below for placement.

After placing them correctly you can play around with a gradient stroke to match the composition Image
To add some directional outer glow to the apple, we are going to add 3 big shapes with the pen tool. lt should look something like the image below. (Make sure the shapes are behind your 'apples')

Yes this looks weird, we'll fix it in the next step! Image
Now change the fill to a gradient and play around with the direction to give it a 'fade' effect.

To get rid of the hard edges, give the layers a little blur. Image
Almost there! Let's make this pop just a little bit more.
Add a big white oval and set the opacity to 50% Image
Now change the blending mode to 'overlay' to give your colours a nice little boost.

Want more or less intensity? Play around with the opacity! Image
That's it! If you want to dive a little bit deeper, you can check out my file here:

figma.com/community/file…
If you like my free tutorials & resources, consider 'buying me a coffee' to support my work 👊✨
buymeacoffee.com/fonsmans

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Fons Mans

Fons Mans Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @FonsMans

Jun 19
Tutorial thread!✨

Learn how to make the iOS 16 icon with @figma in just a few steps. File included, let's go!

👇
Start with a square frame and ad '16' with SF Pro Display - Light
Add an oval in the background, and a hill shape in the front of the type to create some depth. We'll fix the color later!
Read 14 tweets
Mar 9
New tutorial thread!

Learn how to make the #AppleEvent iPhone SE wallpaper with @figma in just a few easy steps. (File included!)

Let's dive in 👇
Add a new art board in your preferred phone size and add a rectangle that fills the entire art board.

Next, apply a gradient fill and make sure to give it 7 steps (distribute them evenly)
Now, replace each step with colours of your choice. For this example, I used the original wallpapers' colours
Read 11 tweets
Feb 13
Learn from the latest Apple, Instagram and Spotify designs!

I’ve recreated their latest campaigns in @figma, ready for you to explore.

These files include all visuals, screens, icons and more.

Let’s jump in 👇🧵
Instgram Playback 2021 figma.com/community/file…
A lil’ preview
Read 11 tweets
Feb 10
Tuturial Thread! 🧵

In this thread, I’ll learn you how to create a poster like the one below⚡️

I’ve used @figma and @Procreate to create it, but you can also use other tools to get the same result.

Let’s get started 👇
Add a new art board and use one of the paper size presets for the poster ratio
Add your backdrop, I’ve used an @unsplash picture, cropped it and set the blending mode to “screen”
Read 17 tweets
Jan 31
Upgrade your visual design skills.

A collection of all my @figma tutorial threads — Updated every week.

Make sure to follow me for more tutorials, tips & resources!
Read 11 tweets
Jan 28
Tutorial thread time! 🧵
Learn how to create posters like this with @figma in a few easy steps.
Let’s dive in👇 Image
Create a new canvas, select a soft bg color and add your personal branding, so you don’t have to make space for it later on in the process. Image
Generate a duotone gradient with one of the cool mesh gradient plugins in the @figma community, try them out and see which one is best for you! I ended up with this result: Image
Read 10 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(