Alpaca image generator website

user profile photouser profile photouser profile photo6334 developers have joined this project.

What you will practice

You will learn how to implement the front end of an image generator using JavaScript, HTML and CSS. The skills you learn in this project will allow you to create image generator websites and allow your users to generate, combine, and download images (such as memes!).

Introduction

At DevProjects, we love alpacas! It's our mascot, and we'd love for you to have your own alpaca profile photo. With that said, this project is not just about alpacas. Allowing users to generate and download avatars are common in many interactive websites. In this project, you'll learn how to create an image generator website that allows users to generate, combine, and download images.

This project should take you approximately 8 hours to complete.

Requirements

  • A website to let you customize your own alpaca profile picture (or desired image)
  • Customization panel
  • Randomize feature
  • Download generated image feature

The following GIF shows one way to implement the UI. Feel free to interpret the requirements however you'd like!

Alpaca_demo_-_10.gif

Suggested Implementation

  • Get your image assets ready. You could use the alpaca images we provided or use your own ones for your image generator.
  • Prepare your preferred front end stack. We recommend using tools like Create React App or Vue CLI if you want to have a quick setup.
  • Create an alpaca (image) preview UI
  • Add list of buttons for customizing your alpaca (image)
  • Add randomized alpaca feature

References

  • Make sure you get the layers of the body parts right. You don't want to end up having your alpaca's mouth being covered by its face! 😅

Interested in this project?

Shorten your learning curve with on-demand programming help

The awesome set of verified mentors will provide guidance and mentoring help when you are stuck.

Suresh Atta

  • Post request free
  • First 15 mins free
Shorten your learning curve with on-demand programming help

Browse more projects

More coming soon...