Home / Forum / General Discussion / TUTORIAL: create transparent band logo incl. drop shadow - in browser

TUTORIAL: create transparent band logo incl. drop shadow - in browser

Posted: 28 Jan 2023 11:20
Posts: 24
Joined: 2020-12-05

please create stickies with guides/tutorials to help newbies,
i see a lot of crap posted again, no drop shadows, stretched images etc... in general poor quality

TUTORIAL: create transparent band logo incl. drop shadow - in browser

Band: Rocket From the Crypt
Image source: "Scream, Dracula, Scream!" album cover

Chose/search a sharp, high quality image (or scan it yourself at high DPI)
Search engine setttings:

Go to
[esentially PhotoShop in browser, alot of the features/buttons are the same - not as good ofc]
You can change the language with More ► Language

Drag and drop in your image.

Image ► Adjustments ► Levels
Click "Sample from image", click black color, click into black font in image
... now the black is truly black

Image ► Adjustments ► Invert
... now we have our white font with black background

Click left on the Rectangle tool,
drag a square around the font with enough space

Image ► Crop

Click left on the Magic wand tool,
click into the black in the image.
You can add to the selection by holding Shift while clicking
Edit ► Cut we have our white font with transparent background

Image ► Trim... ► Transparent
[if there is still too much space around the font, remove excess pixels with Rectangle tool + Image ► Cut]

We should now have something like this:

"Please only upload transparent PNG logos.
The dimensions should be exactly 400x155 or 800x310 pixels Wide and High."
... we need to get our image to the correct dimensions.

Image ► Image size
Chose 20 pixels below the largest length, because we need a border.
Here we aim for an image size of 800x310, so chose either 780 width or 290 height.
But - never resize up!
In this case, i'll chose 290 height. Click OK.

Image ► Canvas size
Enter 800 x 310 pixels.

Now to the drop shadow.

Layer ► Layer style ► Drop shadow
Opacity: 75%
Angle: 120°
Distance: 5
Spread: 0
Size: 5
Noise: 0

Click on Background on the right side,
drag your layer down to the second symbol to the right (New Layer)

Click on your new layer on the right side.
Add the second drop shadow to this new layer:

Opacity: 75%
Angle: 120°
Distance: 0
Spread: 0
Size: 2
Noise: 0

Layer ► Merge down

File ► Export as PNG

When you get routine doing this, you'll make these in a minute.

👍 laurent94jbl1

Showing 0 to 1 (Total: 1)