All posts by NajlahHicks

Week 6 | PS III

******NOTE: ALWAYS BRING A BACK UP OF ALL YOUR FILES IN TO CLASS ON A FLASH DRIVE. ALSO, PLEASE BRING IN HEADPHONES TO EACH CLASS SO THAT YOU CAN REVIEW VIDEOS WHILE DOING IN-CLASS ASSIGNMENTS.******* 

When Saving Images: Save as: 

  • Example: 2015_Smith_John_AccessingTools_v1
  • Tag your images in Flickr with the following tag:

     fundamentalsinteractivemediaramapo2015


A STORY OF MIXED EMOTICONS


Banner Design for the Web

Advertising is everywhere, and with Google ad words, Facebook ads, and sponsored Twitter tweets, advertising on the Web is the future. Many site generate 100% of their revenues directly from banner ads.

Examples

CSS Remix
The ads on CSS Remix are displayed along the top of the site and blend in well with the site listings.

Design Bombs
Design Bombs displays their 125px ads on the left-hand sidebar. The ads fit in with the other gallery listings on the site.

Behance Network
The  Behance Network website design has small sponsor boxes down the right-hand column that display ads next to their content.

  • Know what you want to say.
  • Create a call to action, something to make the viewer want to click on your ad for more information.
  • Design for horizontal or vertical .

Here are some useful design tips:

  1. When you design your ad, keep it simple and clear, free of clutter with a message that’s easy to read. It must jump out from the rest of the message.
  2. Use animation, but sparingly. You don’t want to irritate the viewer.
  3. The animation should not interfere with the design or message.
  4. The animation should loop no more than ten times.
  5. Keep file sizes small. It’s important that your animations load quickly. While Flash creates great animations, it can also create large files. For this reason it’s better to use compressed JPEGs or GIF files.
  6. When designing a banner, it’s important to understand the importance of branding, so make sure you use the company logo in some way.
  7. Make sure your message and call to action is on the first page in case the user decides to stop the animation.
  8. Use bright blue, green and yellow colors. Avoid red.
  9. Some words that can improve your click through ratio (CTR) are: Click here, submit and free.
  10. Make sure the banner links to the page that has the information mentioned on the banner. Don’t make them hunt for it.

DESIGN RESOURCES
Standard Web Banners
Banner Ads: Excellent Examples for Inspiration


TUTORIAL #1: Designing a simple website banner with a logo 

banner_1

  • Complete the tutorial – listed below
  • Title your image: date_yourname_PS_WebsiteBanner
  • Create a folder in your DropBox titled: Website Banners
  • Inside that folder place your PSD file AND jpg file of the tutorial.
  • Post it to Flickr and to your website.

Follow the below steps to create the above website banner :

Step 1 : Creating the banner size
Open a new file by clicking on File>New. Make the file size width of 780px and height of 120px. You can go till 140px for the height. You can make a banner flexible according to your design.

Step 2: Giving the background color
Create a new layer. Name it bgcolor. Give a background color by doing the following:

  • Change the foreground color to #E4D1B8.
  • Click on the  Paint Bucket Tool seen in the tools panel on the right.
  • Click on the canvas with your mouse. Your background color is now changed to the new color.

Step 3 : Giving the inside background color
Create a new layer. Name it insidecolor. Select  Rectangular Marquee Tool seen in the tools panel on the right. Make the rectangle size width of 760px and height of 100px inside the background. Fill it with color # C64866 using the paint bucket tool.

Step 4 : Creating the logo background
Create a new layer. Name it logobkg. Select Rectangular Marquee Tool. Make the rectangle size width of 120px and height of 100px. Put the rectangle in the left side of the banner. Fill it with black color # 000000.

Step 5 : Creating a logo using the custom shape tool
Create a new layer. Name it logo. Choose the  custom shape tool seen in the tools panel on the right. Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Ornaments. Look for the ornament which is in the banner.

Drag it in the logo space and position it so it comes in the middle of the logo background. Now you have a temporary ornament as a logo which can be replaced with your company logo if needed.

Step 6 : Creating the vertical lines in the banner
Create a new layer. Name it band. Select Rectangular Marquee Tool. Make the rectangle size width of 7px and height of 120px. Put the rectangle in the middle of the banner. Fill it with color # E8B0BD. Make four copies of the layer band.

Step 7 : To make a copy, right click on the layer and click on duplicate. A screen named Duplicate Layer will appear.

Enter name of the layer as band copy. Click on OK. Do the same with band copy2, band copy3, band copy4. Place the bands properly in the banner.

Step 8 : Creating the Logo Border
Create a new layer. Name it border. Select Rectangular Marquee Tool. Make the rectangle size width of 20px and height of 100px. Fill it with color # A63D56. Put the rectangle on the right of the logo background. Make a copy and place the new rectangle on the left of the logo background.

Step 9 : Creating the dashed lines
Now select the  Horizontal Type Tool (text tool). Type” _________” using the hyphen key. Place it on the top of the banner. Make a copy, right click on the layer and click on duplicate. Place it at the bottom of the banner.

Step 10 : Adding your Company Name
With the text tool  type your company name or website name with the color # FCF3E5.


TUTORIAL #2 : How to Create an Animated Banner Ad

  • Complete the tutorial – listed above
  • Title your image: date_yourname_PS_AnimatedWebsiteBanner
  • Create a folder in your DropBox titled: Website Banners
  • Inside that folder place your PSD file AND GIF file of the tutorial.
  • Post it to Imgur and to your website.

#3 DO NOW Buttons, Bars & Tabs

Techniques for creating navigation elements.

Watch video and complete button tutorial. View it here.


#4 DO NOW Ribbons and Banners

Watch video and complete tutorial. Ribbons and Banners

#5 DO NOW Tiled Backgrounds and Seamless Textures

Tiled Backgrounds and Seamless Textures

Watch video and complete tutorial.


#6 DO NOW Shadows

Shadows

Watch video and complete icon tutorial.


Week 6 | Homework

FINISH THE IN-CLASS TUTORIALS

DELICIOUS

On your del.icio.us account tag three Web Sites that focus on Photoshop CS 6:

  • Designing Banner Ads in Photoshop
  • Animated Banner Ads
  • Animating Timeline

and write a note in the Delicious comments section about why you think each one would be a good resource for this class.

PS PROJECT I

Photoshop Major Project I:
Web Banners

Photoshop Major Project is due at the BEGINNING OF CLASS on week 9 on March 16th..

 

Client:

YOU CAN CHOOSE TO USE The American Red Cross OR CHOOSE ANY OTHER NONPROFIT OF YOUR CHOICE.

CLIENT BRIEF:

Create 6 website banners to support the Internet marketing efforts of the American Red Cross (ARC) which highlight Hurricane Sandy. ARC has a recognized brand with specific font, color and sizes. Access their various logos and design specifics here.

You have free reign to design the composition as you would like. Focus on online donation,  a second idea here,  text treatments that promote recovery efforts, blood donations, co-brand one of your banners with MSU, or any other American Red Cross banner ad that specifically focuses on New Jersey and Hurricane Sandy.

American Red Cross Brand Guide

Review their brand guide carefully to give the web banner the correct voice, imagery and look and feel.

