Web Design Track


تراك تصميم المواقع الإلكترونية خطوة خطوة من البداية حتي الإحتراف

في هذا التراك سوف تتعلم المهارات الأتية 

  • كيفية رسم شكل الموقع في برنامج الفوتوشوب 
  • كيفية رسم اللوجوهات والرسومات فيكتور ببرنامج الإليستراتور 
  • في برنامج Dream Weaver هتتعلم كيفية تنسيق الصفحات وربطها وبناء شكل الموقع بالكامل 
  • في كورس HTML هتتعلم لغة البرمجة المستخدمة في بناء المواقع 
  • في لغة ال CSS هتتعلم لغة التنسيق المستخدمة في بناء المواقع 
Photoshop CC 16 Hrs
What Photoshop Can do 
  • Introducing Adobe Photoshop 
  • Moving a Selection from One Image into Another
  • Correcting Colors
  • Fixing Details with the Clone Stamp Tool
  • Using Adjustment Layers
  • Sharpening the Focus
  • Creating a Dramatic Sky & Cropping the Image
  • Text Effects
The Bridge
  • Introducing the Adobe Bridge
  • Using the Lightbox & Thumbnail View
  • Using the Filmstrip View
  • Viewing Thumbnail Metadata & Labeling
  • Showing Off New Features
  • Managing Your Images
  • File Naming Inside the Bridge
  • Workspaces, Location Tracking & Slide Shows
Setting up
  • Setting Preferences
  • Choosing Color Settings
  • Choosing Creative Suite Color Settings
  • Customizing Keyboard Shortcuts
  • Organizing Palettes & Saving Workspaces
Navigation and Resolution 
  • Zooming an Image
  • Scrolling & Panning
  • Changing Resolution & Image Size
  • Upsampling an Image
  • Downsampling an Image
  • Using the Navigator Palette
  • Customizing Your View
Rotate and Crop 
  • Introducing the Crop Tool
  • Cropping with the Crop Tool
  • Cropping with the Marquee Tool
  • Automating Crop & Straighten
  • Straightening with the Measure Tool
  • Cropping with Perspective
Basic Color Correction 
  • Introducing Variations
  • Adjusting Color with Variations
  • Correcting Color with Variations
  • Using the Fade Command
  • Modifying Colors with Hue/Saturation
  • Specifying Colors in Hue/Saturation
  • Selecting Color Ranges in Hue/Saturation
Red Eye Removal and Recolor 
  • Correcting Red Eye
  • Using the Red Eye Tool
  • Recoloring with the Brush Tool
  • Using the Color Replacement Tool
Painting with the Edit Tools 
  • Introducing the Dodge Tool
  • Introducing the Burn Tool
  • Introducing the Sponge & Focus Tools
  • Using the Dodge Tool
  • Using the Burn Tool
  • Working with the Sponge Tool
  • Pushing Pixels with the Smudge Tool
Clone, Heal, and Patch 
  • Introducing the Clone Stamp Tool
  • Compositing with the Clone Stamp Tool
  • Using the Spot Healing Brush Tool
  • The Healing Brush & the Options Bar
  • Healing & Fading
  • Creating Textures & Patterns
  • Using the Patch Tool
Using the Selection Tools 
  • Introducing the Selection Tools
  • Using the Magic Wand Tool
  • Exploring Magic Wand Options
  • Using the Grow & Similar Commands
  • Selecting with the Polygonal Lasso Tool
  • Selecting with the Marquee Tool
  • Saving & Loading a Selection Outline
  • Making a Composite
  • Adding a Drop Shadow
  • Cleaning Up a Selection Edge
Selecting with Color Range 
  • Selecting Translucency
  • Darkening with the Multiply Blend Mode
  • Defining a Color Range
  • Selecting Image Highlights
  • Compositing Highlights into an Image
Making the Most of History 
  • Modifying an Image Using Variations
  • Using Undo
  • Using the History Brush
  • Understanding History States
  • Fixing Saved Files
  • Choosing History Options
  • Saving Snapshots
