All posts by lcotnoir

Leigh Cotnoir received her MFA from San Diego State University. Leigh teaches web design and multimedia MiraCosta College in Oceanside, CA. She was awarded “Most Influential Faculty Member” in the Interdisciplinary Studies Major at SDSU in 2012, and “Outstanding Faculty Member” for the School of Art + Design in 2008 at SDSU. She’s passionate about web design, art, and getting stuff done the right way.

Animate CC – The Basics + Basic Video Project

Tutorials for Learning Basic Animate CC Skills + Collaborative Project Techniques

This set of tutorials is geared toward helping students complete the second project for MAT-120, but it can still be used by others to learn specific skills using Animate CC (formerly calledFlash Professional). Below is an outline of what you will find in the tutorials. Some students might be able to skip some lessons based on their current knowledge of certain tools and concepts.

Continue reading Animate CC – The Basics + Basic Video Project

WordPress Installation and Backup in cPanel Class Server

A Web Developer’s Process

While there are simple single-click installation options on most servers nowadays for installing WordPress, these obfuscate important details of the installation process that you should understand.Using single-click installations without knowing how the application really works is dangerous if you become dependent upon a site and later cannot properly maintain, backup, restore, and repair it when it breaks.

It is incumbent upon you as a designer-developer and webmaster to truly understand all the ins-and-outs of how WordPress works, troubleshooting WP, managing the files and database, and ensuring that you always have full backups at all times and know how to restore them. 

That being said, below are tutorials laid out in distinct phases that will help you understand all of the important steps in installing and backing up a WordPress site….


Full Video Playlist


 

Build Your First WordPress Self-Hosted Site

WordPress Basics

The playlist of video tutorials on this page will walk you through the steps necessary for understanding the basic organization of WordPress’ content entry options, plugins, themes, and settings. Furthermore, it addresses content strategy, navigation strategy, how to begin understanding what should be a post vs. a page, how to create and publish the content, and how to decide on a theme that’s right for your needs.

Below are two sections:

  1. where you can either access individual video links from the playlist, seeing the specific topics covered in each
  2. the full playlist

View Full Playlist Here:

 

Photoshop: Using Blend-If for Video

How To Get a Green Screen Effect In Photoshop

The video demo below will show you how you can use the “Blend-If” layer blending mode option to chromakey out ranges of color from a video file in the video timeline. This is the closest Photoshop currently comes to having a “green screen” effect (as of 2016) on moving videos.

CSS Properties Compilation


What this page does

This page is a compilation of commonly used CSS properties and is intended to make it easier for students to search for the type of property they might need to use based on the general categories above. To learn more about each property on this page and its syntax and acceptable values, click the property name. It will take you to the exact w3schools.com page for detailed information on each property.

CSS Font Properties

Property

Description

font

Sets all the font properties in one declaration

font-family

Specifies the font family for text

font-size

Specifies the font size of text

font-style

Specifies the font style for text

font-variant

Specifies whether or not a text should be displayed in a small-caps font

font-weight

Specifies the weight of a font


^menu


CSS Text Properties

Property

Description

color

Sets the color of text

direction

Specifies the text direction/writing direction

letter-spacing

Increases or decreases the space between characters in a text

line-height

Sets the line height

text-align

Specifies the horizontal alignment of text

text-decoration

Specifies the decoration added to text

text-indent

Specifies the indentation of the first line in a text-block

text-shadow

Specifies the shadow effect added to text

text-transform

Controls the capitalization of text

unicode-bidi

Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document

vertical-align

Sets the vertical alignment of an element

white-space

Specifies how white-space inside an element is handled

word-spacing

Increases or decreases the space between words in a text

CSS3 Text Properties

Property

Description

text-align-last

Specifies how to align the last line of a text

text-emphasis

A shorthand for setting text-emphasis-style and text-emphasis-color in one declaration

text-justify

Specifies how justified text should be aligned and spaced

text-overflow

Specifies how overflowed content that is not displayed should be signaled to the user

word-break

Specifies line breaking rules for non-CJK scripts

word-wrap

Allows long words to be able to be broken and wrap onto the next line


 

^menu


CSS List Properties

Property

Description

list-style

Sets all the properties for a list in one declaration

list-style-image

Specifies an image as the list-item marker

list-style-position

Specifies if the list-item markers should appear inside or outside the content flow

list-style-type

Specifies the type of list-item marker


^menu


CSS Background Properties

Property

Description

background

Sets all the background properties in one declaration

background-attachment

Sets whether a background image is fixed or scrolls with the rest of the page

background-color

Sets the background color of an element

background-image

Sets the background image for an element

background-position

Sets the starting position of a background image

background-repeat

Sets how a background image will be repeated

