How to create a landing page in Lunacy

[@walt436]

Lunacy really needs to start advertising themselves for web design. I was planning on purely making my own art to upload to my site, but found out it's insanely powerful for creating landing pages. Thank you so much for this video!

[@Icons8]

Thanks, Walt 🥰

[@tamis5908]

I totally second Walt's comments!

[@tamis5908]

With Figma going over to the dark side, you need to really make a bigger online presence - there are almost NO tutorials of any length on Lunacy. Would love to see someone on your team do a weekly narrated video on mocking up various types of projects. Please cover the other features this vid did not touch on - using components, UI Kits, grid/cols/rows, visual effects (blurs, more on shadows, etc.), masing. Your YT channel has great stuff, but the sped up vids are too fast too follow - please do some narrated in real time projects! You have an awesome product - it deserves much wider usage!

[@wheres_bears1378]

Facts 👍

[@albedesigns]

Agreed 👍🏼

[@hello.devzzz]

lunacy is a great app, i only wish its youtube community would increase.

[@tamis5908]

Please make more longer narrated videos like this one that cover some of the other features.

[@navid8276]

So much knowledge in this video! This is spectacular, thank you!

[@Icons8]

Thanks for the love ❤

[@saithomarvegacisneros4349]

Prefiero Lunacy que cualquier otro programa, pero amaría una aplicación para android, excelente video y gracias por el tutorial! Saludos desde México

[@gashumba888]

Figma is Adobe Dead! Long Live Lunacy!

[@filmik-org]

really best software to design for bigganers

[@gleb7047]

The video was full of insights for me, thanks a lot, guys!

[@akshatakadam9690]

This is an amazing video, Thank you.

[@movocode]

👌 Thanks for creating this tool

[@rossmanov]

Thank you, developers of Lunacy. It is the best programm whan i saw.

[@albedesigns]

Is there an updated version of this? I see it's from 3 years ago. I just downloaded Lunacy - I can't wait to get started with it!

[@Icons8]

You can find all the recent Lunacy tutorials on our channel here: kzbin.info/aero/PL7NuoYuwcraADEGRybqkH4Jr8ZYP5eXc_&si=1Ecoy4pcz07KdLDM

[@albedesigns]

@@Icons8 Thanks a bunch!

[@borealfox]

This! Thank you!

[@mohsenuss91]

It will be great if you add mockups (stationary, merch, mobile App, website ..etc) with prototyping feature to Lunacy

[@jasonreviews]

lunacy is so much better than figma.

[@Icons8]

It's so nice to hear that 💚

[@Daria_Remezova]

The video is wonderful. There is a lot of useful and necessary information. Thank you very much for the detailed lesson on Lunacy!😍👍🏆

[@johnschmidt874]

Thanks for the tutorial

[@slavicaprelogovic]

Lunacy is a great tool, love it !

[@Icons8]

Thanks for the love ❤️

[@juliagnedin607]

Thank you for the tips! and you have bombastic tone of voice:)

[@Icons8]

Oh thank you!

[@dchannel7516]

Great video. Thank you

[@Icons8]

😉

[@littlejs3246]

Just subscribed and I am very happy I did

[@iam_alizaffar]

Great experience Thumbs up brother 😊

[@Icons8]

Thanks 😊

[@ProxyDev]

Lunacy is so good :)

[@LordDayradon]

Nice tutorial on Lunacy and how to use it for web design. The only thing I'm disaapointed about is that you didn't cover how to take that final product from Lunacy and actually use it as a web page. Do I 'save as web page'? 'Export as html'? Is there another screen to generate HTML code? I'm coming from a perspective of I want to take the end result, and upload an html file to my server. How do get this end result from Lunacy, to a file (namely HTML) that can be uploaded to my server?

[@Icons8]

Lunacy doesn't support HTML export yet, but you can export CSS code for all objects in your document, which is pretty handy for web UI. Just select an object and press F4 or click View > Code.

[@tamis5908]

@@Icons8 One suggestion - it would be great to have the the code view access in the context tootlbar at the top - makes it even easier to grab code!

[@FelicitySymington]

Thank you for your tutorial it was very informative and helpful. I had one problem: I could not get the "suggestion toolbar" to open using ALT M or N. Is there another way to access it?

[@Icons8]

HI! We've temporarily disabled suggestions.

[@tamis5908]

