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.2 - 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.3 - 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.4 - 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 in the screenprint here are ideal for web pages.
Other prompt examples
📍M.A.P.S Communication Foundation Graphic
The above graphic used on the General Communications page, was created by the below prompt.
Create a graphic with a maximum width of 400px which uses the term ‘M.A.P.S’ to illustrate a business communication strategy of: ‘Manners’, ‘Accuracy’, Professionalism’ and ‘Speed’. Ensure the labels are displayed in the order: ‘Manners’, ‘Accuracy’, Professionalism’ and lastly ‘Speed’. Put a label in the middle of the graphic that says ‘M.A.P.S’ with a push pin emoj.
📍M.A.P.S: Manners sub graphic
The above graphic used on the General Communications page, was created by the below prompt.
Create a infographic for the topic of ‘Business Manners.
There should be 3 shapes with these names ‘Politeness’, ‘ Personalisation’ ‘Positivity’ and icon representing each. In the centre there should be the letter ‘M’
📍M.A.P.S: Professionalism sub graphic
The above graphic used on the General Communications page, was created by the below prompt.
Design a hexagon shape that encapsulates the essence of "Professionalism." Inside the hexagon, the letter P is displayed, while each vertex of the hexagon features a label accompanied by a suitable icon. The six labels represent key aspects of professionalism: Purpose, Presentation, Privacy, Protection, and Punctuation.
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.