The above image links are meant as a reference and NOT for you to directly copy. You can get more inspiration here.  For this project, you will need SIX completed composition images of your designs (6 different designs) that includes the ARC’s logo and follows their design brand which will be used in a series of web banners. You will also need to create a Word document that explains your concept rationale. The Word document may also have some sort of image/images integrated into it. 

  1. Develop a concept for this project.
  2. Submit JPG images sand .PSD files for each of the SIX web banners, as well as your Word doc. Your Word doc should be at least 250 words (roughly one page) in length. Include your concept statement with your rationale for design, the process you went you through to achieve your result, and a breakdown and explanation of the elements of your design.
  3. Use Photoshop CS6 to create a series of SIX unique concept-based web banners. You can use logo images found on the Red Cross brand identity web page. Be consistent with your  designs. Make them look like they were designed specifically to focus on New Jersey and Hurricane Sandy. You are communicating one message, the Red Cross is helping victims of Hurricane Sandy and needs YOU to get involved by either supporting them, donating blood or volunteering.
  4. NOTE: At least one of the six designs must include an image. 

DELIVERABLES:

Save the file as LastName_FirstName_ARCBannersv1 (change to v2 and v3).jpg .

Finished .JPG of your web banners should include the following:

  • Website banners in six sizes. See standard web banner sizes here. Create one of each size: Leaderboard, Square, Skyscraper, Rectangle, Button and Full Banner
  • A logo and phone number and/or url on all banners

A Word document (250 words) that includes the following:

  • Your concept
  • Your rationale
  • Your overall pitch to the American Red Cross
  • If you had to do it all over again, what would you do differently
*****NOTE: Create your Photoshop document to be 300 dpi and 10″ wide. Then resize it down to web rez, 72 dpi.  SAVE THE FULL REZ FILES!******

DOWNLOAD ALL THE RED CROSS wordmark logos here.

DOWNLOAD ALL THE RED CROSS classic logos here.

DOWNLOAD ALL THE RED CROSS button 1 logos here.

DOWNLOAD ALL THE RED CROSS button 2 logos here.

DOWNLOAD ALL THE RED CROSS button 3 logos here.


 

Week 5 | PS II

******NOTE: ALWAYS BRING A BACK UP OF ALL YOUR FILES IN TO CLASS ON A FLASH DRIVE. ALSO, PLEASE BRING IN HEADPHONES TO EACH CLASS SO THAT YOU CAN REVIEW VIDEOS WHILE DOING IN-CLASS ASSIGNMENTS.******* 

When Saving Images: Save as: 

  • Example: 2015_Smith_John_AccessingTools_v1
  • Tag your images in Flickr with the following tag:

     fundamentalsinteractivemediaramapo2015


The Tools of Photoshop

An introduction to the Brush tool, and its available customization options. Whether you’re looking to paint a masterpiece or retouch a photo, the Brush tool is a crucial tool to understand!

In-class Assignment #1 –  USING THE BRUSH PRESETS  
  1. Select the Brush tool and then select the Toggle the Brush panel button in the Options bar. The Brush panel appears.
  2. Select the Brush Presets tab to bring it forward and then select Small List from the panel menu.
  3. Click on the Round Curve Low Bristle Percent preset.
  4. Using the Size slider click and drag the size of the brush to approximately 205px.
  5. With the Brush tool still selected,  hold down the Option key and sample a color of the woman’s skin color. Choose a darker shade if possible.
  6. In the Options bar, click on the Mode drop-down menu and select Multiply.
  7. Use large wide brush strokes to paint over the woman playing the guitar.

***Save the PSD and upload the jpg to your blog and Flickr. save it as LastName_FirstName_Brush.


In-class Assignment #2 – USING THE AIRBRUSH FEATURE  
Using the airbrush option allows your paint to spread much like the effect you would have using a true airbrush.
  1. Select Round Fan Stiff Tin Bristles from the Brush Preset panel. Change the value to 200px.
  2. Press D to return to the Photoshop default colors of Black and White.
  3. If the Mode drop-down menu in the Options bar is not set to Normal, set that to Normal now.
  4. Click and release with your cursor anywhere on the image to stamp a brush stroke onto the image. Do this a few more times.
  5. Now, Select the Enable airbrush-style build-up effects in the Options bar.
  6. Use the same brush preset, click and hold on your image to notice that the paint spreads, as you hold.
  7. When you are finished experimenting, return the Flow control back to 100%.

***Save the PSD and upload the jpg to your blog and Flickr. ave it as LastName-First_name_Airbrush.


In-class Assignment #3 – Creating a Border Using the Bristle Brushes 
Now we’re going to use a bristle brush to create an artistic border around the edge of the image.
Select the Round Blunt Medium Stiff bristle brush from the Brush Presets panel.
Choose any color that you want to use for the border you’re about to create.
Click in the upper-left corner of the image. Hold down the Shift key and click in the lower-left corner. By Shift+clicking you have instructed Photoshop that you want a stroke to connect from the initial click to the next.
Shift+click in the lower-right corner, and then continue this process until you return to you original stroke origin in the upper-left corner.
***Save the PSD and upload the jpg to your blog and Flickr. Save it as LastName-First_name_Bristle_Brushes.
Here’s the BEFORE photo:
guitar
Here’s the AFTER picture:
ps0602_done

In-class Assignment #4 – Applying Color to an Image
You can color anything in Photoshop by using different opacity levels and blending modes. Let’s take a grayscale image and tint it with color.
  1. Double-click on the Zoom tool to change the view to 100%.
  2. Choose Image > Mode > RGB Color. In order to color a grayscale image, it needs to be in a color mode.
  3. Open Window > Swatches
  4. Select the Brush tool and Ctrl+click on the canvas to open the contextual Brush Preset picker. Select the Soft Rounded brush (this should be the first brush). Slide the Size slider to 25 and the Hardness slider to 5. Press Return key.
  5. Using the Opacity slider in the Options bar, change the opacity of the brush to 85%.
  6. Position you cursor over a brown color in the Swatches panel.
  7. Using the Brush tool, paint the boy’s hair.
  8. Press Option Z to delete the painting.

 In-class Assignment #5 – Changing Blending Modes

You can use Opacity to alter the appearance of a brush stroker but you can also use blending modes. The blending mod controls how pixels in the image are affected by the painting.
  1. In the Options bar, change the opacity to 50%.
  2. Select Color from the Mode drop-down list.
  3. Using the Brush tool, paint over the boy’s hair.
  4. Finish painting the hair brown and save the image.
***Save the PSD and upload the jpg to your blog and Flickr. Save it as LastName-First_name_Painting.

In-class Assignment #6 – The Eyedropper Tool 
The Eyedropper tool is used for sampling color from an image. For this in-class assignment, we’re going to use the Eyedropper tool to sample a color from another image to colorize te boy’s face.
  1. Make sure the original black and white photo of the boy is open.
  2. Select Window > Arrange > 2-up Vertical to see both images.
  3. Click on the title bar of the color photo to bring that image forward.
  4. Choose the Eyedropper tool and position it over the boy’s face in the color image. Click once on his left cheek. The color is selected as the foreground color in the Tools panel.
  5. Select the Brush tool, then using the Options bar at the top, make sure that Color is selected from the Mode drop-down menu and that the Opacity slider is set at 15%.
  6. Position your cursor over the image to see the brush radius size. Press the ] until the brush is 150px wide.
  7. Click on the title bar of the black/white image and with the Brush tool selected, paint the boy’s face.
  8. Remember, your Opacity is set at 15% so you’ll build up the skin tone color by painting over areas again.
  9. With the Brush selected, press the Option key and sample the blue color from the striped shirt in the color image.
  10. Press the [ (left bracket) key until the brush size is about 60px.
  11. Press the number 5. By pressing 5 you can indicate that you want 50% opacity.
  12. Position the paint brush over one of the boy’s eyes in the black/white image and click to paint it blue. Repeat with the other eye.

***Save the PSD and upload the jpg to your blog and Flickr. Save it as LastName-First_name_PaintingFullBoy.


Open image ps0605 here. This is what the finished image will look like. Download this background image.


In-class Assignment #7 – Clone Stamp Tool(Looks like a rubber stamp)

  1. Select the Zoom tool and click and drag a marquee around the top half of the image.
  2. Select the Clone Stamp tool.
  3. Position your cursor over the nose of the girl and hold down the Option key. When you see the crosshair, click with your mouse. You’ve just defined the source image area for the Clone Stamp tool.
  4. Position the cursor to the right side of the girls face, then click and drag to start painting with the Clone Stamp tool.
  5. Press the ] (right bracket) to enlarge the Clone Stamp brush.
  6. Change the Opacity to 50% to clone at a 50% opacity or go back to 100% if you want full opacity.
  7. Save your file and name it as follows: 2014.10.27.Smith_John_Clone
  8. Upload to your blog and Flickr and save your .psd file.