@@Icons8 Please make it workable - that is an AWESOME AWESOME unique feature.

[@atulcodex7730]

Thanks for this entire video sir, thanks for this amazing efforts :)

[@copyadcreate]

Downloaded Lunacy today. I've been using it and loving it so far. I'm facing these problems: 1. I'm not seeing the 'Suggestion's' feature on my device. 2. Not finding 'Auto Refresh' option Would appreciate some help. Thanks.

[@Icons8]

That's great to know that you've been enjoying Lunacy! You can leave your suggestions via the 'Request a feature' option in the 'Help' tab. As for your second question, Lunacy updates automatically 😎

[@natnaelgetnet4330]

like this software gonna use it for professional work, I will create awareness about this software it's the least I can do

[@Icons8]

We are happy you like Lunacy and thank you for sharing it with others 🙂

[@Firmansyah-sq1ie]

Um, i just installed Lunacy in my laptop (windows 8.1 64 bit, 4GB ram, Intel core i3 gen 5). When i open Lunacy and click on photo of illustration tab, there is no photos or illustrations, only cloud with strip. My internet connection is ok, and i can access UI kits and icon tab, the problem is photo and illustration tab is not working. Did i wrong installed Lunacy or what? Can you help me?

[@tranphongtran2296]

Can we have a video that focus more on a recommended workflow for Lunacy ? I'm still exploring what would be a good / efficient workflow using the tool

[@Icons8]

Do you have any particular requests for workflow videos? For example, we have a series of videos dedicated to the workflow of designing a mobile app in Lunacy, maybe it will be helpful: kzbin.info/www/bejne/eqPaZ3pqaK11q5o

[@designitechnologia]

I can't turn on Suggestions Panel :/

[@Icons8]

We've temporarily disabled suggestions.

[@rubenmedios]

Excelent tutorial, thanks! How to add suggestions tool in text and objects? i can't

[@Icons8]

We're glad you like it! At the moment the suggestion panel is disabled. It will definitely return in the future, we're just thinking about how to make it better 🙂

[@tamis5908]

@@Icons8 Please consider putting some kind of icon for it in the context toolbar at the top.

[@СергейКондулуков-з9ч]

Ребята здравствуйте посмотрел ваш урок. Понравился. Особенно понравилось то что можно обрезать картинку, функция кроп. И как вы выравнивали элементы внутри объекта. Простенькие прототипы я уже делаю в lunacy.

[@Icons8]

Спасибо, Сергей! Очень рады, что наши видеоуроки вам помогли ☺

[@mubashirshah1508]

it's amazing

[@wireinet]

Awesome! But..if i want to create modal window. I just cant

[@Icons8]

Could you please specify your request? If you're trying to create an interactive prototype that has a modal window, it's not possible yet. However, you can easily create a modal window on a separate canvas.

[@wireinet]

​@@Icons8Yes, I tried to create a modal that appears on the screen by pressing hotspot, but I'll find out exactly what I can't do)) I will be waiting for the new release.

[@PaulVoorberg]

Has the suggestions panel been axed? I can't find it in View > Suggestions and alt + M doesn't make it appear

[@Icons8]

Paul, we decided to revamp the suggestions panel. We’ll add the new version to an upcoming release. At the moment you can leave your suggestion in Help > Request Feature.

[@PaulVoorberg]

@@Icons8 Ah ok great, wasn't sure Lunacy was still in active development. Good to hear it still is receiving updates. I was screwed over by Adobe, their version of this kinda program did a bait and switch on me, luring me in with free, and then throwing up a paywall when I a year later tried to access my cloud projects which I created when it was free.

[@tipoxtipox]

thanks sir for your effort :)

[@Icons8]

We really appreciate it, thank you 🙌

[@ayeshaimtiaz4557]

icons in my lunacy app are not available ..... i click on the icon but it doesn't show anything...it shows me an empty sidebar

[@Icons8]

Could you please create a topic on our Community forum community.icons8.com? Please mention your Lunacy and OS versions and attach relevant screenshots.

[@tanveermalik5027]

I am using version 6.9 of Lunacy, but don't see the Flip control on top of the design area, as you are demonstrating at 9:49. Can you please suggest what I may have missed?

[@Icons8]

Hi, Tanveer🖐 In v.6.8 we moved the flip buttons to the right property panel to make the top panel lighter.

