PHOTOSHOP, PSDS, AND DESIGN COMPS WRA210 9.25. TODAY’S AGENDA Learn some more Photoshop o Fill Layers o Adding Shapes o Adding Images o Transform Workshop.

Slides:

Advertisements

Similar presentations

Computer Information Technology Section 7-2

Advertisements

Desktop Publishing Lesson 1 — Working with Documents.

An Introduction to Styling Your Resume & Creating Your Showcase

Building Web Pages With Microsoft Office. Introduction This tutorial is for the beginning web builder. It utilizes software that you already have, Microsoft.

Click to add your Title Click to Write your name. Make sure it looks like this. Author: Nancy Power Point.

Microsoft Office 2007 Word Chapter 1 Creating and Editing a Word Document.

My Workspace Profile. Using the course menu, click on Profile.

Creating and Publishing Your own website

Google Confidential and Proprietary 1 Intro to Docs Google Apps Apps.

 Open Photoshop  File>open>choose a picture  Go to filter>choose an effect.  Either save your image or use the snipping tool to copy and paste it into.

Project 8 Mastering Digital Media: Picture Files.

Google Drive. Google Docs Google Drive is the new home for Google Docs Create and share your work online and access your documents from anywhere Manage.

Docs, Spreadsheets, & Presentations. What Do YOU Know???

CURR 285, Fall 2004 Michael Beutner, Associate Professor, Instructional Technology Office:Strauss Hall 206 (203) When you send ,

© Cheltenham Computer Training 2002 Microsoft Publisher 2002 – Slide No 1 Microsoft Publisher 2002 Intermediate Level Course.

Agenda9/11/13  Do Now  Display your name tag and log into your computer  Pre-Assessment Test  Info and Interests  Syllabus and Course Expectations.

IPAD Set Up. Gmail Account First, you need to set up a free gmail account with your name. If you have an existing one you may use that as long as: – A)

Microsoft Excel 2000 Adding Visual Elements and Managing Files.

Build a Free Website1 Build A Website For Free 2 ND Edition By Mark Bell.

Lesson 2: Compositions and Animations CMM204 – Digital Media Effects.

Intro – Google Docs Joel Elad iTeam – x7400 Instructional Support and Training Academic Technology Services.

IT Introduction to Website Development Welcome!

Uploading Image Files. Introduction – Click on Control Panel Button Typically, most instructors will post the majority of their images under the “Course.

 street/ street/  Type text & download sign. (or use snipit)

WRA 210: 2/07/2013 MOD 8: FILE NAMING CONVENTIONS.

Agenda9/11/13  Do Now  Display your name tag and log into your computer  Pre-Assessment Test  Info and Interests  Syllabus and Course Expectations.

Photo Story for Windows Amanda Wilson First Grade Teacher Trinity School Atlanta, GA Follow along:

Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.

Basic Shapes and Colors Web Design Section 5-8 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I”

Created by Russell Smith Technology Facilitator North Edgecombe High School.

 Research on the best software that suits your preference. I recommend Adobe Dreamweaver as that is what I’m using to create my website.

A Basic Guide to Using Wikispaces Jeff Rew TEDU 673.

Flash! Macromedia Flash is the key to designing and delivering low-bandwidth animations, presentations, and Web sites. It offers scripting capabilities.

Make sure you end up on this page

By: Jennifer Huff & Courtney Stenzhorn. What Do YOU Know???

Macromedia Studio 8 Step-by-Step MACROMEDIA FIREWORKS 8 Project 2: Experience Bank Logo.

LCPS Art Teacher In-service Workshop Augusta Dadiego September 1, 2009.

Free Response Warm Up #43. Agenda Digital Photography Quarter Final MAKE UPS Free Response Warm Up Photoshop Lesson #3—More Layers –Review of Layers –More.

Using Publisher to Create a Lesson Plan Grid GEORGIA SMEE EDTC 560.

Designing a Simple but Modern Website in this easy Photoshop tutorial By Joel Jurado.

Banner Tutorial Module 4: Working with Images LESSONS 11 & 12.

DESIGN & CRAP WRA AGENDA Time for Questions CRAP(py) Discussion Introduction to Module 2 Updating you course page.

Google Docs An Overview for Educators. Google Docs Google Docs is a free, web-based word processor, spreadsheet and presentation tool that allows you.

WRA 210: 10/7/13 IMAGES. TODAY’S AGENDA Reminder about Module 8 - test your links!Module 8 Overview of hierarchies, naming How images work on the web.

HTML Help For MGS 351 Final Project Website. Agenda Getting Started – Must-Do’s – Working from an off-campus computer – Other Resources Working with HTML.

Working with DIV Structures, CSS, Webfonts and Templates 9/16/2015Web Development and Interactive Media.

