backstage

I needed to make an image for #walkmyworld. I wanted to do a series of cascading doors and then an open image into a room. It is a loose metaphor for hwo we step in and out of different identities.

How I Did it:

I first went to flickr. I start with their creative commons page, It doesn’t work well. I click on CC BY-SA and then use a search term. I am looking at just CC BY-SA right? Nope. If you look carefully you have all licenses. You have to reselct CC images and then look closely at the license to make sure you can use and reappropriate the image.

Crediting:

I am big on crediting…well trying to get better. I tried this time I really did. I had every image open in a different window and then I tried to favorite them. I wasn’t signed on and Flickr wouldn’t let me sign in becuase I had a Yahoo (fantasy) and a Gmail (Flickr) account,.Signed in, lost images. I would have credited….Promise.

The Tech Stuff

I used pixlr editor a free editing app available in Chrome (maybe Firefox too I haven’t checked). It is a great program and does almost everything Gimp or Photoshop did.

• I started with the first image as my base layer.
• I then opened the second door.
• I unlocked the layer.
• I then used the magic wand tool to select some of the image (can give it a cool ghost like effect).
• I then used the lasso tool (polygonal) and chose the edges of the door.
• I copied the selection and pasted it on to the first door.
• I then used just the lasso tool on the third door.
• I had to resize the layers (each door was a different layer). In Pixlr (and everywhere else this is Free transform.

What I would do differently.

• Start with the largest images. I thought I want the doors to fit in. On Flickr I will download, large, medium, small to save time. Seemed logical, bad idea.Way better to scale down than it is to scale up.
• Blur the thethird door a bit. I would either apply a blur filter or use a smudge tool to mess up the clean lines. There is a little I guess I will call it geometric dissonance that doesn’t sit well in my gut.
• Maybe I should have kept some of the blue frame.

This is my first post in the YouShow series. I will not have time to keep up the the class, but I make stuff online (but I break more). I originally wrote the post on my front stage blog but the comments are so meta and the writing so stream of thought I felt it needed its own place.

This blog title is in reference to embodied nature of writing. My process is so hard to document. I could get transfixed on an idea walking the dog, playing with kids or sitting in my porcelain office.

My ideas are usually well past my skill level so writing then turns to a mixture of caffeine, cursing, and throwing things.

Since we want #walkmyworld participants to create content we also want them to  to understand the rights of makers. I decided to make a  a tutorial (mainly because I needed to learn about CC and ontainers to overlay images.)

The director’s cut:

I I do not know how to write HTML/CSS. I just steal code from elsewhere. Then I tweak it for awhile. Throw something. Walk away and posts pleas for help all over the web. That is my workflow.

This make began with me trying to learn how to add an image on top of an image in CSS. That may have even been my search terms in Google. That brought mehere.

I scrolled through the CSS and saw the multiple image overlays and thought, “That would be cool to display all of the images of CC licenses.” I figured I could do it….So I copy pasted all the code. (I still don’t know why some selectors have the same name .multiPic followed by .text1). I just new I could change the background url.

It worked. So I decided let me find one image for each of the Creative Commons licenses and add an overlay for the license and the attribution.

Then things started going wrong. I didn’t want the image url in the background of CSS. I wanted CSS that would allow me to drop in images and switch the license. Being hidden in a style sheet did me no good.

So I posted this message on discourse.webmaker.org hoping someone would respond.

(Note: I need to learn how to post code in spaces that  take markdown. I tried blockquote but it still formatted).

Then  fourtonfish responded. He defined some key terminology for me, gave me some resources (I ignored the tutorials…for now…but he inspired me to keep hacking away. Using my growing understanding I found some tutorial (couldn’t find it in my history..I tried so many)  that got me to make one div  container and put the other three divs inside of it.

It worked! I now know enough about overlays and containers to play.

…..well except the hover. So I posted another message to @fourtunfish on discourse.webmaker.org. He called me out for ignoring the tutorials and then fixed my code.

I went in and added the correct code and I did it. Just had to search for the images and copy the code a few times. I then went back into the code to add my comments. I am trying hard to use clear instructions. (I am also

I tried to add the CSS to my wordpress stylesheet. I was able to save it to the stylesheet but when I tried the html code on a page or a post the images did not overlay. That is my next task. Luckily my Wordpress theme comes with great support and Bryan Hadaway of CyberChimps is helping me try to solve the issue.

I really want the tool to work. I like to put the license in a caption or right on the photo.

 Next Episode Teaser: fourtonfish also forked my original code to show me how simple animations can be in CSS. He sent me some tutorials that will take me to   and now I want to learn how to animate stuff: