Photoshop Masking

Every good Photoshop document has layers, and the best ones have masks, which are displayed through alpha channels. When it comes to masks, there’s a saying that “white conceals and black reveals,” which means that when editing a mask, the white is the part that is editable while the black is the part that remains untouched. This allows photos to be layered on top of each other in an endless variation of ways.

nadia

Nadia scores gold

In the first Photoshop image, a photograph of Nadia Comăneci, the most influential gymnast of all time is inserted over a masked image of her gold medal (well, one of her gold medals). This was accomplished by selecting the medal with the quick selection tool, making it a mask, and then inserting it above a mask of just her body. The background was also edited out and given a blue blur for a pop of color.

peacock

Sarah’s favorite animal

In the second Photoshop image, a piece of text (my name, Sarah Munroe) is combined with an image of my favorite animal, a peacock. The name was made into a mask by making the text white on black, and then it was placed under the layer of the peacock image so that the peacock would shine through the name.

tony

Best Leading Actress in a Musical

Finally, in the last image, the image of my face is inserted above an image of Scarlett Johansson on the red carpet holding her new Tony Award. A mask was used to make the Tony award appear over my hair, because otherwise the hair would block it since the image of my face is layered above the image of Scarlett’s body. The hue and saturation were also edited to make the skin tones match a little better, and hair from the left side of my face was copied to the right side so that I’d appear to have a fuller head of hair. The resulting image isn’t completely believable, but the concept was accomplished.

Photoshop, like any skill, takes lots of practice. Understanding the basic concepts such as layers, masks, and channels, as well as the general tools and how they work is the first step to become an excellent graphic designer.

Advertisements

Smart TVs… Smart, or Not?

Smart TV interface… look at all of those apps!

“Smart TV” is becoming a more and more popular phrase among American consumers since their inception in the early 2010’s. There are pros and cons of these new Internet-connected TVs, but are they worthwhile in the end? This Smart TV white paper will help you decide.

LG: one of the best Smart TV companies

Making a Name for Myself (Domain Hosting)

Creating a personal website is something everyone should do by the time they graduate from college. While it can be a daunting experience since there are so many ways to do it, it’s the most rewarding feeling to have the completed site, and having this will also show off your skills to future employers (especially if you coded the website by hand). The finishing touch of every personal website should be a custom domain name, so that it’s readable and people have an easy time finding it.

sarahmunroe.com. Not too hard to remember, huh?

sarahmunroe.com. Not too hard to remember, huh?

Arvixe is one of the best domain hosting sites of 2015 according to PC Magazine, and many people choose it because it’s inexpensive and easy to use. It has multiple site builders, including WordPress.org, and allows the user to create multiple email addresses (such as info@sarahmunroe.com and petsitting@sarahmunroe.com). A downside to the site is that the customer service is not the best, although they claim to be available 24/7. Also, their control panel is difficult to navigate and pretty dated looking. Still, Arvixe beats out the other competition like HostGator and certainly GoDaddy, for the reasons listed on the PC Magazine comparison chart.

Arvixe's control panel

Arvixe’s control panel

For those who don’t have much web design experience and have decided to use template sites like Wix or Squarespace to create their websites, be forewarned that you’ll have to pay a hefty sum to give that website a custom domain name. This is because sites like Wix charge you to link the site to a domain name, and domain hosting sites like Arvixe charge you to create a domain name– so you’re getting billed from both ends. It’s much more practical and cost-efficient to use Arvixe with one of the included site builders.

The key to using Arvixe correctly is to create an account (in this case, under a six-month plan) before you create your website if you’re planning on using one of the content manager sites. Trying to download WordPress.org before choosing this as your CMS preference on Arvixe is next to impossible. (At least, in this case, it took hours and still wasn’t successful.) As far as CMSes go, WordPress is great for users choosing to create blog sites. For those intending to build a website for other reasons, though, and for those who’ve had lots of web design experience, building a website from scratch using a text editor (like Notepad) might be easier.

One of Arvixe’s best features is that it offers unlimited FTP accounts, so you can upload as many pages as you want to the server for free. In this case, there were twelve different pages (some HTML and some CSS) under the single domain name of sarahmunroe.com. Uploading your own documents to the FTP will give you the freedom to create the site exactly as you intended!

Logo Making

The evolution of ideas

Figure 1: The evolution of SNIPSA logo ideas

Northern Irish graphic designer David Airey introduces the topic of logos in his book, Logo Design Love: A Guide to Creating Brand Identities by stating that “the average American sees 16,000 advertisements, logos, and labels in a day.” However, this statistic was borrowed from a book published in 1999, before smart phones and the exponential growth of the Internet. We can only imagine the extent to which we are exposed to logos now, and thus it’s becoming increasingly important to have one that stands out from the rest.