THE PAPERLESS CLASSROOM: USING GOOGLE DRIVE TO CONDUCT A PAPERLESS RESEARCH PAPER: BENEFITS OF USING GOOGLE DRIVE TO CONDUCT A PAPERLESS RESEARCH PAPER,

GOOGLE IN THE CLASSROOM AN ORGANIZATION AND INSTRUCTIONAL TOOL BY CYNTHIA GERMANE.

What is ? ●It is a Halton District School Board term ●It is HDSB use of Google Apps for education. It includes: ■ Google Docs ■ Google Drive ■ Google Applications.

PHOTOSHOP: THE BASICS WHS MULTIMEDIA WRITING WORKSHOP JULY 17, 2013.

Microsoft Expression Web 3 Chapter 6 Adding Interactivity.

3 rd grade Math Practice Thinking Problems. Solve the problems in class. Bring the finished packet to the computer lab. In the computer lab you will use.

Adobe Illustrator CS5 - Illustrated Unit A:Getting Started with Adobe Illustrator CS5.

1. HOW TO START THE APPLICATION ? 1. Double click on the Application icon 2. The main menu will be loaded 3. Select the size of the album page 4. Click.

Agenda 11/2/06 Digital Photography Free Response Warm Up Photoshop Lesson #3—More Layers –Review of Layers –More about Layers: Opacity and Blending Modes.

Desktop Publishing Lesson 1 — Working with Documents.

Basic Web Design Week 3 - Graphics UVICELL. Web Graphics Concepts for Week 3 Selecting the right format for your image Creating a name banner for your.

TechKnowlogy Conference August 2, 2011 Using GoogleDocs for Collaboration.

Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”

INTRO to PIXLR.com.

A Guide to Using Wikispaces

LESSONS 11 & 12 Module 4: Working with Images Banner Tutorial.

Adding Images Add a Picture to a Web Page Edit a Picture

Creating a button in Photoshop 7.0

Online Photo Editing with Picnik

Selecting and Layering Multiple Images

Creating & Working with Clipping Masks

An Introduction to Collaborative Online Documents

Discover Google Docs The link to the presentation in case sensitive... Discover Google Docs

Slides prepared by Sarah Benis Scheier-Dolberg

Presentation transcript:

PHOTOSHOP, PSDS, AND DESIGN COMPS WRA

TODAY’S AGENDA Learn some more Photoshop o Fill Layers o Adding Shapes o Adding Images o Transform Workshop - make comps from wireframes

DISCUSS Difference between Wireframes and Comps o What do they do? o Who are they for? o Why do we do them? o Why are they crucial? o Why are they the work of Professional Writers?

LAYERS IN IMAGE EDITING

TOOLS FOR DESIGN COMPS Any app that will save a layered PSD file Use.PSD files - "photoshop document" o open-source, can be opened with lots of apps o industry standard - everyone will be able to use it Software that will create layered PSD files o Photoshop - in labs, $169 at Computer Store$169 at Computer Store o Gimp - free, cross-platform Gimp o Pixelmator - Mac, $15 Pixelmator

WORKING WITH TYPEFACES My mistake: Google Web Fonts o LEARN: understand the limitations of your host o LEARN: why you have to buy space for WRA 410 Only use fonts in the safe 16the safe 16 Revist the typecards from last time.typecards o Redo with web-safe fonts, if necessary o Save and re-upload to your site o Update links on course page

MAKING A DESIGN COMP Using out wireframes, color, and type guides Check out an example comp, notice:guidesexample comp o layer organization (names, folders) Use a grid to help you: o alignment o proximity o browser resolution

QUICK DEMO OF COMP- RELATED TOOLS Using a grid and guides Using shapes to build structure Inserting images Naming and organizing layers

MORE ABOUT PHOTOSHOP FOR COMPS Shape Tool - drawing shapes, containers Shape Tool Free Transform Tool - resize, rotate objects Free Transform Tool Placing Images - add images into a design Placing Images Rulers & Guides - make alignment easier Rulers & Guides Layer Organization - keep documents clean Layer Organization

MODULE 6 – FINISH IT Color and type guides (done!) Full design comps o Workshop today o Drafts due Monday

LOOKING AHEAD: DESIGN DOC PACKET First major, graded project Due on 10/4 Main work should be done; left to do: o Revise based on peer review (Monday) o Give your docs polish, make them look good o Module 7 (reflection) Make sure to review the rubric Check out new "rubric" section on course site

FOR NEXT TIME Complete Module 6 (color and type docs, drafts of full comps) Bring your design docs (people need to view them) Come prepared to talk about your designs Read: About Prototyping and Paper Prototyping (if you haven't already)About PrototypingPaper Prototyping