About the Logo Maker
The Logo Maker is a user-friendly JavaScript app project designed to help you create custom logos effortlessly. This app provides a range of features to make the process easy and enjoyable.
Pure JavaScript!
- Built entirely with vanilla JavaScript!
- 100% pure JavaScript
- No libraries or frameworks!
- Unadulterated JavaScript means a focus on core language features!
- Standard JavaScript throughout for consistency and performance!
- Pure JavaScript implementation from start to finish!
- Is there another way to say it?
Fonts
- Utilizes Google Fonts for a consistent look across devices.
- A total of 74 fonts available!
- The style of the font is completely customizable:
- Font type
- Size
- Boldness
- Color
Logo Shapes
- A total of 42 logo shapes to choose from.
- Customize the color of each shape, regardless of complexity.
Logo Shapes
- A total of 42 logo shapes to choose from.
- Customize the color of each shape, regardless of complexity.
Logo Shapes
- A total of 42 logo shapes to choose from.
- Customize the color of each shape, regardless of complexity.
Getting Started
To get started, simply navigate to the "Logo Maker" tab and follow the step-by-step instructions to create your logo. You can customize shapes, add text, and adjust various settings to make your logo truly unique.
Contact Us
If you have any questions, feedback, or need assistance, feel free to reach out.
Support and Updates
ALthough this is a school project, I plan to keep on improving the Logo Maker, your feedback will be greatly appreciated.
Thank you for using our Logo Maker. Hopefully you find it helpful and easy to use!
How To Use the Logo Maker
Welcome to the Logo Maker! Follow these steps to create a custom logo for your needs:
1. Choose a Shape
Use the dropdown menu to select a shape for your logo. You can pick from various predefined shapes such as "Space Invader" or "Star". The selected shape will appear in the preview area.
2. Customize Shape Size
Adjust the size of the shape using the size slider. The shape will scale proportionally as you move the slider. This allows you to fit the shape to your desired dimensions.
3. Select Shape Color
Pick a color for your shape using the color picker. You can choose a solid color or apply a gradient effect. The shape's color will update in real-time as you make changes.
4. Add Text
Type your desired text into the text box under the "Caption Styling Tools" section. The text will automatically appear on the logo. You can customize the text's font, weight, size, color, and position.
5. Customize Text Appearance
Adjust the appearance of your text by selecting options from the "Caption Styling Tools". Choose a font, set the font weight, adjust the font size, and select the font color. You can also position the text by specifying X and Y coordinates.
6. Preview and Save
Review your logo in the preview area. Make any final adjustments to the shape or text as needed. Once you're satisfied with your design, save your logo using the save button provided.
Additional Tips
- Ensure that the text you enter is sanitized for security purposes.
- Experiment with different shapes and colors to find the best combination for your logo.
- Use the font weight and size options to make your text stand out.
If you have any questions or need further assistance, please refer to the FAQ section (coming soon) or contact support.
Font Samples
Here you can see samples of the different font options available in the app.
Each font responds to styling differently
While a font may be able to change to a light bold style, others may not. This is where this section comes in handy. You can style a font and see its effects to check if the style you want is compatible with that font. At the same time, you can see all the fonts available in this app.
Each grid card consists of:
- Font Name
- Sample Text
Available Fonts
I have integrated a variety of fonts from Google Fonts, 74 fonts in total, ensuring a wide range of styles to choose from. Whether you need a classic serif, a modern sans-serif, or something more decorative, you'll find an option that suits your needs.
Customizing Fonts
Customization options include:
- Changing the font type
- Adjusting the font size
- Modifying the font weight (light, normal, bold)
- Selecting the font color
By experimenting with these options, you can create a unique and visually appealing logo that stands out.
Logo Maker
This section contains the JavaScript Logo Maker. For information on how to use it, head to the About tab.