The starter CodePen comes with Twemoji built in to make choosing a product image as easy as possible. By choosing your own aesthetic and palette, you can better learn how to apply the techniques to your own work. You may choose to add vibrant, bright colors for a candy bar or subdued, calming colors for a yoga mat. Why?ĭifferent products will suit different aesthetics and thus different color palettes. I encourage everyone to choose their own individual product image, though. This could be anything - a chocolate bar, a pair of shoes, a tractor, a cool hat. This is where you come in!įirst things first, you should choose an image to replace the question mark. There is no product image and the design has little personality. Right now, the colors are either black or white. I have created a CodePen that you can fork to get started. It is a simple example but provides an excellent blank canvas to experiment with color. The base design itself is a “product card”, the likes of which you will likely have come across on a variety of e-commerce sites. We will be starting with the same base design and adding our own individual style. This tutorial is all about learning by doing. To make the most out of this tutorial, you should be comfortable working with both HTML and CSS. By the time you reach the top, you will have all the skills you need to create beautiful, coherent palettes. This post hopes to be your virtual guide up the mystical mountain of color. Is color theory getting you down? Are you tired of the same old preset palettes? Sick of hitting “regenerate” on a magical color palette creator?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |