Posts Tagged as: photoshop

December 20, 2019

Getting fancy with CSS’s Position Sticky

Yesterday we published this ambitious story on Esquire about competitive yoga, which apparently is a thing that exists.

It’s the result of an experimental collaboration between a few different departments within Hearst Magazines, each possessing vastly different skillsets but all sharing a love for quality storytelling. The goal: Abandon the various elements on a modern webpage that compete for your attention (ads for instance – of which this article has none) and just tell a damn good story.

I’m proud of how it turned out, and wanted to share some learnings about the nerdy CSS stuff featured in the story.

One of my favorite parts of the story are these little parallaxy breaker images. Parallax can be a dirty word in web design because it’s so easy to screw up, but we developed this method that adds some slick visual candy to the page without performance costs on modern browsers, so I thought I’d walk you through how it’s done.

Ready? Ok, let’s go.

The first step is to get CSS “position:sticky” working in a basic way. In this example, the blue box is sticky and the image element is its sibling. They’re wrapped in a div, which is important to get sticky positioning to work.

Now that the basics are working (and we have silky-smooth browser-native scroll behavior with no JavaScript!) we just need to move things around and adjust margins and padding. Here we go…

First we want the text to be positioned in the center of the screen. We change it from “top:0px” to “top:50%”, and we get this:

The blue box gets sticky at around the right place, but it leaves an ugly gap; that’s where it “lives” in the document flow. So how do we fix that? Easy! Just put a negative margin on the top of the parent wrapper!

To visually clean this up, you can put a white background on whatever div you’re invading with your top negative margin. Then you’ll have something like this…

Ok, so now the text enters the image smoothly but exits lamely. Let’s make the bottom as smooth as the top.

If we add some extra height below the image, it will scoop up the text instead of the image itself. Badass.

To hide that text below the image, we can apply a negative margin just like we did at the top of the parent element.

Sweet! But we’re not quite done… What happens if the user resizes the browser and the height of the box changes? Since the size of the top/bottom margins depends on the height of the text box, this would throw off the vertical alignment. For example:

So how can we fix this?

Who gives a shit!

Kidding… Of course you give a shit. That’s why you’re still here.

Here’s where some sparingly-used JavaScript can come in handy. When the page is resized, you can dynamically calculate the height of the text area, and use that value to set the negative margins we hard-coded above. (Just make sure to “debounce” your function otherwise you might crash someone’s browser and look like a fool.)

So the only thing left is the transparency part. The trick here is to bust out Photoshop and replace the main image with a semi-transparent image, which will become the “foreground”. Then you use the regular image and absolutely position it in the parent container as the “background”.

After some z-index fiddling, you’ve got your effect. The more you mask out of your foreground image, the cooler the effect will be.

(I was lucky to work with Mike Kim, whose attention to detail is amazing. Anyone that can silo hair wins at Photoshop.)

I hope this was helpful. If you have any questions or want to show off anything cool you’re making with CSS position:sticky, hit me up on Twitter.

August 29, 2016

How neural networks create images

This is fascinating stuff.

According to Gene Kogan on Twitter: DGN “deep generator network” is a neural net that synthesizes realistic images by learning low-dimensional encoding over an image set and samples from it to activate neurons associated w/ a class, e.g. cheeseburger.

More examples here.

This is some seriously future shit.

August 17, 2015

How to Make a Fillhouette

I discovered something pretty cool in Photoshop. If you select the inverse of a person’s silhouette and apply a “Content-Aware Fill”, the results can be funny, interesting, and sometimes quite beautiful. And it literally takes about 15 seconds.

Here’s how to make a “fillhouette”.

1: Find an image that’s not too difficult to silhouette. Anything with well-defined edges of the person is good.

2: Select the person. The easiest way is to use the “Quick Selection Tool”.

3: Shrink the selection so it’s a few pixels inside the person’s silhouette. Go to “Select > Modify > Contract…” and choose a value around 3.

4: Now invert the selection so the background is selected instead of the person. Go to “Select > Inverse”.

5: Now, just go to “Edit > Fill…” and choose “Content-Aware” from the dropdown. Press OK and you’re all set!

Here are some other fillhouettes I just quickly put together.

I’d love to see what the creative community can do using this technique, so I started a Tumblr where I’ll be posting the best examples I come across: fillhouettes.tumblr.com

February 5, 2014

Upstairs Downstairs

Here’s the view from the elevator in my new building – from the basement and the first floor. Mesmerizing and nauseating at the same time!

upstairs-downstairs

February 3, 2014

The image exceeds the size Save for Web & Devices was designed for.

Granted, this Photoshop dialogue box was probably conceived in the mid-to-late 2000s when mobile devices were barely in their infancies, but it’s particularly ironic seeing it today when I’m trying to export a photo I took with my iPhone.

Screen shot 2014-02-03 at 3.42.18 PM

June 26, 2013

Rasterize Layer

Wish I’d thought of this.

Via Reddit

June 6, 2013