[@unionics]

I did not find any Artboard I am using Lunacy 9.2.1 please suggest ?

[@Icons8]

In order to add a new artboard to your canvas you need to click Layer -> Create -> Frame and then choose a default size or create a custom one.

[@unionics]

@@Icons8 Wow got it thank you!

[@patriciatrujilloblanco5189]

Hello! Lunacy question: I need to know what command I can use to copy an item from one artboard and paste it in the same place on another artboard 🙏

[@Icons8]

You can do this by a simple CTRL+C plus CTRL+V and selecting the artboard.

[@effincient5359]

Fantastic tutorial with great content. However, after about 5 minutes in and all I could hear was Bill Lumbergh from the movie Office Space. #Haveyouseenmystapler

[@Icons8]

Haha I can't get rid of him now.

[@designitechnologia]

I can't upscale images. When I click on it only shows me Microsoft Store for only 1 second and disappear :/

[@Icons8]

This might be happening due to the fact that this feature in Lunacy is available only for users with paid subscription for Icons8 graphic assets.

[@tamis5908]

@@Icons8 Good to know - but that info needs to be conveyed in the video...

[@thedxrrkside]

How do I export multiple frames to single PDF file with scrolling pages

[@Icons8]

To export multiple frames as a single PDF: -create frames -deselect objects -go to the Export tab -click the "+" button and choose PDF format -click Export document This way, you will be able to export a single file with scrolling pages.

[@ariant3520]

Lunacy is a great tool. I've tried and love it. Is it really free?

[@Icons8]

Yes, it's free! The only paid feature is access to a certain part of our library of assets.

[@designitechnologia]

Maybe Prototyping option will be better like in Figma or Xd?

[@Icons8]

We're working on it 😉

[@Relax-kb7tf]

hi, can u make tutorial how to convert website template with lunacy to real Wordpress or elementor?

[@Icons8]

Hey there, at the moment Lunacy only supports those code exports: SVG, CSS and XAML. However, you can request this feature on our forum here: lunatics.icons8.com/

[@GG-rm6hd]

Is there a quick way to change a icon without Suggestion Box?

[@Icons8]

If you press 'Enter' while the icon is selected the tab with icons will automatically open on the left. You will be able to choose a replacement icon there 🙌

[@adied7725]

what about scrolling vertical, horizontal and animations ?, please

[@Icons8]

You can check out some scrolling tips here: docs.icons8.com/prototyping/#scrollable-prototypes As for animation, we have some plans for improvements in prototyping and prototyping preview. These improvements should make prototypes more interactive and bright. However, we aren't planning to add any dedicated animation features at the moment.

[@mohsenuss91]

Unfortunately, it doesn't work perfectly with Arabic (support RTL languages)!

[@mattcbennett]

this is great, but what's the next step to turn this into an actual website? Am I wrong to say there's no way to convert unless you know a lot of coding?

[@Icons8]

The next step will be exporting the code of the project. So far, we don’t have an option of exporting into HTML, but we have one for CSS: docs.icons8.com/export/#code-preview 92. It means that you can skip coding CSS from the ground up, but you'll need to code an HTML part of your website.

[@javierflores09]