CSS3 Background Properties

Property

Description

background

A shorthand property for setting all the background properties in one declaration

background-clip

Specifies the painting area of the background

background-image

Specifies one or more background images for an element

background-origin

Specifies where the background image(s) is/are positioned

background-size

Specifies the size of the background image(s)


^menu


CSS Border Properties

Property

Description

border

Sets all the border properties in one declaration

border-bottom

Sets all the bottom border properties in one declaration

border-bottom-color

Sets the color of the bottom border

border-bottom-style

Sets the style of the bottom border

border-bottom-width

Sets the width of the bottom border

border-color

Sets the color of the four borders

border-left

Sets all the left border properties in one declaration

border-left-color

Sets the color of the left border

border-left-style

Sets the style of the left border

border-left-width

Sets the width of the left border

border-right

Sets all the right border properties in one declaration

border-right-color

Sets the color of the right border

border-right-style

Sets the style of the right border

border-right-width

Sets the width of the right border

border-style

Sets the style of the four borders

border-top

Sets all the top border properties in one declaration

border-top-color

Sets the color of the top border

border-top-style

Sets the style of the top border

border-top-width

Sets the width of the top border

border-width

Sets the width of the four borders


^menu


CSS3 Rounded Corners Properties

Property

Description

border-radius

A shorthand property for setting all the four border-*-*-radius properties

border-top-left-radius

Defines the shape of the border of the top-left corner

border-top-right-radius

Defines the shape of the border of the top-right corner

border-bottom-right-radius

Defines the shape of the border of the bottom-right corner

border-bottom-left-radius

Defines the shape of the border of the bottom-left corner


^menu


CSS3 Shadow Properties

Property

Description

box-shadow

Adds one or more shadows to an element

text-shadow

Adds one or more shadows to a text


^menu


CSS Margin Properties

Property

Description

margin

A shorthand property for setting the margin properties in one declaration

margin-bottom

Sets the bottom margin of an element

margin-left

Sets the left margin of an element

margin-right

Sets the right margin of an element

margin-top

Sets the top margin of an element


^menu


CSS Padding Properties

Property

Description

padding

A shorthand property for setting all the padding properties in one declaration

padding-bottom

Sets the bottom padding of an element

padding-left

Sets the left padding of an element

padding-right

Sets the right padding of an element

padding-top

Sets the top padding of an element


^menu


CSS Dimension Properties

Property

Description

height

Sets the height of an element

max-height

Sets the maximum height of an element

max-width

Sets the maximum width of an element

min-height

Sets the minimum height of an element

min-width

Sets the minimum width of an element

width

Sets the width of an element


^menu


CSS Display/Visibility Properties

Property

Description

display

Specifies how an element should be displayed

visibility

Specifies whether or not an element should be visible


^menu


CSS Float Properties

Property

Description

clear

Specifies on which sides of an element where floating elements are not allowed to float

float

Specifies whether or not an element should float

overflow

Specifies what happens if content overflows an element’s box

overflow-x

Specifies what to do with the left/right edges of the content if it overflows the element’s content area

overflow-y

Specifies what to do with the top/bottom edges of the content if it overflows the element’s content area


^menu


CSS Positioning Properties

Property

Description

bottom

Sets the bottom margin edge for a positioned box

clip

Clips an absolutely positioned element

cursor

Specifies the type of cursor to be displayed

left

Sets the left margin edge for a positioned box

overflow

Specifies what happens if content overflows an element’s box

overflow-x

Specifies what to do with the left/right edges of the content if it overflows the element’s content area

overflow-y

Specifies what to do with the top/bottom edges of the content if it overflows the element’s content area

position

Specifies the type of positioning for an element

right

Sets the right margin edge for a positioned box

top

Sets the top margin edge for a positioned box

z-index

Sets the stack order of an element

Photoshop : Creating 3D Objects and Environments

Intro to Three Dimensional Space

Three dimensional (3D) space is what we experience on a daily basis in real life. Unlike two-dimensional (2D) photographs and drawings on a flat picture plane, three dimensional space occupies a third dimension of depth. Both 2D and 3D space utilize the x-axis (horizontal plane) and the y-axis (vertical plane), but only 3D space utilizes the x-axis (depth plane).

When using perfect geometry, these three planes can be viewed in separate, flat 2D views referred to as “orthographic” or “orthogonal” views. For instance, a 3D object can have a top, bottom, left, right, front, and back view that give us an idea how something will look from specific angles. It is common for 3D software to provide both interactive (3D and orthographic 2D) views of the objects in the 3D space so that the designer can better visualize what s/he is working with.

Basic Photoshop 3D Tools

3D Workspace