Illustrator CC 16 Hrs
  • Introduction to Illustrator's environment
    • Working with Menus, Palettes and the Document Window
    • About the Control Palette
    • Using and saving Workspaces
    • Setting preferences
    • Moving around the Artboard
    • Using the Navigator palette
    • Options for viewing artwork
    • Using Illustrator Help
  • Working wit hBasic Tools
    • Using the Toolbox
    • Selection techniques with the Selection and Direct Selection tools
    • Line and Shape tools
    • Modifing tool options
    • Techniques for polygons, rounded rectangles, spirals and stars
    • Defining the Stroke and Fill of shapes
  • Transforming and Controlling Shapes
    • Grouping
    • Work in Group Isolation Mode
    • Understanding nested groups
    • The Group Selection tool
    • Using the Free Transform tool
    • Changing the stacking order of objects
    • Working with the Layers palette
  • Objects
    • Aligning and distributing objects
    • Scaling objects
    • Rotating objects
    • Reflecting objects
    • Distorting objects
    • Shearing objects
    • Position objects precisely
  • Live Paint
    • Create a Live Paint Group
    • Edit Live Paint regions
    • Add objects to Live Paint Groups
    • Use the Live Paint tool
    • Set Gap options
  • Colour
    • Color fundamentals
    • Color Modes (RGB / CMYK)
    • Defining and using Global and Spot Colours
    • Mixing Colours with the Colour Palette and Colour Picker
    • Saving, loading and exporting Swatches
    • Creating, editing and applying Gradients
    • Sampling colours with the
    • Eyedropper tool
  • Live Trace
    • Importing bitmap graphics
    • Converting bitmap art intov ector paths
    • Working with Live Trace presets and options
  • Drawing with the Pencil Tool
    • Create paths with the Pencil tool
    • Pencil, Eraser & Smooth tool options
    • Splitting paths with the Eraser tool
    • Simplifying paths with the Smooth tool
  • Precision Drawing
    • with the Pen Tool
    • Creating paths with the Pen tool
    • Splitting and joining paths
    • Creating and editing
    • Bezier curves
    • Using the Convert Anchor Point tool
    • Adding and removing Anchor Points
    • Adding arrowheads
  • Painting with the Paintbrush
    • Creating paths with the Brushtools (Scatter, Art, Calligraphic and Pattern)
    • Brush tool options and libraries
    • Creating new brushes
    • Applying brush strokes to existing paths
  • Introduction to Filters and Effects
    • Using Filters and Effects
    • Controlling object attributes with the Appearance palette
    • Illustrator's 3D rendering effect
    • Creating a 3D shape using Revolve
    • Modifying the light source
    • Creating 3D Beveled and Extruded Shapes
    • 3D rotated shapes
    • Mapping artwork to 3D shapes
  • Symbols
    • Understanding how Symbols work
    • Creating and editing symbols
    • Adding symbols to a document
    • Modifying symbols sets with the Sumbols tool set
  • Working with Type
    • Creating Point, Path and Area type
    • Importing text
    • Applying character and paragraph formatting
    • Wrapping text around images
    • Threading text
    • Creating and applying Character and Paragraph Styles
    • Creating Outlines
  • Creating Complex Illustrations
    • Creating compound paths with the Pathfinder palette
    • Creating compound shapes using the path finder palette
    • Offset Paths
    • Outline Paths
    • Expanding objects
  • Working with Masks
    • Creating clipping masks
    • Editing clipping masks and masked objects
    • Releasing Clipping Masks
    • Creating Opacity Masks
    • Editing opacity masks and masked objects
    • Understanding Knockout Group and Isolate Blending options
    • Transparency effects
    • Understanding blending modes
    • Preparing documents containing transparency for printing
    • Flattening
    • Documents Raster Effects Settings
  • Working in Perspective
    • Creating illustrations in a one point perspective
    • Understanding Isometrics
    • Precision alignment
  • Creating Graduated Shapes
    • Creating Blends
    • Editing Blends
    • Blend options
  • Graphic Styles
    • Creating Graphic Styles
    • Applying Graphic Styles
    • Editing Graphic Styles
    • Sharing Graphic Styles
  • Creating Seamless patterns
    • Creating Tiling patterns
    • Applying patterns
    • Editing patterns
    • Transforming patterns within objects
  • Working with Gradient Mesh
    • Creating a Gradient Mesh Object
    • Using the Gradient tool
  • Creating Web Graphics
    • Creating Slices
    • Editing Slices
    • Working with the Save for Web dialog box
    • Graphic formats for the web (SVG, SWF, JPG, GIF, PNG 8, PNG 24)
    • Creating an animated Flash banner
  • Saving Options
  • Printing options 
