Tangy is building your next step
Shaping the lesson around what you want to make.
Tangy is building your next step
Shaping the lesson around what you want to make.
Computer Science
Leverage your HTML/CSS structure knowledge to master Photoshop. Design, composite, and export a high-fidelity web hero graphic and a matching set of digital assets ready for deployment.
Build it yourself, get guided when you are stuck, and leave with proof you can actually show.
Follow the path module by module. The layout keeps the lesson count, your progress, and the module description in one scan.
Canvas Setup & Layer Architecture
2 lessonsMap your understanding of the HTML DOM to Photoshop's workspace. Set up a web-optimized canvas and learn to control the layout using layers and groups.
Isolating Elements and Clean Compositing
2 lessonsLearn to cut out complex objects and composite multiple images together non-destructively to create your custom hero graphic focal point.
Visual Enhancements & Layer Styles
2 lessonsApply color corrections and build visual depth. Bridge your knowledge of CSS borders and box-shadows to Photoshop's advanced Layer Styles.
Vector Elements & Web Typography
2 lessonsCreate sharp, scalable shapes for interface controls and overlay beautiful, readable text elements on your hero banner.
Optimizing & Exporting for the Web
2 lessonsSlice and export your designed assets into highly optimized, web-ready file formats to use directly in your React applications.
Public lesson
If you have ever uploaded an image to a website only to find it looks blurry, loads painfully slowly, or has weirdly distorted colors, you have run into a mismatch between print settings and screen settings.
Before we build web assets, we need to configure our workspace correctly. To do this, we will use a free, browser-based editor called Photopea.
Tasks
Open a new tab, go to photopea.com, and click New Project.
The project window is asking for dimensions, resolution, and color mode. Let's start with the physical space.
Tasks
For a standard full-screen web banner or background, we use 1920x1080 pixels (Full HD).
19201080Why pixels? On screens, physical units like inches or centimeters do not exist. A screen is simply a grid of tiny light-emitting dots. If you define a canvas in inches, the browser has to guess how many pixels to give it, which often results in blurry images.
Tasks
Look for the box labeled DPI (or PPI - Pixels Per Inch).
72.The screen myth: You might have heard that 300 PPI makes images look sharper. While that is true for printing on paper, a screen only cares about the total pixel dimensions. A 1920px image is exactly 1920 pixels wide on your monitor, whether the PPI is set to 72 or 300.
We set this to 72 because it is the standard baseline for digital displays. Keeping it at 72 prevents graphic software from adding unnecessary metadata or bloating your file size, keeping your website fast.
Tasks
Look for the color option (it might say RGB or CMYK).
Select: [ RGB / CMYK ] <-- Choose RGB
Select: [ RGB / CMYK ] <-- Choose RGB
Why this matters:
If you accidentally build a web asset in CMYK, the web browser has to translate ink values into light values on the fly. This often fails, making your bright, vibrant colors look dull, gray, and washed out.
Tasks
Once you have filled in those settings:
B).Now, let's verify everything is correct. Look at the top tab of your document in Photopea. It should display a summary of your active canvas settings.
It will look something like this:
New Project (1920 x 1080, RGB)
Explain it back
Put it in your own words
To complete this step, reply with:
20 more characters
5 modules · 10 lessons
Canvas Setup & Layer Architecture
Isolating Elements and Clean Compositing
Visual Enhancements & Layer Styles
Vector Elements & Web Typography
Optimizing & Exporting for the Web
Learn by building your own version.
Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.