Here are a few tools that will help heal your photos, from cloning, to healing, to patching.


Repairing Fold Lines
Using the History command to reopen the image of the girl in it’s original state.

In-class Assignment #8 – Repairing Fold Lines

  1. Select the Zoom tool and check the Resize Windows To Fit check box in the Options bar.
  2. Click three times in the upper-right corner of the image to reveal the fold marks that you will repair with the Clone Stamp tool.
  3. Select the Clone Stamp tool and Ctrl+click on the image area to open the Brush Preset picker. Click on the Soft Round brush and change the Size to 13px. Press the Return key.
  4. Position your cursor to the left of the fold mark, and hold down the Option key and click to define the area as the source.
  5. Position the Clone Stamp tool over the middle of the fold line itself, and click and release.
  6. Press Shift+[ (left bracket) several times to make your brush softer.
  7. Continue painting over the fold lines in the upper-left corner.
  8. Save your file and name it as follows: 2014.10.27.Smith_John_FoldLines
  9. Upload to your blog and Flickr and save your .psd file.

The Spot Healing Brush (Looks like a band-aid)
The Spot Healing Brush tool paints with sampled pixels from an image and matches the texture, lighting, transparency, and shading of the pixels that are sampled to the pixels being retouched, or healed. UNLIKE the Clone Stamp tool, the Spot Healing Brush automatically samples from around the retouched area.

In-class Assignment #9 – Spot Healing Brush

  1. Using the History panel, go back to the original image and select the Zoom tool. Click and drag the lower-right section of the image to zoom into the lower-right corner.
  2. Select the Spot Healing Brush tool and click and release repeatedly over the fold marks.
  3. Using the Spot Healing Brush, repair the fold lines.
  4. Save your file and name it as follows:  2013.10.28.Smith_John_SpotHealingBrush
  5. Upload to your blog and Flickr and save your .psd file.

The Healing Brush (Looks like a band-aid with dotted lines)
The Healing Brush tool also lets you correct imperfections. Like the Clone Stamp tool, you use the Healing Brush tool to paint with pixels you sample from the image, but the Healing Brush tool also matches the texture, lighting, transparency, and shading of the sampled pixels. Now we’re going to remove some defects from the girls dress.

In-class Assignment #10– Healing Brush

  1. Go back to the original version of the image. Choose View > Fit on Screen.
  2. Select the Zoom tool, then click and drag over the bottom area of the girls dress.
  3. Click and hold on the Spot Healing Brush to select the hidden Healing Brush tool.
  4. Position your cursor over an area near to, but outside, the fold line in the skirt, as you are going to define this area as your source. Hold down the Option key and click to define the source.
  5. Paint ove the fold line that is closest to the source area you defined.
  6. Repeat this process. Option+click in appropriate source areas near the fold across the dress, then paint over the fold lines, using the Healing Brush tool.
  7. Save your file and name it as follows: 2014.10.27.Smith_John_HealingBrush
  8. Upload to your blog and Flickr and save your .psd file.

The FINAL images encompasses ALL the tools used above. Save it as 2014.10.27.Smith_John_RetouchingFinal


Homework | Week 5
  • Complete all assignments listed in this class post.
  • Delicious:

Tag three sites that focus on Photoshop which refer to any of the techniques we learned in class today. Write a comment in Delicious about why you think each one would be a good resource for this class.

  • If you did NOT finish all the in-class assignments, please finish it for homework and upload to both Flickr and your site. SAVE YOUR PSD’S.

Week 4 | PS

******NOTE: ALWAYS BRING A BACK UP OF ALL YOUR FILES IN TO CLASS ON A FLASH DRIVE. ALSO, PLEASE BRING IN HEADPHONES TO EACH CLASS SO THAT YOU CAN REVIEW VIDEOS WHILE DOING IN-CLASS ASSIGNMENTS.******* 

PHOTOSHOP

Best Practices for File NamingAccurate file-naming – Special characters – Underscore – Date

YYYY_MM_DD _FileName_Version


Adobe Illustrator vs Adobe Photoshop

They share much of the same functionality BUT Adobe Illustrator is used for creating vector graphics and vector text, while Photoshop is used to create raster graphics (or bitmaps). Vector graphics are  made of lines and curves that contain mathematical objects called vectors (Illustrator). Raster graphics (or bitmaps) contain tiny dots of color (also called pixels or bits)(Photoshop). In Photoshop the image is the combination of many of these dots/pixels with the final result being the appearance of a solid image. You to edit images by changing the pattern of the pixels by lightening or darkening them, and by rearranging their pattern.

Summary: Photoshop is the primary tool for editing photos and Adobe Illustrator is the preferred tool for creating vector graphics. Note:  Bitmap graphics (photos) are much larger in file size than vector graphics because information for every single bit must be saved to the file. Every time you change the file and resave it you lose quality. Change the size of a raster graphic and your quality will be changed. Vector graphics can be scaled to any size without losing quality.

Adobe Illustrator will allow you to convert a vector image to a raster image. You can also import raster images, but the images themselves cannot be edited in Illustrator.

See the example below of a vector and a bitmap below.


Intro to Photoshop

Adobe Photoshop is the industry standard tool for working with digital images. Whether the image comes from a digital camera, scans, stock imagery, Web-ready artwork, or even vector graphics, all of them can be manipulated in Photoshop. Used for both enhancing and manipulating photographs as well as creating original artwork, Photoshop is used by photographers, designers, videographer and 3d artists.


Adobe Photoshop Overview

Adobe Photoshop CAN:

  • Rotate an image
  • The Crop  Tool: Crop or resize images
  • Modifying Color
  • Crop an image
  • Align an image
  • Correcting Exposures
  • Adjust tonal properties such as lightening a dark image
  • Restoring and Retouching Images
  • Combining multiple images into composites
  • Simulating a variety of lens effects
  • Color correction of images
  • Dust and scratch removal
  • Opening or saving in a variety of file formats
Adobe Photoshop CANNOT:
  • Make a blurry photograph sharper
  • Increase the size of a low resolution image b to a large one
  • Change a raster based image into a vector based image
  • Photoshop integrates with InDesign for print production, After Effects for video compositing and Illustrator for print design.

The Photoshop CS6 Interface

This video covers the basics of the Photoshop interface, from changing the interface’s color, finding the Tools bar, the Options bar and exploring Photoshop’s panels.


Background Save and Auto Recover


PSD vs JPG vs GIF vs PNG

PSD preserves all the layers in your file. You should ALWAYS save a copy of your image as a PSD. Once you’ve done that, then consider which file format below best fits your needs.

Image File Formats: There are three primary image file formats used for graphics viewed on the web. Each of these file types were designed for the purpose of compressing memory usage. Each file type does this a different way.

Jpeg
Jpegs work well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. JPEG is “lossy,” meaning that the decompressed image isn’t quite the same as the one you started with. (There are lossless image compression algorithms, but JPEG achieves much greater compression than is possible with lossless methods.) JPEG is designed to exploit known limitations of the human eye, notably the fact that small color changes are perceived less accurately than small changes in brightness.

Gif
Graphics Interchange Format. A format used for displaying bitmap images on World Wide Web pages, usually called a “gif” because .gif is the filename extension. These files use “lossless” compression and can have up to 256 colors.

Png-8 and Png-24
PNG is a compression scheme that has two main benefits: it is a lossless compression image format and it holds alpha channel information. Originally, the Portable Network Graphics (PNG) format was designed as a royalty-free format, which would replace GIF and JPEG. Png-24 allows for smooth blending between alpha and opaque.

Image Size
When speaking about image size on the web, there are three possible interpretations of this that you must take into account.

File Size refers to the amount of disk space an image occupies (in KB or MB). Image Dimensions refers to the physical size of the image, expressed in height and width.

Resolution refers the pixel density of an image. This is expressed in pixels per inch (ppi). Images are displayed on the web at 72 dpi. Printed images are generally of higher resolution.

Compression

Compression shrinks down the file size of the photo so that it loads on the user’s computer quickly, but maintains a certain level of quality.

Saving

Click the Save button to save your image. ALWAYS save your original photo for archiving, or if you intend to reopen it later PRIOR to using the save for web.


Save and Export

There are two ways of saving a photo in Photoshop. The first is to use the Save As… dialogue, the other is called Save for Web & Devices… which is used to save your photos in preparation for publication to the Web.

1) Save as: I recommend saving the file type as a Photoshop or .PSD file, which will also save extra Photoshop-specific information about your photo and allows you to go back to the file at a later date and manipulate all layers. You will not lose any quality when you re-save it multiple times. Saving as a .jpg, .png or .gif compresses the photo allowing you to use it on the web.