HTML 5 12 Hrs
  • HTML
    • The Basics
    • Web Browsers
    • What is HTML?
    • HTML as a Markup Language
    • What Does HTML Look Like?
    • Nesting Tags
  • HTML Structure
    • Global Structure
    • The <html>, <body>, <head>, and <title> Elements
    • Creating an HTML Document
    • Basic Content Structure
    • Headings
    • Paragraphs
    • Horizontal Rules
    • Divisions
    • Line Breaks
  • Links
    • Local Links and Navigation Bars
    • Remote Links
    • E-mail Links
    • Named Anchors (Bookmarks)
  • Formatting
    • Block-level Formatting
    • Inline Formatting
    • HTML Entities
    • Using Colors
    • Introduction to Cascading Style Sheets
    • Embedded Styles
    • Inline Styles
  • Graphics
    • Embedding Images in a Web Page
    • The <alt> Attribute and Accessibility
    • Graphic Formats (.gif, .jpg and .png)
    • Using Graphics as Links
    • Using Background Images
  • Lists
    • Creating Unordered (Bulleted) Lists
    • Creating Ordered (Numbered) Lists
    • Nesting Lists
  • Tables
    • Creating and Modifying Tables
    • Table Coding Guidelines
    • Working Around Browser Inconsistencies
    • Formatting Tables
    • Table Headers and Captions
    • Spanning Rows and Columns
CSS 3 12 hrs
  • Introduction to Learn CSS3
  • What Exactly is CSS3, and How we can Use it Today
  • Progressive Enhancement
  • Thinking in CSS
  • Inspiring Real World Examples of CSS3
  • Discussion

CSS Selectors

  • CSS2.1 Attribute selectors
  • CSS3 Attribute selectors
  • CSS3 UI selectors
  • Lesson 3 Outline
  •  first-child and other CSS3 child selectors
  • Aspects of Child Selectors
  • CSS3 stuctural type selectors

CSS3 Text Properties

  • Lesson 4 Outline
  • Text Shadows
  • Text Stroke
  • RGBA Colors

CSS3 Box Properties

  • Lesson 6 Outline
  • Border Radius Part 1
  • Border Radius Part 2
  • Border Radius Part 3
  • Box Shadow Part 1
  • Box Shadow Part 2

CSS Transition Animations

  • Multi-column Text
  • CSS Transitions
  • HTML slides document
  • Recreating 2D Transition Effects from Keynote

CSS3 Backgrounds

  • Multiple Background Images
  • Sizing Background Images
  • Clipping Backgrounds
  • Gradients
  • HTML document
  • Background image
  • Triangles in triangles

CSS Transforms

  • Lesson 9 Outline
  • 2D transforms in CSS3
  • Your Challenge for Today
  • Download HTML document
  • SVG image

Web Fonts

  • The History and Challenges of Web Fonts
  • Using Web Fonts
  • Download the demo page
  • Using Web Fonts
  • Services and Libraries
  • Bonus: Web Fonts Services, Sources, Tools and Resources