120 New Yorker Cartoons Combined

What happens when you write a Photoshop action that combines hundreds of cartoons from The New Yorker? This!

May 6, 2013

Confusing User Interface Elements

Too many people are trying to make the web more usable so I thought I’d try the opposite. Below are some user interface elements I designed to confuse, badger, and infuriate users. Enjoy.

1: The Chutton
Part checkbox, part button. Ideally this will initially present itself in the “checked” state, regardless of user intent.

2: The Boggle
Functions as a regular checkbox, but activating the slider simply covers up the checkbox and label. Avoid action-oriented labels such as OK or YES, and instead use vague language and/or the past tense.

3: The Notifuckation
Displays the number of notifications alongside an active radio button. Clicking or tapping on the radio button immediately marks all the notifications as “read”.

4: The Search & Destroy
A standard text entry field, but the user must slide the search button to the left to submit the form. As the search button slides, it deletes the characters it touches.

5: The Homer
This UI element has everything; pre-populated tags that are confusingly named, 2 scroll buttons, a search field with a settings icon, and Windows controls that do nothing!

I’ve also made the PSD available for download. Please use irresponsibly.

April 11, 2013

Computers and Hollywood

I found this great subreddit about those designs on computer screens you see in movies. Some really interesting stuff in there.

Speaking of fake UIs, here’s a cool video made by designer Phillip Lentz. I’d love to open it fullscreen on my work computer and start frantically typing and see how long it takes someone to notice. If they ask what the hell I’m doing I’ll probably say something about how I’m just breaking through the encryption shield before uploading a nano-virus.

April 5, 2013

Listening to a Record from a Photograph

This blew my mind. Apparently it’s possible to use a photograph of a record and get an audible recording from it.

The step-by-step process illustrated in this article called Extracting Audio from Pictures makes sense once it’s broken down. Basically you convert the round image of the grooves into a straight line…

…then you use Photoshop to boost the contrast of the lines, which become the actual waveforms you feed into ImageToSound software.

Amazing stuff. I often wonder about future generations being able to eavesdrop on people in the past by using leaps in technology.

For example on this Wikipedia page about Archaeoacoustics:

Gregory Benford’s 1979 short story “Time Shards” concerns a researcher who recovers thousand-year-old sound from a piece of pottery thrown on a wheel and inscribed with a fine wire as it spun. The sound is then analyzed to reveal conversations between the potter and his assistant in Middle English.

The idea that people’s voices would have unknowingly been recorded onto the bowl like a modern day record, locked away until a future generation figures out how to extract the audio, is awesome. True, Mythbusters busted this myth, but I wouldn’t fully discount the general concept of learning more from old data with better and better tools. (Think the dino DNA in Jurassic Park.)

Taking that pottery example further, I wonder if when I take a photo with my iPhone, a future generation will be able to determine my mood that day by examining whatever minuscule image artifacts my brainwaves caused in the image sensor.

It sounds crazy, but not much crazier than one ancient potter telling his buddy to keep his voice down so the future can’t eavesdrop on their clay.

February 3, 2013

WWBD

This helps guide me daily.

January 29, 2013

Photoshop Warning Dialogue With An Exclamation Point

I hadn’t seen this warning in years, but came across it today while choosing “Create Layer” on a layer’s blending effects.

Are there any other Photoshop dialogues that have exclamation points? None that I can think of.

January 2, 2013

Disabling the “Could not export the clipboard because it is too big to export” Photoshop Warning

As an active Photoshop user, I usually get this error message a few times a day:

Well today I decided to do something about it, dammit. Turns out it’s an easy fix; just go into the “General” tab of your preferences and uncheck the box called “Export Clipboard.” Duh.

As image file sizes get larger and larger, I don’t know why Adobe doesn’t disable this by default in future versions of Photoshop. Do many people actually copy something in Photoshop and want to paste it elsewhere?

July 23, 2010

Pixel density comparison: iPhone 3 and iPhone 4

Clearly I’m not the first dude to weigh in here, but I wanted to get a real-world sense of the increased resolution on the iPhone 4’s “Retina Display.”

In these photos I’m holding an iPhone 3Gs in front of two computer displays running Apple’s iPhone Simulator. The Simulator is running a virtualized version of iOS 4.0.1 set to mimic the iPhone 4 device. The iPhone 4 simulator looks huge on the computer screens because today’s Macs have pixel densities in the 72-120 range, while the iPhone 4’s pixel density is 326.

Pre-dousing any flamey comments, I’m fully aware this is 100% unscientific so I offer this information purely for my own delight. That said, if you have something positive to share, surprise me. :-)

An iPhone 3Gs held roughly 30″ away from a 27″ iMac running a simulated iPhone 4 interface. Badass.

Same as above, but with a 1920×1080 display. I needed to hold the iPhone roughly 34″ away to get the sizes to match.

June 30, 2010

Chef’s Technique: Proper Knife Grip

October 17, 2009

Dubai in LIC

