Typoji User Guide
Welcome to Typoji - Create & Share Beautiful Emoji Art!
Table of Contents
Introduction to Typoji
Typoji is a powerful, yet easy-to-use web application that lets you create beautiful emoji art, text compositions, and visual designs. Whether you want to create engaging social media posts, fun messages for friends, or expressive digital art, Typoji provides all the tools you need in one seamless interface.
Find Any Emoji
Easily search through thousands of emojis with powerful filtering options to find exactly what you need.
Create Stunning Art
Combine emojis, text, and shapes on a customizable canvas to create unique visual compositions.
Share Your Creations
Export your designs as PNG or JPG and share them on social media, in messages, or anywhere you want.
The Typoji interface with emoji search panel (left) and canvas editor (right)
Getting Started
Typoji's interface is divided into two main panels:
Left Panel: Emoji Search
This is where you search for and find emojis to use in your creations. The powerful search functionality allows you to quickly find exactly what you're looking for.
Right Panel: Canvas Editor
This is your creative workspace where you'll arrange emojis, add text, and design your composition. The editor includes several tools accessible through the toolbar at the top.
Quick Tip
On mobile devices, you can toggle between the search panel and canvas editor using the floating buttons at the bottom of the screen.
Finding Emojis
Basic Search
The search functionality in Typoji is designed to help you quickly find the perfect emoji for your creation.
Text Search
Type keywords in the search box to find emojis that match your description. For example, type "happy" to see all smiling and happy-related emojis.
Category Filters
Use the category buttons to filter emojis by type. Categories include:
These represent: All emojis, Smileys, Animals, Food, People, Faces, and Hands respectively.
Advanced Search Options
Expanded Search
Check the "Expanded Search" option to search in additional contextual information about emojis, which can help you find emojis based on more descriptive terms.
Skin Tone Filters
For people and hand emojis, you can filter by skin tone using the second row of buttons:
To use skin tone filtering:
- Click the "With" button to activate skin tone filtering
- Select "All" to require all selected skin tones, or "Any" to match any of the selected skin tones
- Click on one or more skin tone emoji buttons to select which tones to include
Pro Tip
Right-click on any emoji in the search results to copy it directly to your clipboard or view more information about it.
Using Search Results
Once you've found the emojis you want to use, you can add them to your canvas in several ways:
- Drag and Drop: Click and drag any emoji from the search results directly onto your canvas
- Click to Copy: Right-click on an emoji and select "Copy" to use it elsewhere
- Search and Browse: Use pagination at the bottom of the results to see more emojis
Example of emoji search results with the search term "fruit"
Canvas Editor
The canvas editor is your creative workspace where you'll design your emoji art. It provides a range of tools to help you create exactly what you envision.
Canvas Navigation
The canvas editor has a toolbar at the top with several tools you can use:
Text
Add and customize text
Shapes
Add geometric shapes
Layers
Manage element order
Canvas
Resize and configure canvas
Export
Save your creation
Adding Emojis to Canvas
Drag and Drop
The simplest way to add emojis to your canvas is by dragging them from the search results and dropping them onto the canvas.
Pasting from Clipboard
You can also copy emojis from elsewhere and paste them onto the canvas using Ctrl+V (Cmd+V on Mac).
To paste, click on the canvas first to ensure it's selected, then press Ctrl+V, or right-click on the canvas and select "Paste" from the context menu.
Moving and Resizing Emojis
Once an emoji is on the canvas, you can:
- Move it: Click and drag the emoji to reposition it
- Resize it: Click on the emoji to select it, then use the corner handles to resize it
- Rotate it: Use the rotation handle (appears when selected) to rotate the emoji
- Delete it: Select the emoji and press the Delete or Backspace key
Quick Tip
Hold the Shift key while resizing to maintain the emoji's original proportions.
Text Tools
Typoji allows you to add and customize text to complement your emoji art. Here's how to use the text tools:
Creating Text
Click on the "Text" tool in the toolbar to open the text editor panel. In the text preview area, click and type your text.
Customizing Text
Use the formatting options to customize your text:
- Font: Choose from a variety of fonts in the dropdown menu
- Color: Click the color picker to set your text color
- Style: Use the checkboxes to make text Bold, Italic, or Underlined
Adding Text to Canvas
Once you've created and styled your text, drag it from the text preview area to your canvas using the drag handle on the left side.
You can also click and drag anywhere in the text preview to add it to the canvas.
Editing Text on Canvas
To edit text that's already on the canvas:
- Double-click the text to enter edit mode
- Make your changes to the text content
- Click anywhere else on the canvas to exit edit mode
To change styling of existing text, select it first by clicking once, then use the Properties panel on the right (if available) to adjust font, size, and color.
Pro Tip
For creative text layouts, add multiple text elements and arrange them in different positions, sizes, and angles to create dynamic compositions.
Shapes Tools
Typoji includes a shapes tool that lets you add geometric elements to your canvas. Here's how to use it:
Accessing Shapes
Click on the "Shapes" tool in the toolbar to open the shapes panel.
Available Shapes
Typoji offers several basic shapes:
From left to right: Rectangle, Circle, Triangle, Ellipse, Star, and Heart.
Customizing Shapes
Before adding a shape, you can customize it:
- Color: Use the color picker to set the shape's fill color
- Opacity: Adjust the opacity slider to make shapes more or less transparent
Adding Shapes to Canvas
To add a shape to your canvas, either:
- Click and drag a shape from the shapes panel to your canvas
- Click on a shape in the panel, and it will be added to the center of your canvas
Manipulating Shapes
Once a shape is on the canvas, you can:
- Move: Click and drag to reposition
- Resize: Use the corner handles
- Rotate: Use the rotation handle (appears when selected)
- Delete: Select and press Delete or Backspace
Design Tip
Use shapes as backgrounds or containers for your emojis and text. For example, place text inside a rectangle or circle to create a button or badge effect.
Managing Layers
In Typoji, everything you add to the canvas (emojis, text, shapes) is placed on a layer. The Layers tool helps you control how these elements stack on top of each other.
Accessing Layer Controls
Click on the "Layers" tool in the toolbar to open the layer management panel.
Understanding Z-Order
The "Z-order" refers to the stacking order of elements on your canvas:
- Elements higher in the stack (with a higher Z-order) appear on top
- Elements lower in the stack (with a lower Z-order) appear behind other elements
Layer Controls
The layer panel provides four main controls:
- Bring to Front: Moves the selected element to the very top of the stack
- Bring Forward: Moves the selected element one level up in the stack
- Send to Back: Moves the selected element to the very bottom of the stack
- Send Backward: Moves the selected element one level down in the stack
Using Layer Controls
To change the stacking order of elements:
- Click on an element to select it
- Click on one of the layer control buttons to change its position in the stack
Design Strategy
A common layering strategy is to place background shapes at the bottom, decorative elements in the middle, and important text or focal point emojis at the top of the stack.
Example of elements with different stacking orders on the canvas
Canvas Settings
The Canvas settings tool lets you customize your workspace to match your project requirements.
Canvas Presets
Typoji offers several predefined canvas sizes optimized for different purposes:
Choose a preset that matches where you plan to share your creation for optimal display.
Custom Canvas Size
You can also set a custom canvas size using the width and height sliders:
After adjusting the sliders, click "Apply" to resize your canvas.
Background Options
Customize your canvas background:
- Background Color: Use the color picker to set a solid color background
- Transparent Background: Toggle transparency for designs that need to be placed over other content
- Background Image: Upload an image to use as a backdrop for your design
Note: When you resize your canvas, Typoji will try to maintain the positions of your elements. However, if you significantly reduce the canvas size, some elements might be pushed outside the visible area.
Exporting Your Creations
Once you've completed your design, you can export it in different formats to share with others.
Accessing Export Options
Click on the "Export" tool in the toolbar to open the export panel.
Export Format
Choose your preferred file format:
- PNG: Best for designs with transparency or when you need highest quality
- JPG: Best for smaller file sizes, but doesn't support transparency
- When using JPG format, you can adjust the quality slider to balance between file size and image quality
Saving Your Creation
Click the "Save Image" button to download your design to your device. The file will be named "Typoji-Image" with the appropriate file extension (.png or .jpg).
Sharing Tip
For social media sharing, match your canvas size to the platform's recommended dimensions (using the canvas presets) before exporting for optimal display without cropping.
Tips & Tricks
Keyboard Shortcuts
These keyboard shortcuts can speed up your workflow:
- Delete/Backspace: Remove selected elements
- Ctrl+V (Cmd+V on Mac): Paste copied content onto the canvas
- Shift (while resizing): Maintain aspect ratio
- Ctrl+Z (Cmd+Z on Mac): Undo last action
- Ctrl+Y (Cmd+Shift+Z on Mac): Redo action
Creative Design Ideas
Try these design approaches with Typoji:
- Emoji Scenes: Create landscapes or scenes by carefully arranging related emojis
- Text Emphasis: Use emojis as bullet points or to emphasize parts of your text
- Patterns: Arrange emojis in repeating patterns for backgrounds or borders
- Storytelling: Create a sequence of emojis to tell a simple story
- Custom Frames: Use shapes to create frames around your text or important emojis
Advanced Techniques
- Layering: Create depth by carefully stacking elements
- Opacity: Use semi-transparent shapes to create overlay effects
- Size Contrast: Mix large and small elements to create visual interest
- Text Effects: Stack multiple text elements with slight offsets to create shadow effects
- Emoji Combinations: Place emojis close together to create new composite images
Performance Tips
Keep Typoji running smoothly with these tips:
- Avoid adding too many elements to a single canvas (generally keep it under 50 elements)
- Use PNG format for higher quality but larger file sizes, or JPG for smaller files
- If your device slows down, try reducing the canvas size or removing some elements
- For complex designs, work in sections and combine the exported images later in another tool
Remember!
Creativity takes time and practice. Don't be afraid to experiment with different combinations of emojis, text, and shapes to discover new design possibilities. Have fun creating with Typoji!