My Blog

Monthly Archives: September 2014

How to: Make a GIF Using Images in Photoshop

GIFS! I have a real fascination with stop-motion photography and find that GIFs are totally undervalued in that medium. I like to think of them almost like one of those pencil doodles you made in the corner of your notebooks as a kid. They give you the ability to add movement to static images and the best part about them is that you can embed them as an img on a site, no need to embed video. A lot of people create GIFs from videos, but I thought I’d share a tutorial on how to make one using images in photoshop.

To begin, you’ll need images that you want to put together to make your GIF. The main point of GIFs is to show movement, so you’ll want images that vary. Above is an example of a GIF I created and below I’ve broken it out to show the individual images that make up the GIF.

gif1

gif2

gif3

gif4

gif5

Here are the steps to make your own:

Step 1: Create a new folder where you will save your images, for the purposes of this, I named my new folder “GIF”

Step 2: Select or create your images and save them in your “GIF” folder

Step 3: Using photoshop, select “File” -> “Scripts” -> “Load Files into Stack…”. A window will pop up (like the one below) and you’re going to select “Folder” and then browse through you folders to find “GIF” and then select “Okay”

GIFstep1

Step 4: Once the layers have loaded, select “Window” -> “Timeline” at the top of the screen and you’ll see a new pane at the bottom of your photoshop window, there will be a dropdown menu (shown below) and from there you are going to select “Create Frame Animation” (NOTE: once you’ve selected the option, you have to click the box again to activate it)

GIFstep3

Step 5: You’ll now see one of your images in the timeline, to load the rest go to the dropdown menu in the top right corner of the Timeline pane, click on that and select “Make Frames From Layers” (as shown below)

GIFstep4

Step 6: Now you should have all your images lined up in a timeline, if they didn’t load in the correct order, you can click and drag the image thumbnails to re-order them

Step 7: You can change the amount of time each image is shown in your GIF by clicking the “0 sec” dropdown, I typically go with 0.5 seconds per image

GIFstep6

Step 8: You can also change the number of times your GIF will repeat by clicking the “Once” button at the bottom, the automatic options are “Once”, “3 times” or “Forever”, sometimes it can be annoying for readers if you have them set to Forever, so select the number that makes the most sense for your medium

GIFstep7

Step 9: You are now ready to save the file – when you go to save, be sure to select “File” -> “Save for Web…”

Step 10: A window will pop up, ensure you’ve selected “GIF 128 Dithered” in the top right and then hit “Save…” where you’ll be prompted to create a file name and select a location to save the GIF.

And that’s it! Hope you found this helpful, if you have any questions or need anything clarified – please leave a comment below.

Image source: GIF made by me

HackerYou Recap: Week 2

September 27, 2014

droneTweet1

droneTweet2

droneTweet3

 

How To: Make a Rubik’s Cube using CSS

September 22, 2014

I was having some fun with CSS Transforms and created a Nicholas Cage Rubik’s Cube. See below the steps for how I made it using only HTML & CSS. Click here to check out the final result on Codepen.

Step 1: This cube has three visible sides and 9 squares within each side, so I wrote three larger section divs and 9 empty inner divs within each of them.

Step 2: Because the colors need to be different and there are 6 colors total in a rubik’s cube, I gave each of the inner divs a class with different number values from 1-6 (NOTE: the squares in the top section have to be named with a different class from the left and right sections because they required a different height/width as they are more skewed)

Step 3: Set your height and width to be the same for all inner squares. Set the background color to varying colors of the rubik’s cube. Add a black border to each square.

Step 4: Set the inner divs to float:left and then set your height and width on the larger sections to fit 3 divs horizontally and 3 vertically (remember to incorporate the size of the border into the width/height). I also added an extra border around the larger section div so it would have a thicker black line around the larger cube.

Step 5: Using transform in your css, add transform: scaleY(0.59) rotate(45deg); to the top section, transform: rotate(30deg) skew(30deg); to the left section and transform: rotate(-30deg) skew(-30deg); to the right section. These will skew the squares and rotate them so they are the right shape for your 3-sided rubik’s cube.

Step 6: Using position: absolute; you can position the three sections on the page so that they all fit snug together in a rubik’s cube shape. You’ll likely have to play with the height and widths of the top section divs in order for them to fit snug.

(OPTIONAL) Step 7: If you want to have fun with it, you can set the background of each of your three larger sections to be a funny image, and then set it so that when you hover over each smaller square, set the background-color: none;, that way you can peek through the cube into a funny photo! I used placecage to incorporate some funny pics of Nicholas Cage when you hover over the cube. Good times.

And that’s it! Hope this was helpful/useful, if you have questions, feel free to comment below!

Image source: codepen created by me, GIF created by me

HackerYou Recap: Week 1

  • We went over the basics of HTML and CSS
  • We had a great lesson on personal branding from Heather Payne
  • Our first salad club!! (thanks to fellow student Matt Fairley for this stunning work of art)
  • There was a very informative roundtable with instructors Wes Bos, Darcy Clarke and Drew Minns on the web development industry
  • Our first project was due — more on that soon!
  • I presented in the HackerYou Show and Tell and talked about Twitter Best Practices, inspiring some killer meta tweeting:

drewTwitter

secondTweet

Image source: the Lab @ lunch hour! 

« Older Entries