Thursday, March 7, 2013

Week 7 - Frames, framework, and the iframe command

I learned a new trick with Photoshop. Actually, it's might be very basic, but I'm not terribly strong in Photoshop, so it's a fancy trick for me.

I created some nice, period-type frames for the website, and they'll be used, predictably, around select photos. It's a small way to add more visual texture to the pages without a lot of clutter.

I took digital photographs of a few frames around my house and uploaded them to my computer, which is easy enough, but I wanted to delete the contents of the frame, the center part. I want to copy/paste the frame onto another picture and drag/size the frame so it, well, frames, the picture underneath it. The only problem was, I didn't know how to delete sections of a photo.

This is where YouTube is my friend. After a quick search, I discovered the Background Eraser Tool and jotted down a few notes. Yes, the background eraser tool was sitting right there in the toolbar the whole time, but Photoshop can be a little intimidating. Here's how to do it.
  1. Select the Marquis Selection tool (the icon of a box made out of dashed lines).
  2. Click and hold, and then drag to select the area of the photo that you want to erase. The highlighted area will show with a "marching ants" border.
  3. Select the Background Eraser tool (the icon of an eraser with scissors). This may be nested within another eraser tool.
  4. Adjust the brush size with the square bracket keys on your keyboard (next to the letter P). As long as your area (to be erased) is still highlighted with the marching ants border, you can use a large brush and erase fairly quickly without erasing anything outside the border.
  5. Click on the area you want erased until complete. You should see grey/white checkerboard underneath.
It worked, and the "empty" frame can be dragged over a picture. Here's a little snapshot of the test, which shows the photo under the frame, a red layer under that, and a second frame peeking out from the side.


It's little things like this that please me.

Speaking of frames, I learned about the "iframe" html command.

I've been building the framework of the website, which currently consists of a temporary (read: unattractive) navigation bar across the top, an incomplete nav bar on the bottom, and not a whole lot in between.

One link on the lower nav bar, which I think is called the utility nav, is "Blog," and on that page, I used this iframe command:

 <iframe src="http://ucdenglishhonors.blogspot.com" frameborder='0' width="1050" height="600> </iframe>

As I wrote to Rodney a couple weeks ago, all good companies have a link to their blog on their company website, so mine should too. Now, the Blog link on any page in the website will show this blog... and now this blog shows the HTML code that shows this blog.

...how meta.


No comments:

Post a Comment