NAPKIN VISUALS
Using Napkin AI
How to use Napkin Ai to generate useful visuals
Fine tuning 'Ai prompts' takes time and practice.
The S.C.C key guidelines are:
- Specifics - Describe the output you want with specifics (type of chart, maximum width, colours if needed)
- Seperation - the different content in your design into multiple sentences.
- Connection - describe how the different elements of your ideal design connect to each other.
Napkin Ai example
The below graphic shows the clear flow chart used to set up a Trafft booking system for a client and was generated using Napkin Ai.
In the below setup process we will go through the steps to create this graphic.
Setup Process
1️⃣ Stage 1: Perfect the prompt
The graphic on this page was created by a short prompt. There is trial and error involved in training the Ai to achieve the visual you have in mind. In this stage we look at the essentials. The full script is shown at the bottom for reference.
1.1 Select 'generate with Ai' option 🔽
1.1 - Prompt Pt.1: Type of chart, topic, maximum width 🔽
Create an interlinking flow chart for creating a Business booking system with a maximum width of 400px.
1.2 - Prompt Pt.2: Chart elements and connections (list specific colours if required) 🔽
The business booking system should show the 1st module of setting up ‘Service Categories’.
This is connected to the 2nd module of ‘Services’.
This are connected to the 3rd module of ‘Locations’.
This is connected to the 4th module of ‘Employees’.
Finally a module called ‘Calendars’ is connected to ‘Employees’.
1.3 - Optional - Prompt Pt.3 - Further refinements 🔽
Use light pastel colors for each module text.
Create an interlinking flow chart for creating a Business booking system with a maximum width of 400px.
The business booking system should show the 1st module of setting up ‘Service Categories’.
This is connected to the 2nd module of ‘Services’.
This are connected to the 3rd module of ‘Locations’.
This is connected to the 4th module of ‘Employees’.
Finally a module called ‘Calendars’ is connected to ‘Employees’.
Use light pastel colors for each module text.
2️⃣ Stage 2: Choose the style
In this stage you will generate the visual options for your graphic from your prompt.
NOTE: If you are not happy with the options, you may need to ↩️ return to 1️⃣ Stage 1 and amend your prompt accordingly.
Step 1.1 - Highlight your prompt and choose the 'Generate Visual' option
Step 2.2 - Scroll through and pick your visual/style.
After a few moments Ai will generate visual options.
Scroll through and choose the one you like.
After this select the 'style'.
Step 2.3 - Customise and edit
After you have selected your style, you can edit any text, colour and icon.
You can also move around any part of your visual.
3️⃣ Stage 3: Final settings and download
In this stage you choose the final settings linked to where the graphic will be shown. Ideally a transparent svg is the best option for web pages.
Step 3.1 - Choose the final settings
Clicking on the top edge of the graphic you can choose aspect ration, background etc.
When you are finished click 'Export'.
Step 3.2 - Choose your export settings and export.
Choose the exporting settings. The export settings shown below are ideal for web page use.
Team Tool Guides
Learn the different tools used by the agency.
Need a catchup or support?
For clients with an active project, you can book a catchup below.
Previous clients can book a discounted single hour session below or other more extensive support sessions.