First, when you use 3D tools in Photoshop, it is extremely beneficial to switch to the 3D Workspace. To do so, go to Window > Workspace >3D. This will give you access to all of the panels that you will frequently need while modifying your objects.

Layers Panel

Layers Panel with 3D layer selected
Layers Panel with 3D layer selected

The Layers panel will still be available, and other options in some panels will change depending on which layer you have selected. Once you have changed a layer’s contents into a 3D mesh or extrusion, you will see a little cube shape appear in the layer’s thumbnail.

3D Panel

3D Panel with extrusion selected
3D Panel with extrusion selected

The 3D Panel is crucial in working with 3D objects in Photoshop. In this screenshot example, a 3D extrusion called “logo” is selected so that it can be manipulated. Notice that the “logo” is made up of materials, or meshes, in the drop-down menu below. These extrusion edges create the faces of the 3D object.

Properties Panel

The Properties Panel will make different properties available relative to the object that is currently selected in the 3D Panel. Depending on the object selected, you might see completely different property options appear in the Properties Panel. The example below is displaying properties based on the “logo” extrusion’s selection in the 3D Panel illustrated above.

3D Properties Panel relative to selected item
3D Properties Panel relative to selected item

Moving 3D Objects in Photoshop

Standard Photoshop Move Tool
Standard Photoshop Move Tool

To move 3D objects in Photoshop, you need to first select the traditional Move Tool in the normal Tools Panel.

Once you have made that tool selection, you will see the tool options in the Options Panel change. If you have also selected a 3D object in the 3D Panel or in the Layers Panel, then the Move Tool’s options will also give you 3D Options. These 3D options are as follows: Rotate, Roll, Drag, Slide, and Scale. View the screenshot below to see what these tool icons look like.

3D Move Tool Options
3D Move Tool Options
Photoshop move and scale 3D tools
Photoshop 3D move and scale tools, from: https://helpx.adobe.com/photoshop/using/tools.html

To read more about Adobe’s 3D tools and space, you can read their Essential 3D Concepts page.

For a very quick overview tutorial using Photoshop’s 3D tools, you can watch a short tutorial on creating 3D models.

Instructor Tutorial

For a more in-depth tutorial on how to create a more complex scene, you will see how to do the following:

  • Setting up the basic scene elements
  • Creating 3D “Postcard” Mesh to use as a mapped material
  • Creating 3D “Postcard” Mesh to use as an object in space
  • Creating 3D extruded object
  • Creating and mapping custom materials to objects
  • Moving object to the ground plane
  • Merging 3D objects
  • Setting up different types of light sources
  • Using move and scale tools to manipulate the scene
  • Placing 3D objects into a photographic environment to look natural
  • Rendering and output

Playlist of 6 videos (~67minutes total)

If you want to follow along, you can download the 3D Photoshop Demo Starter Files.

 

Understanding Audio

How do audio files work?

To better understand how audio files work, let’s look at some basics about how sound works in general.

Starting with a vibration

Every sound is created through vibrations called sound waves. We typically hear them though air conductivity (waves traveling through air and through our ear canals), but we can also hear them through solid materials and through bone conductivity (solid vibrations against skull to ear bones). If fact, sound often travels more efficiently through solids than through air. For example, have you ever noticed that sounds are much louder (albeit less distinct) under water? If you ever wondered why people put their ears against a door to ‘hear through it,’ this is why. Also, if you think about how loud brushing your teeth sounds when you are doing it vs. someone else doing it, it is because the the bones in your head conduct the sound better than the air waves.

Examining the Waveform

Sound waves can be analyzed through a visual representation called a waveform. Any time you edit sound or look at it on a timeline when editing in a digital application, you will likely be provided with a waveform that gives you visual information about what is happening in the sound file.

Waveform Example
Waveform Example

To understand what is happening in a waveform, let’s look at wavelength, frequency, and amplitude.

wavelength
the distance between one crest to the next crest in a sound wave.
frequency
Frequency is measure of complete wavelength cycles in a second (cycles per second, or ‘cps’). The name of this unit of measure is more commonly called hertz (Hz), named after the scientist who discovered frequency. You look at frequency horizontally across a waveform.
pitch
The perceived ‘pitch’ of a sound is how animals interpret frequency between the physical apparatus of ears to the interpretive brain. They are not the same thing, as is often assumed.
amplitude
Amplitude is the measure of positive or negative change in atmospheric pressure caused by sound waves. It can be measured in the amount of force applied over an area. For instance, striking percussion harder creates a louder sound. Low amplitude sounds are quiet, while high amplitude sounds are loud. Think of an “amplifier” that is used to increase the volume of a musical instrument. It increases the intensity of sound using energy to increase the oscillations in electric current.

Visual Aids