In order to avoid becoming what Airley calls “a faceless man,” SNIPSA needs a logo in order to have an identity. The best logos are the ones that are simple, relevant, traditional, distinct, memorable, small, and focused on one thing. Lots of thought and effort have been put into making your logo so that it fits these criteria, and the finished product is the result of hours of both physically drawing in a notebook and then transferring these ideas on the computer. The new logo is a dachshund made up of the SNIPSA name in uppercase sans-script writing, so that the s’s in SNIPSA are the dog’s legs and he has a head and tail on either end, portrayed with negative space. The logo is available in both brown and black, so that SNIPSA can use it for any type of advertisement.

The final products.

Figure 2: The final products.

This logo evolved considerably from the original ideas. It was always the plan to feature a dog, because obviously SNIPSA is a pet rescue organization, and it was predetermined that the logo would be the SNIPSA name somehow made up of a dog-related image. The most obvious idea was to draw something out of the letter i, because it was the simplest letter and was centered enough in the name that an image would look attractive and symmetrical there. That’s how the logo in the bottom right corner of figure 1 came about. While the hand-drawn dog is cute, he’s a bit too cute; he steals the attention from the word SNIPSA and separates the SN from the PSA. Furthermore, it’s not completely clear that the dog is an i, especially since the SN and PSA are capitalized while the i is lowercase. This could be problematic for someone who’s never heard of SNIPSA before and doesn’t know what the acronym stands for.

The second idea was to feature an image in the “a” at the end of SNIPSA. This time, there was a person included into the image as well, because since SNIPSA is a rescue organization, it could be beneficial to show that SNIPSA unites people with dogs. This logo featured a silhouetted dog jumping up on a person to give him or her (the gender is ambiguous) a kiss. This idea was okay, but it didn’t have the same distinction– the unique quality or style that accurately portrays SNIPSA’s business perspective– that the final product does.

The final product is simple, small, clever, cute, and displays SNIPSA’s name legibly while maintaining distinctiveness through the image of the dog. It definitely follows the rule of thumb that one should be able to draw the logo within 30 seconds, and as a result it’ll be easy to commit to memory. It’s relevant because it illustrates the joyful, adorable, heartwarming effect that adopting a rescue dog can have. And while logos don’t need to say what the company does, our logo has the added benefit of offering a little snapshot of SNIPSA’s purpose.

HTML5: Geolocation

One of the exciting (and scary) new features of HTML5 is the ability to detect the user’s exact geographic location. In order to practice this feature, I’ve designed a website for the British Secret Service, inspired by the James Bond series. The website features the longitude and latitude of the user, his or her distance from the “headquarters” (London, England), and a detailed map of where he or she is. And when I say detailed… I mean detailed. The map can zoom in all the way to show individual houses, and even slightly which part of the house the user is in. Apparently street view is possible, too, but I’m still working on this feature.

JavaScript showing how the latitude and longitude feature works

Finally getting the JavaScript to work

Having had JavaScript experience before, this task wasn’t too challenging. It’s not recommended for those who haven’t had JavaScript, though, because the language could be very confusing for beginners. Perhaps the hardest part was getting the map to show up. At first, no matter how many times I loaded my page it wouldn’t appear. Also, Chrome was having issues allowing the location feature when I tried opening the HTML document in my browser. Even when I edited Chrome’s settings to allow this site to use my location, it wouldn’t work. It was only once I uploaded the file to the web server that it magically worked.

geolocation3

The link to the Google API (in line 6) is the key to the amazing map feature.

I found it interesting that there are so many different ways to determine geolocation. I used to think that just the GPS would determine a user’s location, so when Freeman & Robson’s article, “Making Your HTML Location Aware” taught me that location can be determined from an IP address, GPS, cell phone, or WiFi, I was a little blown away. I never knew that my old-school flip phones from middle school could tell someone else where I was. So creepy!

Learning about geolocation has been an eye-opening and rather unsettling experience, but it’s also very satisfying to pretend to be a Secret Service agent and point out other user’s locations.

The finished result!

The finished result!

Becoming a Wireframe Wizard

wireframe-badge

iPlotz

Fleshing out a set of wireframes is one of the first steps to creating a beautiful website. Wireframes allow web developers to create the basic skeleton of their sites and get them approved by their clients before moving on to the more laborious and expensive graphic design of the sites (usually in Photoshop). According to Charlotte’s OXP article, “The Importance Of Wireframes In Web Design And 9 Tools To Create Wireframes,” there are many websites one can use to make wireframes, and one of the best is Balsamiq. Unfortunately, Balsamiq charges a subscription fee, and one can only use it for a limited time through a free trial. When this free trial expires, the next best option is iPlotz, where web developers can design “clickable, navigable wireframes to create the experience of a real website or software application.” iPlotz is also geared toward paying users, charging after five wireframes are made, but otherwise it’s a nice site to use because it’s very user-friendly, and feels almost like drawing wireframes by hand. This attached strategic document, Wireframe Wizard, discusses how wireframes can be used to design websites for non-profit organizations like SNIPSA.