Dreamweaver CC 16 hrs
  • Introduction
    • authoring environment
    • Design or Code Layout
    • Setting up your workspace
    • Menus, Panels, and Inspectors
    • Set up web browsers fo previewing pagesMaking a Site Connection
  • Basic Site Management
    • Defining local and remote sites
    • Creating files & folders
    • File naming conventions
    • Moving, copying and deleting files properties
  • Document Properties
    • Adding a page title
    • Adding meta tags
  • Text and Simple Formatting
    • Entering text
    • The importance of headings
    • Paragraph returns and line breaks
    • Bulleted and numbered lists
    • Choosing fonts and creating font lists
    • Importing text
    • Adding special characters
  • Formatting with Cascading
    • Introducing cascading style sheets
    • Creating styles
    • Exporting CSS rule definitions
    • Creating class styles
    • Attaching external style sheets
    • Creating a new external style sheet
    • Displaying styles
    • Understanding cascading order and inheritance of styles
    • Creating internal styles with the Property inspector
  • Hyperlinks
    • Absolute, relative and site-root
    • relative paths
    • Internal links
    • External links
    • Anchors (linking within the same page)
    • Email links
    • Creating a jump menu
  • Working with Images
    • Image file formats (JPG, Gif, PNG, SVG)
    • Inserting images
    • Image alignment
    • Using Dreamweaver's onboard image editing tools (crop, brighten, sharpen)
    • Inserting background images
    • Page composition using tracing images
    • Image links
    • Image maps
    • Simple rollovers
  • Site Layout
    • using Tables
    • Creating tables
    • Formatting tables
    • Modifying a table
    • Percentage or Pixel based tables
    • Nesting tables
    • Drawing tables in layout mode
    • Importing tabular data
    • Sorting table data
  • Library Items
    • Creating library elements
    • Inserting library elements
    • Updating pages with library elements
  • Working with Templates
    • Creating a template
    • Adding editable regions to your template
    • Creating new pages from your template
    • Updating your site using templates
  • Inserting Multi-media
    • Inserting a Flash Animation
    • Inserting a PDF button
    • Insert Video
  • Testing and Uploading Your Site
    • Testing your site
    • Maintaining your files and folders
    • Connecting to a remote site
    • Synchronizing files
  • Working with Code Snippets
  • Working in Code view and hints
  • Creating Usable Forms
    • Overview of form interaction
    • Adding Controls
    • Labels and text boxes
    • Drop down lists, radio buttons, check boxes and hidden fields
    • Submit and Reset buttons
    • Form validation
  • Advanced Template Topics
    • Creating the base Template
    • Nesting Templates
    • Repeating Regions
    • Optional Regions
    • Template expressions
  • Tableless layout with CSS
    • Understanding cascade and specificity
    • Absolute, Relative and Static positioning
    • Visibility and Overflow
    • Working with Floats
    • Multi-colum layouts
    • Centering CSS layouts
    • List-based navigation
  • Automation
    • Search and Replace
    • Using the History Panel
    • Saving History Steps as Commands
    • Extend Dreamweaver - get more commands
  • Javascript Behaviours
    • Popup Windows
    • Browser Sniffing
    • Plugin- Sniffing
    • Multi-event rollovers
    • Show/Hide Layer
  • Advanced Site Management
    • Search and Replace
    • Link-checking - Broken links and orphaned files
    • Validation
    • Browser checking
    • Using the Site-Map
    • Cloaking files and directories
    • Check in / Check out
    • Synchonization
Adobe Muse CC 12 Hrs

AdobeMuse CC

·        Exploring Muse Interface

·        Creating a new Muse website

·        Adding Pages to yourwebsite

·        Adjusting site properties

·        Building Master Page

·        Adding contents to web site

·        Selecting Objects

·        Working with Layers

·        Adding content  Areas with rectangles

·        Placing Graphics into Musewebsite

·         Placing Graphics from Libraries

·        Reusing Graphic elements

·        Working with Text

·        Creating your own Characterand Paragraph styles

·        Creating Lists

·        Creating Hyperlinks

·        Working with Colors

·        Build site Navigation

·        Working with Widgets

·        Creating Responsive website

·        Adding Additional sitefunctionality

·        Building Contact Forms

·        Testing Site

·        Publish your website

 

Adobe Edge Animate 12 Hrs

·        What is HTML5 Animation

·        What does Edge Animatecreates ?

·        Understanding interface

·        Creating Contents in EdgeAnimate

·        Preparing web Assets to use

·        Working with web fonts

·        Composting Layouts

·        Making your compositionResponsive

·        Creating Animations

·        Working with Actions

·        The Code Panel

·        Beyond the Edge AnimateInterface  

·        Publish your Edge AnimateProject

 

Web Design Workshop 12 hrs
لمشاهدة فيديو حول التراك إضغط هنا


   
 
Label