2) Save for Web: Use this when you are ready to export your photo for publication to the Web.  The Save for Web allows you to see how your photo will appear once it’s published to a Web site. Optimized will show you how your photo will appear once it’s published on a Web site, and 2-up/4-up will show you comparisons so you can see how the different levels of compression will affect your photo when saving. These are automated ways to save your image for the Web.


Photoshop | Creating New Documents


LAYERS

Photoshop Essentials | What Is a Layer?
Exploring layers: what they are, how they’re created and the different layer options that are available.


The Brush Tool

An introduction to the Brush tool, and its available customization options. Whether you’re looking to paint a masterpiece or retouch a photo, the Brush tool is a crucial tool to understand!


TUTORIALS

  • ASSIGNMENT | ACCESSING TOOLS #1

Download the attached zip file which includes PSD files for this accessing tools assignment here.

  1. Select the Brush tool. By default, your brush tool is loaded with black paint.
  2. Click once on the foreground color to open the pick so you can select a different color in you foreground.Select a blue color to use to brighten up the sky.
  3. Click on the Brush Preset Picker to see your option for size and hardness.
  4. Click and drag the size slider, to the right until you reach 100px. Make sure the Hardness slider is at 0%. You’ve just changed the brush to a large soft brush that will blend well with the edges of the strokes.
  5. Click and drag anywhere on the image one time to create a brush stroke across the image. Click Command Z to undo.
  6. Click and hold the Painting Mode drop-down menu and select Color from the bottom of the list.
  7. Click the arrow to the right of the Opacity option to see the slider Change Opacity to 20%.
  8. Click and drag on the upper right corner of the image. You’ll be brightening the sky.
  9. Note: You can build up color by releasing the paint brush and painting over the same area.
  • Save image 1 with new filename.
  • Example: 2015_Smith_John_AccessingTools_v1

  • ASSIGNMENT | BRUSH TOOLS #2
  1. With the car photo still open:
  2. Select the Brush tool.
  3. Click the Swatches tab.
  4. Click the color calle Pure Red Orange.
  5. With the Brush tool selected, start painting in the upper-left part of the image, adding orange to the sky.
  6. Paint the sky until the orange blends in.
  • Save image II with new filename.
  • Example: 2015_Smith_John_BrushTools_v1

  • ASSIGNMENT  | HIDDEN TOOLS #3

  1. Click and hold on the Brush tool to see the hidden Pencil, Color Replacement and Mixer brush tools.
  2. Select the Mixer Brush Tool and release. The Color Mixer tool is now the visible tool. The Mixer Brush simulates realistic painting techniques.
  3. Change the foreground color at the bottom of the Tools panel. The Color Picker appears.
  4. Position your cursor on the Color Slider and click and drag until shades of orange appear in the Color Panel.
  5. Click once in the Color Pane to select and orange color or type in the RGB: R:235 G:169 B:24.
  6. Click on the Brush Preset picker button in the Options bar and set the following attributes for the Mixer Brush tool.
  • Size: 175 px
  • Hardness: 20%
  1. Click once on the Useful mixer brush combinations drop-down menu and select the Moist, Light Mix preset.
  2. Press Command+0. (This is the keyboard shortcut for Fit on Screen.
  3. With the Mixer Brush tool still selected, start painting in the upper-left areas of the image to create a shade of orange blending in from the corner.
  4. Repeat this for all four corners in the image.
  • Save image III with new filename.
  • Example: 2015_2.16.Smith_John_HiddenTools_v1

  • ASSIGNMENT | COMPOSITE #4

Download the attached zip file which includes PSD files for this composite assignment here.

  1. Watch the video below that describes how to create a composite photo and recreate the barn/chicken/cow image.
  2. Using the farm image, try adjusting the stacking order of the layers in the composite image
  3. Scale and move the layers to place the cow and rooster in different positions.
  4. Add your own images to the composition, adjusting their position and scaling.
  5. Save the images as JPEG files using the different compression options and presets to determine the impact these have on quality and file size.
You should end up with a total of FIVE different images. Upload them to your Flickr site and label them:
YYYY_MM_DD _YourName_Farm_01
YYYY_MM_DD _YourName_Farm_02
YYYY_MM_DD _YourName_Farm_03
YYYY_MM_DD _YourName_Farm_04
YYYY_MM_DD _YourName_Farm_05

Tag your images in Flickr with the following tag:

 interactivemediaramapo AS WELL AS add additional tags. 


  • ASSIGNMENT  |  PHOTO COMPOSITION #5

Experimenting with New Vector Capabilities

  1. Open file: ps0101.psd – image of a skier
  2. Save it as: ps0101_work and choose Photoshop format
  3. Select the Rectangle tool – click and drag to create a large rectangle that covers the right half of the image. (You’ll notice a Rectangle 1 vector layer has been added in the Layers panel)
  4. With the Rectangle 1 vector layer active, click Fill in the Options bar, and then click the Pattern button.
  5. Select Grey Granite as the pattern.
  6. Click and hold the Rectangle tool and select the hidden Custom Shape tool.
  7. Click the arrow in the Shape drop-down menu to see default shapes.
  8. Click the gear icon and select Nature category.
  9. Choose Append – Select the Snowflake shape – Click on the Path operations – select Subtract Front Shape.
  10. Position mouse in the middle of the left side of the Rectangle shape and press and hold the Option key. Click and create to create a large snowflake.
  11. Click the Path Selection tool to reposition.
Continue with the following:
  1. Adding a mask to a Vector layer
  2. Using the new brush tips
Adding strokes to vector images
Cloning your new snowflake
Adding text layers from another document

  •  ASSIGNMENT | COMPOSITE #6

Variations on the ski project.

Use the PSD file from composite assignment v1 above and change the pattern from grey granite to the selection of your choice. Change the nature shape in the first version to a shape of your choice. Change brush tip, gradient, font, color, size of the text and anything else you want to make it look different. When you finish, save the file as follows: 2015.2.Smith_John_Composite_v2


  •  ASSIGNMENT | MAKING THE BEST SELECTIONS #7

Download all project zip files below. Unzip the files and place all files in one folder on your desktop.

PS04_01  PS04_02 PS05_03 PS04_04 PS04_05 PS04_06 PS04_07 PS04_08 PS04_09


When you finish, save the file as follows: 2015.2.16.Smith_John_Selections


Making the Best Selections

  •  ASSIGNMENT | Marquee Tool #8

Open image ps0501 here. Open image ps0501_done here.

Use the image above to create an overlay with text.

  1. Select the Rectangualr Marquee tool, (the square with the dashed lines). Choose View > Snap and make sure it’s checked.
  2. Position your cursor in the upper-left side of the guide in the care image, and drag a rectangular selection down toward the lower-right corner of the guide. A rectangular selection appears as ou drag, and it stays active when you release the mouse. You’ll now apply an adjustment layer to lighten just the selected area of the image. You are lightening this region so that a text overlay can be placed over that part of the image.
  3. If the Adjustments panel is not visible, choose Window > Adjustments and click on the Curves icon;the Properties panel appears. (Click on the Curves button to create a new Curves adjustment layer.)
  4. Click and drag the upper-right anchor point (shadow) straight down, keeping it flush with the right side of the curve window, until the Output text field. The rectangular selection in the image is lightened to about 20% of it’s original value.
  5. Go back to the Layers panel, click the box to the left of the text layer named poster text; the Visibility icon (the eye) appears, and the layer is now visible. The text appears over the lightened area.
  6. Save your file and name it as follows: 2015.2.16.Smith_John_Text_MarqueeTool
  7. Upload to your blog and Flickr and save your .psd file.
  •  ASSIGNMENT | Creating a Square Selection #9
  1. Click on the image background in layers.
  1. Select the Rectangle tool.
  2. Click and drag while holding the Shift key  to create a constrained square.
  3. Let go of the mouse and see the square. Notice the dotted lines. This means you can move the square around.
  4. Click on the Curves icon and change the opacity.
  5. Click on the Selection tool and position the cursor over the selection region. Now you’ll notice a scissors appears. This means that if you move the selection, it will cut out a portion of the photo. The pixels will be deleted.
  6. Press Command Z to undo.
  7. Reselect the square, then choose Image > Adjustments > Hue/Saturation. Click and drag the Hue sliders to cange the color of the selection region.
  8. Add text.
  9. Save your file and name it as follows: 2015.2.16.Smith_John_Text_MarqueeTool_Square
  10. Upload to your blog and Flickr and save your .psd file.
  •  ASSIGNMENT | Creating a selection from a center point #10 
  1. Select the Background layer in the Layers panel, then click and hold the Rectangular Marquee too and select the hidden Elliptical Marquee tool.
  1. Draw a circle selection from the center of the image.
  2. Place your cursor in the center of the tire, and hold down the Option and Shift key.
  3. Click and drag to pull a circular selection from the center origin point.
  4. Release the mouse.
  1. If you need to nudge the circle around, use the up/down, left/right arrows.
  1. Click Select > Transform Selection. You’ll see a bounding box appear around your selection Use the bounding box’s points to adjust the size and proportion. Note: To scale proportionally, hold down the Shift key when transforming. Press the Enter key to accept changes.
  1. Follow the directions from in-class exercise #1 starting at no. 3 to add the opacity and then the text.
  2. Save your file and name it as follows: 2015.2.16.Smith_John_Text_MarqueeTool_CenterPoint
  1. Upload to your blog and Flickr and save your .psd file.

 ASSIGNMENT | Changing a selection into a layer #11
By moving a selection to its own independent layer, you can have more control over the selected region while leaving the original image data intact.
  1. Make sure the Background layer is selected.
  2. Select the tire with the Ellipse tool holding down Option/Shift.
  3. Press the Command and J key to create a new layer. You’ll then see the new layer in your layers panel.
  4. Apply a filter: Choose Filter > Blur > Motion Blur. You’ll see a dialog box.
  5. Type 0 in the Angle text field and 45 in the Distance text field and press OK. You’ll see the motion blur applied.
  6. Save your file and name it as follows: 2015.2.16.Smith_John_Text_MarqueeTool_ChangingLayer
  7. Upload to your blog and Flickr and save your .psd file.

Homework | Week 4  
  • Complete all assignments listed in this class post.
  • ASSIGNMENT | PHOTOSHOP BASICS 
  1. On your blog, answer the following:
  • Describe two ways to combine one image or another.
  • What is created in the destination image when you cut and paste or drag and drop another image file into it?
  • What are the best formats (for prints) in which to save a file that contains text or another vector objects?
  1. Delicious:  Tag three sites that focus on Photoshop and any of the items we learned in class today. Write a comment in Delicious about why you think each one would be a good resource for this class.
  1. If you did NOT finish the farm assignment in class, please finish it for homework.
  • FINISH all tutorials not completed in class.

Week 3 | WP Pt II

Week 3   |   February 9th

  • Wp-Admin Panel

Steve Jobs on How to Live BEFORE You Die
ted_logo


Using WordPress: Log in the Admin Panel

To access your WordPress administration panel, you will (in most cases) add “wp-admin” at the end of your domain name in your web browser.

For example: http://www.yourdomain.com/wp-admin/

When you installed WordPress through the one-click install on Mojo, they gave you  a username and password. Use that to login to your WordPress admin panel.

If you are successful, you will see a screen similar to the one below:

wp_login



Using WordPress: Installing Plugins

(WordPress Plugin) Plugins are pieces of code created with the purpose of expanding the functionalities of a software, in this case of WordPress. There are literally thousands of WordPress plugins already created, solving a wide range of problems and needs.

WordPress: What is a Plugin?

(WordPress Plugin) Plugins are pieces of code created with the purpose of expanding the functionalities of a software, in this case of WordPress. There are literally thousands of WordPress plugins already created, solving a wide range of problems and needs.
They are third party pieces of software you are able to install and use on your WordPress website. Plugins are typically developed to add additional functionality to your website that is not included in the standard installation of WordPress. Some examples of plugins are image galleries, contact forms, and banner rotators.

 

Searching for & Installing Plugins

One of the best features of WordPress is the ability to customize your website with Plugins. Plugins are easily downloaded and installed and within minutes. You can easily add customized functionality to your website.

  • Login to your WordPress Dashboard. Once logged in, click “Add New” under “Plugins”
  • Search for a plugin using the search feature.
  • If you wish to use the plugin after reading about it, click on “Install Now”
  • After the plugin has been successfully installed, you will need to click “activate plugin” to begin using it. To change the settings of your plugin, click on the “Settings” menu option on the left  hand side to access the settings for your new plugin.

Updating a WordPress Plugin

Plugins like any other piece of software need to be updated from time to time. When a new version of the plugin is released you may need to update the plugin. Most plugins are updated to patch a security risk, or to add more features to the plugin. It is important to keep your plugins up to date for security purposes.


How do I know if a plugin needs to be updated?

Log into your WordPress Dashboard and select the plugins menu option. If you have a Plugin that needs to be updated, the plugins menu will have a number next to it.

On the Plugins page, you will see a message letting you know there is a new version available.

Click on the “update automatically” link, and it will lead you to a page to automatically install the update for that plugin.


Recommended Plugins for WordPress

Here is a list of some basic WordPress plugins to help you get started. There’s hundred more available but here are three you may want to use:

WP Super Cache – This is a caching plugin for WordPress.  One of the main issues we see with WordPress sites is that if caching is not enabled, it causes some sites to load slower and use more resources.  It is highly recommended to install Super Cache to help prevent these issues.

W3 Total Cache – This is an even more advanced caching plugin for WordPress. It’s recommended to use this caching plugin if you’re having issues with a large amount of 404 errors on your WordPress site.

Limit Login Attempts – This is a plugin that will limit the number of failed login attempts allowed, and will temporarily ban the IP address from trying anymore login attempts.

Captcha – This is a CAPTCHA plugin that operates by asking simple math questions to prove a human is filling out a form instead of a spam bot.

Google XML Sitemaps  – To help your Search Engine Optimization and increase your visibility to customers, it is recommended you use the official Google XML Sitemaps widget.  This will create a sitemap for your website which search engines look for when they crawl your site.

Akismet – This is a plugin that will help block spam from being posted in your Comments section.

These steps will help you install and select a WordPress plugin for your website.

    1. Inside the WordPress Dashboard, select the Add New link from the Plugins menu.

 

    1. You can search for a plugin based on name, category, or function.
    1. Click the Download link to the right of the plugin you’d like to download.
    1. Click the Install button for your desired plugin.
    1. Your plugin is now available. Click on the ‘Activate’ link to activate it.

 

Your WordPress blog has now incorporated the plugin you activated.

 



Design, Sustainability, Change 

A Little Inspiration.


INTRO TO WORDPRESS THEMES
What is a Theme?
A theme is simply collection of files that allow you to “skin” your WordPress site. A theme is comprised of template files, that determine the components that will go on each type of page, and a styles sheet or sheets that control fonts, colors and layout. Themes are stored in wp-content > themes.


A WordPress “theme” generally consisting of:

  • One or more CSS style sheets
  • Any necessary images that comprise the theme graphics
  • A collection of PHP/HTML “template” files
  • A thumbnail image representing the theme in the Dashboard

A typical WordPress theme contains a dozen or more files, but only a few are technically required.

These files work together as a package to define the entire look and feel – and sometimes behavior – of a WordPress site. Themes are completely decoupled from site content, so a site owner can apply a new theme with the click of a button and have all content on their site take on a whole new appearance.

This collection of files is contained in a folder that lives in the wp-content/themes directory on your web server. When an administrator visits the Appearance | Themes section of the WordPress Dashboard, all valid theme folders in that location will appear. Any valid theme can be applied to the site content by clicking the Activate link below its name.

Your WordPress install comes with two themes installed, but there are thousands of third-party themes that you can install yourself. You can browse them on the WordPress.org site or Google “free WordPress themes”.


CHOOSING THEMES
When choosing a theme, make sure that it is compatible up to your version of WordPress ( the current version is 4.1). Many new features were introduced, and you want to make sure to take advantage of them.

RESPONSIVE THEMES

A responsive WordPress theme is a theme built to adapt it’s design to tablets and smartphones, creating a great user experience. Previously, dedicated WordPress mobile themes was the best option, but in 2013, responsive WordPress themes are the hot new trend. With the rapid growth of smartphones, tablet computers and Internet enabled gadgets, we have to take mobile web design seriously and ensure that your theme is can be viewed easily on any mobile device.

Responsive web design allows your website content to be displayed correctly by adjusting the layout to accommodate screens of different orientation and sizes. From a branding perspective, responsive themes allow you to maintain one theme and provide one consistent look and feel no matter how visitors access your website. This is a huge money saver for clients as there is not longer the need for mobile versions of websites. To test responsive layouts, check out some responsive web design tools.


Checking Your Themes
A quick note on downloading and installing themes. There are thousands of FREE and PREMIUM themes out there and not everyone is as honest and straightforward as we hope they’d be. It’s good practice to check your themes prior to installing them.

Take a look at: TAC (Theme Authenticity Checker)

Scan all of your theme files for potentially malicious or unwanted code. Be aware of advertisements or dangerous JavaScript inserted into legitimate themes by third party theme download sites.

Future versions will allow to check for other theme vulnerabilities. CHECK YOUR THEMES BEFORE INSTALLING THEM!


Installing Themes
There are two ways to install a new theme, through the WP admin tools, or by downloading and uploading it into the themes directory. Which you use will depend on how you FTP into your hosting account.

INSTALLING VIA ADMIN

From the admin, go to Appearance > Themes

To install a NEW theme that is not currently available through your WordPress panel, do the following.

  1. Go into your ADMIN panel
  2. Go to APPEARANCE
  3. Go to THEMES
  4. Click on INSTALL THEMES
  5. Click on UPLOAD and upload the theme that you’ve already downloaded from the web and saved to your hard drive
  6. Click on BROWSE and UPLOAD the theme
  7. Click on INSTALL and then PREVIEW

THEME OPTIONS

Some themes have an options panel that allow you to further customize appearance and layout. What the options are will vary from theme to theme. “Paid” themes usually offer you more options and more documentation.


WORDPRESS THEMES

Finding a new theme online

While WordPress comes with hundreds of themes available to be automatically installed through the Dashboard, you may not be able to find one that meets your needs perfectly.  With thousands of themes available online, to help you get started below I’ve outlined how to find more WordPress themes online.

What types of themes are available online?
There are two main types of themes available fro you to use:  free and paid.  Look into the free themes first since there’s no point in paying for a theme if you can find a free one that you like.  Many free themes will have a line at the bottom of your theme giving credit to the person that made it, but beyond that you can fully customize them.  If you purchase a theme, some sites will sell a theme by itself while at other sites you will pay a yearly fee to have full access to their themes.

Where do I find themes online?
Many websites offer WordPress themes and a simple Google search returns millions of links to websites for WordPress themes .  To help you get started, below I’veoutlined some of the more popular theme sites.  Themes commonly used by WordPress users:

Free Themes

Paid Themes

Once you have downloaded the theme you want to use, you will need to install the theme. Most themes will contain documentation on how to manually install the theme and any plugins the theme may require you to install.


Installing a WordPress Theme from the Internet

Any theme you find online can easily be installed using your WordPress dashboard. You will need to download the theme to your local computer, usually a compressed zip file, and then proceed to upload it.

Installing a Theme Manually in WordPress
Download the theme from the internet.  Once you have downloaded the compressed file, in the WordPress dashboard, click on “Appearance” which will bring you to the “Themes” page.upload1

Click on “Install Themes“, them proceed to click “Upload

upload2

Click on the “Browse” button and find the file you saved on your computer. Once you have located the zip file, click “Open” and then “Install Now

upload4

Your new theme may take a few minutes to upload. Once the upload process is complete you will see the following screen. You can now preview how the theme will appear on your website.

upload5

Click “Preview” to preview how your website will look with the new theme.

upload6

Once you determine if you like how your website look, click “Activate” under the theme and this will enable the theme to publish to your website.

upload7

Your website it now using your new theme! You can now visit your website in the browser and make sure the theme displays properly.

Changing Your WordPress Theme

You can change your WordPress theme, you can. It’s a simple process done through your WordPress dashboard.

appearance_theme To change the theme, you will need to log into your WordPress Dashboard. Once you are logged in, select “appearance” on the left menu pane.
installtheme3 Be sure to click on the Manage Themes tab. It will automatically display.

You can change to any theme you may have installed by simply clicking on the “activate” button. Selecting a new theme will not affect your content BUT it can impact whether widgets and plugins functions. Once you have changed your theme, it’s wise to visit your website in a web browser and test it to make sure it is functioning correctly. If it is not, you may need to disable some plugins or widgets that may not be supported.

ADDITIONAL RESOURCES ON THEMES


A WORD OF ENCOURAGEMENT FROM KID PRESIDENT


What are Widgets?

Widgets provide a way to arrange your sidebar content without having to alter your actual code of your website. Widgets can be a calendar, search bar, or many other types as well.


Finding and Installing Widgets in WordPress

Widgets add functionality to the sidebar of your WordPress website. Follow the steps below to add new widgets to your website.

1. First, login to your WordPress dashboard. After you have logged in, click “Widgets” under “Appearance

This screen contains three areas of interest:

  • Available Widgets
  • Inactive Widgets
  • Primary Widget Area

How to activate Widgets

Widgets that are listed in the Primary Widget Area are widgets on your website the you are currently using. To use another widget, simply drag the widget you want to use from the Available or Inactive list to the Primary Widget Area. Your theme may contain multiple areas that use widgets. If this is the case, you can add widgets into the Secondary, First Footer, and Second Footer areas.

Changing the Order in which Widgets Appear
Widgets load in the order in which they are listed in the sections. If you wish to change the order of the widgets simply drag the widgets under “Primary Widget” to the order you wish to have them display.


How to use the WordPress Text Widget

The WordPress Text widget is the easiest way to add custom HTML code to your WordPress sidebar.

In this article, I’ll show you how to add an “About us” section to your sidebar.

  1. Log into your WordPress Dashboard
  2. Under Appearance, click “Widgets”
  3. Find the “Text” widget under the “Available Widgets” section, and drag and drop it to your “Main Sidebar” section.
    drag-and-drop-text-widget-to-main-sidebar
  4. A window will appear in which you can type in a title and text for your widget. Enter your text, and then click “Save” and then click “Close”.
    enter-text-widget-details-and-click-save
  5. Your widget is now saved and is visible on your website!
    results-of-a-wordpress-text-widget

Customizing your WordPress Sidebar
How to add images and image links to your WordPress sidebar

The sidebar is a wonderful piece of real estate on your site to place relevant content that may not fit directly on a page or post. Most content in a sidebar is text, however you can certainly add some diversity by making some of those text links into buttons or image links.

RESOURCE for HTML code W3Schools

  • LINK TO AN EXTERNAL WEBSITE
Page opens in a new window:
<a href=url” target=”_blank>link text</a>
Example: A link to Google
<a href=http://www.google.com” target=”_blank>Google</a>
  • ADD AN IMAGE

<img src=”url” alt=” some_text”>


WEEK 3 HOMEWORK | Due 2.16.15

  1. Each week you will post a link to your homework on your own WordPress website in the comments section of this blog.
  2. Go to your DASHBOARD and install a theme (you may not use the default theme) under appearances, select themes and choose a new theme. You may not choose the standard 2015 theme. Give me the name of the theme you chose.
  3. Fill out the personal info on the site in the SETTINGS on the dashboard.
  4. Add the following PAGES to your website:
  • About
  • Contact
  • Ramapo
  • Interactive Media (Make Ramapo the “parent” page)
  1. On the ABOUT page, add a photo of yourself, an artist statement and a bio. Have the image ALIGN LEFT. You should UPLOAD your headshot onto Flickr and insert it into your ABOUT page using INSERT URL.  When upload your photo to Flickr, change the title and description, create a set, upload to photostream. Click on the photo you want to use, shift click and select view original image, choose the size you want the image to be, shift click on the image ad COPY image URL.
  2. On the CONTACT page, add a contact plugin form. Try searching for Contact Form 7 in PLUGINS under POPULAR.
  3. ON the RAMAPO COLLEGE page create a list of all your RAMAPO spring2015 classes.
  4. On the INTERACTIVE MEDIA page, create a list with the following information:
  • Week 1 Homework | Due 1.31.15
  • Week 3 Homework | Due 2.16.15
  • Week 4 Homework | Due 2.23.15
  • Week 4 Homework | Due 3.2.15
  • Week 5 Homework
  • Week 6 Homework
  • Week 7 Homework
  • Week 8 Homework

Create a POST called WEEK 1 HOMEWORK | Due 1.31.15

  • On that post write links to all your homework. Copy the URL. Go to the page  you created called INTERACTIVE MEDIA. Highlight Week1 Homework, click link and paste in the blog URL.

Create a POST called WEEK 3 HOMEWORK | Due 2.16.15

  1. Create a POST on your website titled Week 2 homework
      1. Create a POST titled Week 3  Homework.  ADD the categories: Interactive Media and Week 3  Homework. In this post, list links to week 3 homework including:
    1. List the Theme you added to your site
    2. List the PLUGINS you added to your site (Add at least SIX plugins).
    3. List any widgets you added
      • List your Flickr url
    4. List your Delicious url
    5. On your del.icio.us account tag three Web Sites that focus on WordPress, WordPress themes, plugins, widgets or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. ALSO, add the words “week 3” in your comments section so that I can keep track of your comments. *Make sure you also add the tag: ramapointeractivemedia2015  AS WELL AS add additional tags.
    6. Go to your wp-admin panel and install a theme (you may not use the default theme) under appearances, select themes and choose a new theme.
    7. Fill in the about section on your WordPress dashboard.
  • On that post write links to all your homework. Copy the URL. Go to the page  you created called INTERACTIVE MEDIA. Highlight Week 3 Homework, click link and paste in the blog URL.

Week 1 | Adobe Creative Suite

Week 1   |   January 26th

  • Class Introductions
  • Review Syllabus
  • Introduction to Studio
  • Delicious
  • Flickr
  • DropBox
  • Photo Booth
  • Web Hosting
  • Create Blog
  • Student Websites
  • Installing WordPress
  • Wp-Admin Panel


Studio Rules

  • Students are required to use the desktop computers during class. No food and/or drinks are allowed in or on the computer area.
  • Using your cell phone or traversing social media during class is prohibited.
  • Attendance IS required.
  • Homework is NOT optional.

The Class Blog

This is the class blog. All lessons, homework, readings, and resources for the class will be posted through this blog. All of you will be required to register on the blog, and I will use the email address that you sign up with to communicate with you outside of the class. Please be sure to use your Ramapo email when registering. I will also place comments regarding your work on this blog. Please take note of the address now!

You will be required to log into the class blog each class. Once you’ve created your WordPress blog, leave a comment on the CLASS BLOG.


Photo Booth

Go to PhotoBooth on your Mac and take a photos of yourself. Lean in close to the camera so that the photo shows a close up of your face. Once this is completed, please create a gravatar so that your image will be posted with each of your comments on the class blog.


Your Personal Blog

You will post all homework on your personal blog UNTIL we get your websites launched. This is a blog you create specifically for this class. Go to WordPress and create your blog. For your blog address as well as your username, use your full name. Example, johnbrown.wordpress.com. It’s as easy as that! Use your first and last  name when registering your blog. If  your name is taken, add your middle initial or full middle name. Please take note of the address now!

You will be required to post all your homework on your personal website before the start of each class. When you log into the CLASS BLOG for each class, write the FULL url of your homework that you created on your PERSONAL WEBSITE, DELICIOUS AND FLICKR ACCOUNTS. Each week I will click on the url’s and review your homework.


Student Questionnaire

Fill out the student questionnaire so that I have your contact information and can get to know you a little better.


Del.icio.us

Del.icio.us is a social bookmarking service that everyone is required to sign up for an account for an maintain tags on it. Through del.icio.us you are going to “tag” pages related to our work in the class so that you can reference them later and share them with the class. It is a way to keep all your tagged pages in an orderly manner making it very easy for you to find your tagged pages. We will be using Del.icio.us to tag sites related to this class including tutorials, design inspirations, lectures and other articles.

Sign up for an account here: http://del.icio.us/


Flickr

Flickr is a photo sharing service that everyone is required to sign up for an account for and upload your weekly work too. Through Flickr you are going to “upload” images related to our work in the class so that you can reference them later and share them with the class. It is a way to keep all your work in an orderly manner making it very easy for you to find your tagged images.

Sign up for an account here: Flickr


Register for a DropBox Account

If you DO NOT already have a DropBox account, please use the link here to create on. It will help me in tracking your installs. https://db.tt/pQHZn7uR – DropBox is a place where you can save your files to the cloud and access them from any computer, anywhere. Sign up for a free DropBox account and install DropBox on your personal Computer.


 Best Practices for File Storage

What happens when you move your files to multiple locations?


Web Hosting Space

Everyone is required to have a domain name and web hosting space. You can use any hosting provider you’d like, or use the one you may already have. If you do not have a web hosting space, you can sign up at BlueHost, the company I use to host my websites. Again, you may use any web hosting space that you choose, but if you decide to use BlueHost,use this link to sign up and I can track your install in case you have any issues.  It’s $3.99 a month and they give you a free domain name. Your domain name should be your first and last name.com. Example www.johngreen.org Your desired domain name may already be taken. If that’s the case, try your first name, middle name, and last name.org ie: johnalbertgreen.org. They will ask you if you want to purchase any other services. Please decline everything.


A Vision of Students Today


What is WordPress

WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL. Features include a plugin architecture and a template system. WordPress was used by 48% of Technorati’s Top 100 Blogs Are Managed With WordPress. 22% of New U.S. Registered Domains Run on WordPress.

This 5-minute video provides a brief introduction to the WordPress content management system and demonstrates why it is the most popular web publishing platform today.


Why Choose WordPress?

  • Free
  • Open Source: Easy to find, easy to use, easy to share

Findability is the end goal for any website. If a tree falls in the forest and no one saw it fall, did it really fall?

If you want to get indexed on Google, WordPress is a great way to do it. WordPress is built to be a magnet for search engines and other online indexes to the extent that if you don’t want your WordPress site indexed, you have to take steps to prevent it from happening.

WordPress has great search and share optimization. Plugins like WordPress SEO, AddThis, and Facebook for WordPress give any site the opportunity to be seen.

WordPress is easily findable, accessible, and provides shareable information. When reading or viewing content on a WordPress site, you are able to access and interact with that content through comments and RSS feeds.

  • Mature
  • Customizable: Easy to publish, easy to configure, easy to maintain

WordPress is the pinnacle of open source. It is built, evolved, and maintained by the people that use it and is in a constant state of forward-moving change. .

WordPress has undergone several fundamental changes that have made applications even easier to use and has become more powerful and diverse.

  • Easy to Maintain: Easy to build, easy to augment, easy to evolve

With the advent of themes, building a custom WordPress site from scratch takes less time than with any other platform. WordPress is a simple interface between the site owner, the database, and the end user.

  • Large Community

The Bottom Line

WordPress offers one of the best available solutions for most websites today. It’s a great tool to use and has both the ease of use and the advanced features to suit pretty much any need. And just when you think your need isn’t met, a theme, a plugin, or an extension is there to fill the void.


WordPress.com vs WordPress.org

WordPress.org is where you can download the latest version of WordPress for installation on your own domain. It is also where you can find documentation and support, and add-ons to customize your site.

WordPress.com is where you can set up a blog under the wordpress.com domain (yourblog.wordpress.com). The basic service is free and supported by advertising, premium services like your own domain name are available for a fee.


Sample Sites

Some people think they don’t want to use a system like WordPress because they don’t want there site to look like a “template” or a “blog”. Basic WordPress sites do share similar layouts but there are thousands of free and commercial themes that you can use and, if you want to get into more advanced techniques, completely customize. Here are some examples of sites that were built with WordPress:


Steve Jobs on Failure (1994)


Setting Up Your Website

  • This tutorial will guide you through the WordPress install on Bluehost.
  • Go to Bluehost.com and click on Control Panel Login
  • In the ACCOUNT LOGIN area, enter your url and password
  • Click login

Installing WordPress with MOJO Marketplace

  1. Navigate to the MOJO Marketplace section inside cPanel.
  2. Click the One-Click Installs icon.
    One-Click Installs
  3. Choose WordPress.
    WordPress Icon
  4. Click the Start button.
    Start a brand new installation
  5. Choose the domain name to install it to.
    Select installation domain

    In the field next to the domain, you can enter a subfolder such as ‘blog’ or leave it blank if you want the site’s main page to be the blog.

  6. Read through the license and service agreements and check the boxes.
  7. Select the Install Now button.
    Install Now button 

The Dashboard

This video provides an overview of the WordPress Administration Panel which provides access to the functions and features of your WordPress-powered website.

Covered in this video:

  • Familiarizing yourself with the WordPress Dashboard.
  • How to customize the WordPress interface just for you.
  • Hide Dashboard modules you rarely use.
  • The collapsible navigation menu and functions.
  • The default modules that are available to users.
  • How to use the QuickPress module to quickly create a new Post.


Using WordPress: Log in the Admin Panel

To access your WordPress administration panel, you will (in most cases) add “wp-admin” at the end of your domain name in your web browser.

For example: http://www.yourdomain.com/wp-admin/

When you installed WordPress through the one-click install on Mojo, they gave you  a username and password. Use that to login to your WordPress admin panel.

If you are successful, you will see a screen similar to the one below:

wp_login


Homework | Week 1 Wednesday

Homework | Week 1

  1. Register as a user of this blog. Post a comment to this blog post to let me know that you are registered and include the address (url) for your  ”wordpress blog”. Each week following this you will post a link to your homework on your own WordPress blog in the comments section of this blog .
  2. Purchase web hosting space from your chosen provider. My suggestion is to go with Bluehost for $4.95 per month.  Your domain name should be your first and last name .org. Bring your login information to class on Friday. You are required to purchase a domain name and web hosting space for this class.
  3. Fill out the student questionnaire.
  4. Create a del.icio.us account for yourself. Tag three Web Sites that focus on the WordPress, and write a note about why you think each one would be a good resource for this class. *Make sure you also add the tag: ramapointeractivemedia2015
  5. Create a Gravatar account. Take a photo of yourself, upload it to Gravatar and link it to your WordPress blog using the email you used to create the blog. You can use Photo Booth on a mac.
  6. Create a Flickr account for yourself. Upload the photo you took of yourself using Photo Booth. *Make sure you also add the tag: ramapointeractivemedia2015
  7. You will need access to the Adobe Creative Suite for homework assignments. You can come in to use the school computers or you can purchase Adobe Creative Cloud for $19.99/month (student discount).
  8. Go to DropBox and sign up for a free account. On your personal computer, install DropBox.
  9. Install WordPress on your web hosting space. Each week you will post a link to your homework on your own WordPress site in the comments section of this blog.
  10. On your del.icio.us account tag three Web Sites that focus on WordPress, WordPress admin panel, or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. ALSO, add “week 1 hw” in your comments section so that I can keep track of your comments. *Make sure you also add the tag: *Make sure you also add the tag: ramapointeractivemedia2015  AS WELL AS add additional tags.