After seeing this post at kottke.org I made this quick and dirty mockup below. The takeaway: it’s a tall fucking building.

burj in lic

August 28, 2009

iPhone’s Artist Icon Looks Like Bono

iphone-artist-icon-bono

June 26, 2009

RIP Sting

April 14, 2009

Snooth Cycling Jersey

Check out my design for the first ever Snooth Cycling Jersey. If you work for a winery or wine merchant, speak up on the Snooth Forums and we just might include your logo for free.

Photoshop jockeys might appreciate how I simulated the stretching fabric on the back. All I needed was an iPhone, a t-shirt, a bottle of wine, and a dream. Which is coincidentally how most of my weekends begin.

November 6, 2008

Snooth Corkscrew

If anyone’s curious, here’s some of the stuff I’ve been up to at Snooth.

November 1, 2008

Mount Everest Tilt-Shift

When I saw this satellite photo of Mount Everest, I couldn’t not put a tilt-shift effect on it. The result is pretty cool:

October 1, 2008

McCain Ad

I warned you…

Graphic Design Announcement

A graphic design announcement

September 3, 2008

Rug Addict

If you’re a professional geek like me, making an important home decorating decision is impossible without firing up the ol Photoshop. A great example of this is the rigmarole I recently went through to make sure a new rug would be a worthwhile purchase. Whether or not you’ll like the rug is debatable, but my Photoshop skills are totally slammin.

August 11, 2008

Canon 2X Extender Comparison

One of my favorite lenses, if not my absolute favorite, is the Canon 70-200 mm 2.8L IS. I also have the 2X extender, but am sometimes a little hesitant to use it because I know it blurs the imagery a bit, as well as decreases the maximum aperture to 5.6.

So a while back I did a little side-by-side comparison to find some of the benefits and drawbacks to using the 2X extender. Let’s have a look, shall we?

Below are two photos taken with my 5D – the one on the left is using the 2X extender and the one on the right is not. Both shots were taken handheld at ISO 400, f5.6, and with a shutter speed of 1/400:

Clearly, there’s no parking on Wednesdays from 8:30 to 10 AM. Also, you shouldn’t litter. So let’s increase the image on the right’s resolution from 300 to 600 (2x) to compare it:

Cool. Now they’re the same size and the real comparison can begin. First and foremost, the image on the right (no extender, enlarged in PS) looks a little punchier, even though the image on the left (2X extender) is slightly sharper. It’s an interesting comparison because they both have their good and bad aspects. So let’s sharpen the image on the left and have another look:

Now that’s what I’m talking about. In the above image, I think it’s pretty clear that the image on the left with the extender is the winner here. So let’s take it a step further and enlarge them both. You know, for shits and giggles and stuff:

By now they’re both pretty much starting to look crappy. But it’s important to note that it’s possible to make out the “DEPT OF TRANSPORTATION” on the image on the left, and not on the right. To me that sealed the deal.

So my conclusion is that when there’s plenty of light and I’m trying to zoom as close as possible, I’m better off using the 2X extender. When there’s low light, however, my guess is that you’re better off not using the extender because you’ll need that 2.8 aperture to stop as much motion as possible. But that’s a comparison for another day. Or should I say, another night. And that right there is the funniest thing you’ll read all day.

July 31, 2008

Hubris

Every once in a while I click on some spam I’ve received (just for fun) and I’m taken to some bogus site that automatically forces me to download an .exe file. And as a Mac user I just sit back and laugh as I put that .exe file in the trash and go about my business.

I love spitting in the face of danger. Hubris never tasted so good.

March 25, 2008

Time Machine and Photoshop Preferences

Hey everyone – miss me? I don’t know how you survived yesterday without a new caption contest, but I’m back from a little vacation (Anna and I went to Mexico) so it’s onward with the caption contests, shit jokes, and other useless diversions.

Case in point – I just discovered another nifty use of Apple’s Time Machine. Ever launch Photoshop and suddenly all the pallets and preferences are set to the default (ie, moron) settings? It happens to me about once every few months. For some reason the preferences file (~/Library/Preferences/Adobe Photoshop CS3 Settings) occasionally gets corrupted and reset to the factory default. But with Time Machine, just browse back to a time when you knew everything was peachy, and restore that sucker. Just worked fine for me.

February 9, 2008

Comparing Photoshop’s Lens Blur Filter to a Real Tilt-Shift Lens

By now, many of us are aware that you can replicate the characteristics of a tilt-shift lens with Photoshop. But I’ve always been curious about just how closely Photoshop can recreate the complex bokeh (image blur) that results from a real tilt-shift lens. So with this burning question in my head, I rented a tilt-shift lens and went to work…

Read the rest of this entry »

January 22, 2008

Graphic Designer Prank

Hate your job as a graphic designer? Don’t forget to do this before you quit.

December 6, 2007

BritePic Test

This picture has some new interactive advertising-related features embedded in it. Does anyone think this is the next big thing, or just another intrusive way for advertisers to make our lives more difficult?