Animated Greyscale to Color Image Reveal Effect

Ana Tudor recently shared a trick on how to make an image partially greyscale:

Here’s her code in a CodePen demo for you to play with:

See the Pen CSS Partial Greyscale by Bramus (@bramus) on CodePen.

☝️ Tip: Tweak the angle and the percentage of transparent to see how it behaves.

~

Inspired by a CodePen demo by Jhey — in which he built image reveal on hover using filter and clip-path — Ana rebuilt his demo using her technique:

One advantage of Ana’s technique is that it doesn’t require duplicated images in the markup. A disadvantage though is that it only works with background images. Chrome only too, as it relies on @property.

I like this form of code golfing 🙂

UPDATE 2021-02-02: Ana also made a non-Houdini version that uses box-shadow on a wrapping element. Because of that you can simply leave your img tags intact, so all cons of her first iteration have been nullified. Cool!

DALL·E: Creating Images from Text

DALL·E is a 12-billion parameter version of GPT-3 trained to generate images from text descriptions, using a dataset of text–image pairs. We’ve found that it has a diverse set of capabilities, including creating anthropomorphized versions of animals and objects, combining unrelated concepts in plausible ways, rendering text, and applying transformations to existing images.

If you give DALL·E the task to generate images with “an armchair in the shape of an avocado”, you get this:

And to say I was questioning the power of computers earlier today 😅

DALL·E: Creating Images from Text →

🤓 Clever name too: Dali + WALL·E = DALL·E

Fun with browsers: how to get an image into the current page

Christian Heilmann created a demo page where a user can add an image to the page through various ways.

I gave myself the task to build an interface to make it as easy as possible for a user to add an image into the document. I wanted to support:

  • Image upload
  • Drag and Drop
  • Copy and Paste

Each scenario requires a small tad of JS. Here’s a pen with the final result:

Fun with browsers: how to get an image into the current page →

FastImage, performant React Native image component

React Native’s Image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you’ll generally get the sort of built in caching behavior you’d have in a browser. Even so many people have noticed:

  • Flickering.
  • Cache misses.
  • Low performance loading from cache.
  • Low performance in general.

FastImage is an Image replacement that solves these issues. FastImage is a wrapper around SDWebImage (iOS) and Glide (Android).

Don’t forget to react-native link after installation, as some native counterparts are used:

yarn add react-native-fast-image
react-native link

FastImage is basically a drop-in replacement for Image, but with some extras (such as prioritisation):

import FastImage from 'react-native-fast-image';

const YourImage = () =>
  <FastImage
    style={styles.image}
    source={{
      uri: 'https://unsplash.it/400/400?image=1',
      headers:{ Authorization: 'someAuthToken' },
      priority: FastImage.priority.normal,
    }}
    resizeMode={FastImage.resizeMode.contain}
  />

FastImage, performant React Native image component →

Vibrant.js – Extract prominent colors from an image

vibrantjs

Usage is simple:

var vibrant = new Vibrant(img);
var swatches = vibrant.swatches()
for (var swatch in swatches)
    if (swatches.hasOwnProperty(swatch) && swatches[swatch])
        console.log(swatch, swatches[swatch].getHex())

Works by reading in the image, placing it onto a <canvas> element, and then getting all pixel information from that canvas.

Vibrant.js →

Photoshop Google Maps Tile Cutter Script Update (Again)

Five days after the previous update PS_BRAMUS.GoogleMapsTileCutter — a Photoshop Script which automatically chops up a large image into tiles for use with Google Maps — has been updated again.

tilecutter-main

With this new version one can now choose to place all tiles into one and the same folder (as it was before), or use subfolders instead. Handy if you’re exporting 21845 tiles (=all tiles needed for zoom levels 1 through 7) to prevent your system from hogging when accessing the export folder

After exporting the tiles themselves, PS_BRAMUS.GoogleMapsTileCutter now also creates an empty.jpg file for use with the Google Maps implementation. Above that you don’t have to make the implementation yourself anymore as PS_BRAMUS.GoogleMapsTileCutter now also generates an index.html for use with your fresh tiles.

The Don’t export transparent tiles option has been removed for now, as it requires some extra JavaScript logic in the implementation: Better is to have a safe default than a feature which breaks thing for most users. The option might return later though, yet just not right now.

Download PS_BRAMUS.GoogleMapsTileCutter

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Photoshop Google Maps Tile Cutter Script Update

It’s been 1.5 years already since I created PS_BRAMUS.GoogleMapsTileCutter, a Photoshop Script which automatically chops up a large image into tiles for use with Google Maps. Today a huge update was released.

Sparked by an initial pull request by Nick Springer, PS_BRAMUS.GoogleMapsTileCutter now sports a UI dialog in which you can set the options before starting the cutting process. In the previous version one had to change these in the source of the script itself.

tilecutter-progress

One of the new features that was added is the option to prevent empty tiles from being saved. Can come in handy to save bandwidth. Above that the processing was hugely improved for files with lots of layers: right before the tilecutter kicks in the whole image is flattened for much faster processing.

Finally a little feedback dialog was added to give feedback during the processing the image.

tilecutter-progress

Here’s the script in action

Output is still the same … but faster 🙂

Download PS_BRAMUS.GoogleMapsTileCutter

TinyPNG — Compress PNG images while preserving transparency

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colours in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

Works so well (shaves more than 50% off the files I’ve tested over time) that I’ve included it in my screenshotting flow for screenshots here on bram.us:

  1. Take the screenshot (Retina MBP, thus that’s one BIG screenshot)
  2. Resize the screenshot in Photoshop to 1120px width (coincidentally twice the width of the content column of this site)
  3. Save for web as a .png
  4. Run the save .png through TinyPNG

Need to automate this. Somehow.

TinyPNG →