Lunacy is a design tool, creating websites is more than just design so yes, you have to know how to code in order to make it (or use a site generator such as WordPress, you'll be finding yourself learning how to code anyways). That being said, you don't have to know a lot, just enough to get started, I know it can be intimidating with all the options out there, but just pick one and stick with it, gain experience and you'll find yourself building sites pretty fast. Also, while Lunacy does allow exporting as CSS, I wouldn't personally recommend it since it isn't optimized, you should take the design you made only as reference and learn CSS to replicate it

[@Questorps7]

Dumb question: How do you then translate this design to a webpage? Is there a tutorial on how to do that?

[@Icons8]

That's not a dumb question at all! You can use the copy CSS code feature for all objects in your document to do that: - Select an object and press F4 or click View > Code; - In the displayed panel, click over the name of the required code to view the code. Or click the copy icon to copy the code.

[@amosdalmerifiorino6841]

​@@Icons8can you copy also HTML or only CSS? Thanks

[@Icons8]

@@amosdalmerifiorino6841 at the moment Lunacy doesn't have HTML export feature.

[@necrobaku811]

why you dont have videos about this anymore??

[@Icons8]

It seems like you've missed our playlist with Lunacy tutorials. Anyway, here it is: kzbin.info/aero/PL7NuoYuwcraADEGRybqkH4Jr8ZYP5eXc_&feature=shared

[@MuhammadBilalGB]

Any option has in lunacy where we upload our own logos and pictures?

[@Icons8]

Hi, Hassan! You can add your own logos or pictures to the canvas using the image tool in the toolbar or by dragging them from the file explorer.

[@MuhammadBilalGB]

@@Icons8 Lot of Thanks.

[@draft_fusion]

How do I make this into a html file with the css?

[@Icons8]

Here's how to to view and copy CSS code for all objects in your document: - Select an object and press F4 or click View > Code; - In the displayed panel, click over the name of the required code to view the code. Or click the copy icon to copy the code. HTML export isn't supported by Lunacy at the moment.

[@draft_fusion]

@@Icons8 Oooh okay, thank you so much! I can't wait to see more tutorials.

[@AZeed18]

Is there a Lunacy complete course?

[@Icons8]

Hi. 🖐 You can find our tutorials here: icons8.com/lunacy/tutorials. Also, you can watch these videos by our user kzbin.info/aero/PLtBxQ1hxaCK89Yikg5X5K0q1t0VsfUcCu

[@ryandaepic1838]

Can not seem to find my text autogenerator. Kindly help

[@Icons8]

Hi, Ryan. In v.6.8 we moved the Generate text button to the text settings section in the right panel.

[@ibrahimemmanuel8039]

How can this turn into a functional website

[@Icons8]

You can export the design in CSS from Lunacy and then code the rest of the website in HTML.

[@thearaav6670]

Why don't you use grid layout instead?

[@Icons8]

Good idea! You can use it as well.

[@tikka6554]

lunacy is free for life time? 😍

[@Icons8]

At the moment you can use Lunacy for free for as long as you want to 😉

[@Vezu4iyBlog]

like

[@hwaynes]

Kind of ridiculous going to the trouble of designing a web page when there's no option to save or export as HTML. Just exporting CSS means nothing.

[@Icons8]

The main idea here is to create a prototype of the web page. For example, this can be handy in case if you want to approve the design of the website with the client before starting to code.

[@danielphil4976]

Lunacy >>>> Figma

[@Icons8]

🥰

[@copyadcreate]

Hey @Daniel, could you help me with finding the option which helps in generating Full Names of people? i have just started using Lunacy and the UI has changed since the video was out. Would really appreciate your help. Thanks.

[@danielphil4976]

@@copyadcreate add the text tool then type in ;full And click enter, it'll generate. You can as well do ;first ;last To generate only first or last names.

[@copyadcreate]

@@danielphil4976 Thanks. Do you also know where the Auto Refresh and Suggestion feature option is? The Suggestion feature is not working on my device.

[@danielphil4976]

@@copyadcreate I've no idea about that at the moment. I only opened the tool for the first time 4 days ago. Haven't done much. Hope you find what you're looking for

[@LeoAugustRocks]

Informative video, but the presentation was so excruciating, I had to quit it half way through.

[@Icons8]

Leo, may I ask you why did you find the presentation excruciating? This info can really help us to make a better video next time 🙌

[@LeoAugustRocks]

@@Icons8 Although informative, the presenter seemed poorly prepared - as if there was no script and he was doing it "off the cuff". Too many drawn out words - e.g.: aaaaaaaaaand, ahhhhhhhh, theeeeeeee, uuuummmmm. This might be acceptable for a short 3 minute video, but for a lengthy, 45+ minute tutorial, it's extremely annoying. At times he uses multiple terms for the same element, e.g.: artboard, canvas, frame. He should stick with the program's specific terminology for elements/functions/etc. Volume of video changes at about 11:15 - as though the presenter moved away from the microphone. He also mumbles at times - as though he's talking to himself. Presenter should also mention which version of the app he's using.

[@Icons8]

@@LeoAugustRocks Thank you for a very thorough reply, it is extremely helpful! We'll try to avoid all the issues that you've mentioned in our upcoming videos.

[@Zp00kie]

Sorry can't get passed the awful narration. Great software but this video was unwatchable unless you mute the sound. uh uhh uhh every couple of words...unbearable

[@Icons8]

David, we completely agree with you! That's why don't have issues like that in our more recent videos.