Inquiry of jQuery

jQuery jQuery2

At first, one might seem skeptical to try jQuery. After all, one could produce a functional, attractive, and interactive website using HTML, CSS, and JavaScript alone. So why learn this new framework, you ask? Well, jQuery, whose motto is “write less, do more” has its own benefits. First of all, this special collection of JavaScript functions that one can access using the jQuery commands is much easier and less tedious than JavaScript itself. In fact, many new web designers begin learning jQuery before JavaScript. The code is not so complex, and focuses more on event handling than client-side scripting. It’s great for special effects (for example, blowing up, spinning, or fading away objects at various speeds when clicked, hovered over, or as soon as the page loads). There are fewer characters in the programming, mainly because there’s not as much user information that the program needs to store or link to.

CodeAcademy offers a helpful tutorial on jQuery which takes approximately four hours (although the site estimates that it takes three). The last module, jQuery Effects is one of the easiest ones, and users might actually be better off trying this one directly after the Introduction to jQuery module. There’s no one particular place where users are guaranteed to get stuck, but it’s important to note that the modules are case-sensitive and very particular when it comes to characters. A semi-colon or a bracket could be the difference between passing a level or getting an error message. Also, if a user gets really confused and the hints don’t help, the Q&A forums are always a valuable resource.

There are some similarities between HTML, CSS, JavaScript and jQuery. For example, in each of them, it’s important to separate the codes and not mix them up; just as there should be no CSS in the HTML documents, there should be no HTML in the JavaScript and jQuery documents and vice-versa. This is advised against by web developer Alex Holt in his 2008 Smashing Magazine article, “jQuery and JavaScript Coding: Examples and Best Practices,” which states that the practice of including JavaScript events as inline attributes “should be completely wiped from your mind.”

Organization of the documents is also similar- they are separated into divs, ids, classes, and variables, so that each element is manipulable individually and within a group. JavaScript and jQuery both perform functions on elements– JavaScript on locally stored data, jQuery on objects. Ultimately, however, jQuery and JavaScript serve slightly different real-world purposes. JavaScript is great for applications and registration forms, because it stores user data (and even invasive data such as the user’s browser, type of computer, location, language and more). Some advanced programmers might take advantage of JavaScript’s invasive power in order to hack. JavaScript would also be good for Buzzfeed-like quizzes, because it outputs results based on user’s stored answers. jQuery might be better for simple, Pac-Man-like games because of its special effects and ability to animate and move objects around. The combination of the two could produce a very interesting game.

According to Holt, there’s been a lot of debate about whether Javascript adheres to best practices regarding accessibility and standards compliance. Since the emergence of jQuery, the focus of web developers has switched from worrying about accessibility issues to creating beautiful websites. While JavaScript is not always the best option, Holt says that the “rule of thumb here is: use DOM scripting to enhance functionality, not create it.” jQuery certainly serves this purpose well!

Adobe Premiere

Premiere Pro interface (source: http://static.kvraudio.com/i/b/premierepro.jpg)

Adobe Premiere interface (source: http://static.kvraudio.com/i/b/premierepro.jpg)

There are many softwares one can use to make music videos, and for those computer users who don’t own Macintosh computers, Adobe Premiere is a great alternative to Garageband for video and audio editing. Adobe Premiere allows the user to insert multiple tracks of audio and video and weave them together with text and effects to make intricate music videos.

In the music video “Brave on the Internet,” there are two audio tracks: the first is a song called “Turning Back Lonely Guitar” by Macroform, downloaded from the Creative Commons site opsound.org. The second is a cover of Sara Bareilles’ song, “Brave,” which consists of the karaoke instrumentals (converted and downloaded from YouTube) and the audio of my singing voice (recorded on a separate recording device). The instrumentals and the vocals were edited together on Audacity before being inserted as a single file into Premiere.

As for the video tracks in this music video, they include screenshots (recorded using Jing software), clips of Virginia Munroe acing out various sketches, and title screens. The most challenging part about the video editing was making the screenshot videos large enough to see, because they were too small at first; it turns out that transforming the size of the video clips is as simple as double-clicking them in the program monitor and then dragging them to the desired size.

In conclusion, although making a music video with Adobe Premiere can be a time-consuming and often challenging experience, it is also incredibly fun, empowering, and rewarding. Seeing the finished video makes the hours working on it worthwhile!