Category Archives: Tutorials

Class Itinerary, Thursday, December 8th

Posted on by
Reply

MEET UPSTAIRS PLEASE! 0900h

Discuss Friday/Workday

1. Finish Arnheim discussion:

IV. Growth — Sarah/Brighde
V. Space — Topaz
VI. Light — Jake/Gabby
VII. Color — Dylan/Wade
VIII. Movement — Claudia/Paige
IX. Dynamics — Muir/Aaron
X. Expression — Marie/Lia

2. Review Child Themes

  • Visit Child Themes Codex: http://codex.wordpress.org/Child_Themes
  • Create “style.css” using CSSEdit, save on desktop
  • Copy template, change appropriate data, e.g.
  • /*
Theme Name: Twenty Eleven Child
Description: Child theme for the Twenty Eleven theme
Author: Your name here
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");
    {css content follows}
  • Install FireBug in Firefox: http://getfirebug.com/
  • Inspect elements, adjust CSS accordingly in style.css (don’t forget class/id differences).
  • Place new stylesheet in folder: wp-content/themes/childthemename/style.css
  • Enable new theme under appearance.
  • Edit changes as you develop them through COMMAND+K while in CyberDuck. When you save, the results should be reflected on your site.
3. Review how to use the large-format printer: Epson 9600.
4. One-on-one meetings to check progress: Brighde and Topaz first…

Child Themes

Posted on by
Reply

Follow these instructions:

http://codex.wordpress.org/Child_Themes

Make a style.css file and put it in a subfolder within the themes folder…

Modify the bolded stuff to match your site!

Whatever  you modify will trump anything on the original theme…

/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme
Author: Your name here
Template: twentyeleven
*/@import url(“../twentyeleven/style.css”);

#site-title a {
color: #009900;
}

Example Pages

Posted on by
Reply

Hey Everyone:

Sorry about the demo debacle that was Thursday.  Here is my original demo page that I had made the day before:

HTML:
http://hope.simons-rock.edu/~dlaspina/laika/(index.html)

CSS:
http://hope.simons-rock.edu/~dlaspina/laika/style.css

But I’ve posted a demo page, with style sheet that you can modify for either a 1, 2 or 3-column layout.  Remember that everything is just a grid of 8 or 12 squares and intervals are mathematically straightforward.  The one thing I messed up on is that all positioning should be RELATIVE:

.paragraph {
width: 700px;
left: 90px;
 position: relative;
top: 30px;
text-align: justify;
font-family: Georgia, “Times New Roman”, Times, serif;
}

Using this in html would look like this:

<div class=”paragraph”>
Laika (Russian: literally meaning “Barker”; c. 1954 &#151 November 3, 1957) was a Soviet space dog that became the first animal to orbit the Earth &#151 as well as the first animal to die in orbit.</div>

Using his style makes a nice 700px wide paragraph that is positioned 30px down from the bottom of the item above it—or relative to the item above it.  AND it is positioned 90px from the left of the page.

Email/GoogleTalk if you have any questions:

(949) DAVID 99

Links for Today’s Demo

Posted on by
Reply

First thing, before anything…your ‘webspace’ on S-R.edu

http://www.activestate.com/komodo-edit/downloads/thank-you?dl=http://downloads.activestate.com/Komodo/releases/6.1.3/Komodo-Edit-6.1.3-8844-macosx-x86.dmg

  • Launch CyberDuck
  • Put the following information:
  • You’ll need the HTML Cheat Sheet. Note link above!


I. How to modify fonts. Let’s mess around with this page.

Fonts cheat sheet.

http://www2.gol.com/users/billp/articlehtml/fonts.html

Special Characters:

http://www.degraeve.com/reference/specialcharacters.php

My test page (go to view>view source).

Example 1 (web page with built in style sheet):

Blind Spot Newsletter

Example 2 (web page with connected style sheet):

http://bigbabygenius.com

Related style sheet: http://bigbabygenius.com/style.css

Step by Step Grid Demo

Posted on by
1

1. Launch InDesign

2. Create a new 8.5×11″ (letter) file (NOTE NUMBER 4) and save it to the new ‘Thesis_poster_turnin’ folder that I just invited everyone to.

3.  Collect your ‘assets’ in the same folder.

4. When making your new folder, be sure to allow for twelve (12) columns!

5. Create Guides (12)

6. Paragraph Styles

7. Character Styles

8. Snap to baseline grids (under preferences).

Some help.

 

 

 

 

 

Printer Settings Screenshots

Posted on by
Reply

Hey everyone:

The paper is in the cabinet marked ‘Graphic Design.’  Here are the dialogs that you need to check off before you hit ‘ print.’  Below are step by step instructions.

1. Make sure that your image is scaled to the size you wish to print.  Go to Image>Image Size in PhotoShop and make sure ‘Resample Image’ is unchecked.  Make the width of your image fit onto your paper.

2.  Go to File>Print.  First click print settings.  Choose the Epson 3880 printer and ‘11×17/double letter’ paper size (if this is the paper size that you’re using…in this case, this is for your posters).  Choose the image orientation that is appropriate for your image.  When you click ‘save’ the image on the left hand side of the dialog box should reflect what you’ve updated.

3.  On the right hand side of the dialog box select ‘PhotoShop Manages Colors.’  In the second dialog box, pick the ‘profile’ that best describes your paper (at the moment, to my best recollection it is called ‘Pro3880 Enhanced Matte.’)

4. Click the ‘Print’ button and on the next page, you will choose your print settings.  Where it says ‘Layout’ scroll down to ‘Print Settings.’

Page Setup: Sheet
Media Type: Enhanced Matte
Print Mode: Color
Color Mode: Off (No Color Management)
Output resolution: 1440 dpi
n.b. Checking ‘high speed’ is optional.  Some say your print may get smudged.

5. Look at your print and decide it can be better.  Readjust and start again!