Waveform Example with 4Hz frequency
Waveform Example with 4Hz frequency

 

Compare to:

Waveform Example with 9Hz frequency
Waveform Example with 9Hz frequency

Notice how both examples above show the same amount of time duration on the timeline: 1 second. The 4Hz wave has 4 wavelengths per second, where the 9Hz wave has 9 wavelengths per second.

Digital Sound Terms

sample size
Measures the amplitude or strength of the signal. This is the vertical resolution of the scan of the signal. The sample rate is often measured in bits and determines “bit depth.” Typical CD-quality audio is recorded at a 16-bit sample size, which is 65,536 values or 216 power.
sample rate
The number of samples of sound recorded per second of time. This is the horizontal resolution of the sound over time. Typical CD-quality audio is 44,100 (44kHz) samples per second.
bit rate
The sample size and the sample rate together make up the unit of measure known as the “bit rate.” This total amount of digitized information is usually measured in bits per second. It can be thought of as:

…how much data per second is required to transmit the file, which can then be translated into how big the file is.

-excellent article on Teakheadz.com

Audacity Software Tutorial

Audacity is a great free sound editor available on Mac, PC, and Linux platforms. It is very intuitive and easy to use. To export mp3 files, you will also need to install the LAME encoder plugin after installing Audacity. Also, to read m4a files recorded by a variety of devices (including iPhones), you need the ffmpeg plugin. The LAME and ffmpeg extensions download page looks sketchy and drab, but it is official and safe.

To start editing sound using the free software application, Audacity, you can watch this video that shows you how to install it (and the LAME mp3 encoder), how to set up your microphone to record your voice, how to edit the tracks, and how to output to a file.

Additional Audacity Tutorials

Below you will find other terrific tutorials that will help you get the effects you want and need for your audio:

PHP – Adding Functions to Your Template

This demonstration series will show you how you can create and include a ‘functions.php’ external file to your Project1 template.

Specifically, you will learn how to create and implement a script as a user-defined function that dynamically names the following on all the pages:

  • <title></title>
  • the banner area’s <h1></h1>
  • a class/ID name to be used wherever you wish
  • <img> source file and its alt text

You will see how to implement it by declaring the function in an external ‘functions.php’ file, including the ‘functions.php’ file inside the ‘head.inc.php’ file, and also calling the function inside the ‘head.inc.php’ file so that you can use its global scope variables anywhere within the template’s component pages.

Lastly, the demo also explains the difference between echoing the function’s results vs. using the stored variable values generated by a function from an external include() page.

Continue reading PHP – Adding Functions to Your Template

CSS – Creating a Mobile-First Design Template

Creating a Mobile-First Design Template for Your PHP Project

This demo will give you guidance in styling a web page with HTML5 markup from a mobile-first design approach. It covers the following concepts, principles, and methods:

  • the php/html starter file’s proper markup
  • how to add Google Fonts to a design
  • using a viewport/device-width meta tag
  • removing native browser styling with a ‘reset’ css file
  • using @viewport and @-ms-viewport in CSS
  • designing for smallest screens in mind first
  • using @media queries to alter layout on larger screens
  • styling a baseline for very commonly used elements

To follow along with these videos using the exact same markup, you can download the template ‘project1’ folder in a zipped file. After downloading, unzip and place the unzipped folder into your “htdocs/dev/” folder to work on the files.

Project1 – 00 Getting Started 14:57


Project1 – 01 Start Styling 14:36


Project1 – 02 Styling the Banner 14:26


Project1 – 03 Styling the Banner NAV 12:02


Project1 – 04 Styling the Banner NAV Media Query 13:02


Project1 – 05 Styling the Baseline Content 14:59


Project1 – 06 Styling the Footer 14:56


 

Useful Project Resources

XAMPP – TURN YOUR MAC INTO A DEVELOPMENT SERVER

Installing XAMPP on your MAC personal computer

XAMPP stands for “X (one of four OSs), Apache, MySQL, PHP, PERL” and is used to enable your personal computer with the web and database tools necessary to host its own dynamically driven websites for testing and development purposes. The following tutorial video demonstrations will show you the steps to set your computer up as a “localhost” server on a Mac. Continue reading XAMPP – TURN YOUR MAC INTO A DEVELOPMENT SERVER

JS : Single Page Parallax Resume

What is in this tutorial?

  • Mobile-first design principles
  • Learn how ‘vh’ viewport height works
  • Learn how to vertically and horizontally center elements on page
  • Writing jQuery script for collapsible navigation menu
  • Applying parallax smooth scrolling jQuery script for single page navigation
  • Applying Lightbox 2 jQuery effects to gallery

Please watch all videos below to complete the tutorial.


Continue reading JS : Single Page Parallax Resume