Adobe Photoshop Elements 2.0 Creating Buttons For Websites

Slides:



Advertisements
Similar presentations
DREAMWEAVER Welcome to our website!
Advertisements

MS-Word XP Lesson 7.
MS-Word XP Lesson 2. Page Setup & Margins 1.Click on file menu 2.Click on page set up menu item 3.Select margins tab sheet (default activated) 4.Type.
The GIMP Simple features tutorial By Mary A White.
Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity.
By Janet Holland & Barbara Higgins-Dover Adobe Photoshop Blended Image Tutorial.
Parts From: Learning Media Design with Adobe CS3 Exercise 34.
To Do Quiz 2 Launch Internet Explorer Launch Photoshop – Programs – Dev Apps – Adobe – Adobe CS3 – Photoshop CS 3.
Graphic Fun with Photoshop and Dreamweaver Presented by Roger L. Runquist, WIU.
Adobe Photoshop Elements 2.0 Creating A Button For Your Website.
Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University Photoshop Basics.
Adobe Photoshop Elements 2.0 Creating Buttons For Websites.
Creating Animated Gifs in Adobe Photoshop Elements Janet Holland.
1 Introduction to Photoshop Or Why Paint is “yesterday’s news…”
(MICROSOFT WORD) Screen Elements Special Keys Spelling & Grammar Check Font Face, Size, Style Alignment & Spacing Saving A File Closing MS Word DAY 1.
PowerPoint for Macs: Building Image Intensive Presentations Julia Simic University of Oregon VRC 2006 Version: PowerPoint 2004 for Mac.
MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.
DEVELOPING A PROFESSIONAL LOOKING WORKSHEET By Dr. Ennis - Cole.
Applications for Web Development (CIS 162) Intro to Photoshop.
Understanding Publisher Publisher is a desktop publishing application from Microsoft. It is often considered to be an entry-level desktop publishing application.
Creating Your Lesson/Activity Save template from C&I webpage to your computer Template was created as a form so that formatting would remain consistent.
Slide 1 of 24 1) Launch Fireworks 2) Under File, choose New 3) In the New Document dialog box, enter Width: 100, Height 160, Resolution 72, and choose.
CIS 205—Web Design & Development Fireworks Chapter 1.
Photoshop Teppo Räisänen LIIKE/OAMK General Information Photoshop is an advanced image editing tool Web Graphics Printed material UI is based on.
11 Creating an Ancestor Book (A Multi-Generation Photographic History) Frank Comprelli SIR Area 2 Computer and Technology Group September 17, 2009.
Project #1: Layers & Styles This lesson offers a step-by- step example that will help you master the art of layers. The power and flexibility of Photoshop.
 Looks like the Layers Panel  Allows you to organize paths  Converts paths into: › Filled shapes › A brush stroke › A selection › A clipping mask.
MIS 201 Web Design 1. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.
Adobe Photoshop Blended Image Tutorial Adobe Photoshop Tools Toolbar Tools Palette Windows Menu.
1 Using layers NOTES. 2 Open Adobe Photoshop Elements. Select a size of A4. Create 5 new layers by selecting layer > new. Do this action five times. Click.
PowerPoint Bloat How to avoid it. 1 PowerPoint technique, 4 image techniques PowerPoint 1.Split long PowerPoint files into several smaller files Image.
Chapter 3 - Photoshop® Elements Outline 3.1 Introduction 3.2 Image Basics 3.3 Vector and Raster Graphics 3.4 Toolbox Selection Tools Painting.
Adobe Photoshop Ch 7 Notes Using Positioning Tools.
Font, Font Size, and Text Color. When you have a text box open you have access to the font, font size, and font color from the home screen under the section.
Aim: How can we create a paragraph of type?. Designing a Paragraph of Type O All of the text we have written on the label so far has been a few discrete.
Adobe Photoshop CS5 Chapter 1 Editing a Photo. Start Photoshop and customize the Photoshop workspace Open a photo Identify parts of the Photoshop workspace.
Adobe Photoshop T.Ahlam Algharasi. Adobe Photoshop Adobe Photoshop is a seriously powerful photo and image edit ( treating and manipulation, compositing,
How to Create an Logo in Gimp Created By: Dontarious Williams.
Adobe ® Photoshop ® CS6 Chapter 1 Editing a Photo.
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.
PowerPoint Helper Deleting Text Boxes WordArt Editing WordArt Adding Slides Deleting Slides Moving Slides Font color Backgrounds Shapes ClipArt Editing.
Flash Slideshow with Fade Transition Slideshow #1-Themed Images Slideshow #2-Instructional Images.
Chapter 10 Creating a Template for an Online Form Microsoft Word 2013.
How to Use Microsoft PowerPoint What is PowerPoint? Presentation software that allows you to create slides, handouts, notes, and outlines. Slide.
Adobe Photoshop CS5.
PowerPoint Grades 3-5.
INTRO to PIXLR.com.
Chapter 1 Editing a Photo
Logo with Curved Text.
After completing this lesson, you will be able to:
Microsoft Excel.
Creating a button in Photoshop 7.0
setting the resolution - 72 vs 300 dpi (300 better quality)
Gimp Guide Mr Hall.
Topic 3.5 Word Processing Application Microsoft Word.
Chapter 1 Multimedia Authoring - Photoshop
Chapter 1 Editing a Photo
Macromedia Dreamweaver MX2004 Tutorial
PowerPoint Quick Tips Bad Ischl, Nov
MIS 201 Web Design.
Adobe Photoshop Elements 2.0 Creating Buttons For Websites
Using Photoshop for IED
DIRECTIONS: 1. Click Enable Editing in the yellow bar above.
Signature: Microsoft Word 2003
Adobe Photoshop Elements 2.0
Blended Image Tutorial
How To Photoshop Intro.
Photoshop Selection Tools
Welcome To Microsoft Word 2016
Presentation transcript:

Adobe Photoshop Elements 2.0 Creating Buttons For Websites

Launch Photoshop Program, File>New

Set Width & Height to Inches, Resolution 72 dpi, Mode RGB, OK

Image>Mode>RGB to Edit

Window>Layers Double Click the Background Layer & Rename to Unlock

After Double Clicking on the Locked Italic Background Layer Text Rename It, OK

View>Rulers to Control the Size of The Buttons You Create

Window>Layer Styles

Drag the Layer Styles Palette Down by the Tab in the Palette Well to Keep it Open for Making Selections

Layer Styles Drop-Down Menu Choices

Layer Styles Drop-Down Menu Choices

Layer Styles Drop-Down Menu Choices

With the Rectangle Tool Drag Select the Desired Button Size

Click on the Foreground Color Box to Select the Desired Button Color Background

Edit>Fill the Selected Color

The Selected Color Fills the Rectangle

Select the Desired Layer Style

If the Selection Overfills the Rectangle, Select>Inverse, & Delete Key to Remove Excess

Now Only Your Shape is Filled Edit>Deselect

Select the Crop Tool, Drag Select the Area to Keep>Return Key

Only Your Button Remains

File>Save As

File>Save As, Name in Lowercase, .psd & Check Layers, Save

Keep a .psd Copy of the Button for Adding New Text To Each Button

Select Text Foreground Color & Text Tool, Click and Type Title

The Font Tools are Along the Top & the Move Tool is on the Left

File>Save For Web

Select .gif or .jpg File Format, OK

Name All Lowercase With File Extension, Save to Desktop

Completed Button for Adding to Your Webpage