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

Slides:



Advertisements
Similar presentations
KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
Advertisements

Computer Information Technology Section 7-2
PowerPoint Scavenger Hunt Lauren Davis EDTD 3011 A Summer 2007.
Office 2003 Post-Advanced Concepts and Techniques M i c r o s o f t Word Project 7 Creating an Online Form.
Technology ICT Core: Desktop Publishing. Desktop Publishing Desktop Publishing - assembly centres for text, graphics etc Starting a Publication: Start.
Click your mouse for next slide Dreamweaver – Merging, Coloring, Fonts Now it’s time to fill your page with some more interesting stuff The first thing.
Building Web Pages With Microsoft Office. Introduction This tutorial is for the beginning web builder. It utilizes software that you already have, Microsoft.
FIRST COURSE PowerPoint. XP New Perspectives on Microsoft Office 2007: Windows XP Edition2 What Is PowerPoint? PowerPoint is a powerful presentation graphics.
Creating a Portfolio Website Phillips. Go to wix.com.
Mr. Potato Head The objective of this tutorial is to cut an image and assemble Mr. Potato Head using various tools in Adobe Photoshop Elements 2.0.
 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.
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
Using Dreamweaver getting started 1)Start in your “My Documents” folder 2)Create a new folder called “website” 3)Create a sub folder called “images” 4)Start.
Adding Websites to a Folder  Putting sites into an already existing folder Putting sites into an already existing folder  Adding an image on the icon.
Website design Feng Zhao College of Educatioin California State University, Northridge.
Transferring Course Materials to the Web. Creating a Web Site With a Template To create a Web site with a template 1.Start FrontPage. 2.On the File menu,
Dreamweaver Learning to be a web design master! By: Mr. Brunton.
Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Web Technologies Website Development Trade & Industrial Education
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.
 street/ street/  Type text & download sign. (or use snipit)
Use “Paint” to create a Title Page and page 1. Start Menu 2. All Programs 3. Accessories 4. Paint 5. Click on Paint Bucket (Fill with Color) 6. Select.
How To Use Google Docs. 1. Go to the Google Docs website a) Go to b) Sign in using your username and password.
DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.
Website Development with Dreamweaver
U3A Computing Class Leader – Brian Moore Week 5 of 10 weeks. Mondays 4:15 to 5:45 pm Next week is half term then an Inset day So Next lesson is 4 November.
JAOIT 8.  Dreamweaver is a program for creating web pages and managing websites without having to type HTML code.  WYSIWYG – What you see is what you.
How to Make a PowerPoint Yes you can do it too! How to (legally) Download PowerPoint aspx?family=officehomestudent&culture=en.
Click on these! %2Fblank%2Fbrowse.asp%3FA%3D383%26BMDRN%3D2000%26BCOB%3D0% 26C%3D64893.
Manipulate Graphics Skill Area Lecture Overview Photoshop’s GUI Basic Function Basic Image Manipulation.
Make sure you end up on this page
Photoshop Basics Computer Information Technology Section 5-3.
Sports Website Creation. In this project you will design and produce your own website.
Saturday, September 16, 2006 By: April M. Bowser Photoshop 7 Session 1.
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.
Creating HUD Rings. Step 1 Open a new document in Illustrator. You can set it to the size you prefer to work in. In my case I have it set at 500px by.
Making Websites with Dreamweaver BTT. What is Dreamweaver?  “What You See Is What You Get” (WYSIWYG) web design software  Rather than writing code and.
 You will be creating a cartoon in Adobe Illustrator using the paintbrush tool  You will learn about layers, different brushes, and different strokes.
Creating a Silhouette in Illustrator. Go File>Place and place the photo on the artboard. Select the photo and click Live Trace (its on the tool bar right.
What is PowerPoint? By Kettina L. Robinson. Unit Questions What do I want to accomplish? What do I want to accomplish? What content do I need to cover?
Photoshop Image Slicing. Reasons to Image Slide To create links out of sliced images To optimise different areas. (flat areas of colour, such as logos,
Adobe Photoshop Ch 7 Notes Using Positioning Tools.
Home page Web page link 1 Web page link 2Web page link 3Web page link 4.
GIMP Introduction. Creating a new document After opening GIMP, create a new document by clicking File  New After opening GIMP, create a new document.
MAKING YOUR FIRST PRESENTATION GRADE 9 MISS L. MCVEIGH ROOM PowerPoint Enter.
Step 1 This works best with a picture of someone, preferably close to his or her face. Dark space behind the person doesn’t show up well with text over.
Making text photo. Photoshop tutorial: making text photo with Angelina Jolie's head- shot (Part 1) Step 1:  Select the picture you want to edit. Step.
Photoshop Actions Lights, Camera, Actions in Photoshop.
Pen tool skylines Mrs Ras. Find and save on your h drive some skyscrapers you want.
Card Design How to Mrs Ras. Open Illustrator File>New.
PHOTOSHOP: THE BASICS WHS MULTIMEDIA WRITING WORKSHOP JULY 17, 2013.
Dreamweaver Tips & Basics Presented by Laban Toose ICT Specialist Sunbury Heights Primary School.
Open Your ImagesOpen Your Images  In Photoshop open the two images that you would like to merge together.  One should be a silhouette portrait.  One.
Creating a Google Site For a Digital Portfolio Purpose.
PLEASANTVILLE. Right now you have one layer. Your first layer is called “Background.”
TechKnowlogy Conference August 2, 2011 Using GoogleDocs for Collaboration.
INTRO to PIXLR.com.
Creating & Working with Clipping Masks
Online Photo Editing with Picnik
Using the INSERT TAB in MS Word 2007
Gimp Guide Mr Hall.
PowerPoint Quick Tips Bad Ischl, Nov
Cheat Sheet CSCI 100 JW Ryder
Surreal Digital vs. Drawing
Cabunyag-fuerzas-agala-gaspar
Wheelers clubs Your site will consist of 3 pages:
Step 1:. Open Microsoft FrontPage application.
Core: Desktop Publishing
Presentation transcript:

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

1. New Document/Canvas Alright, let’s start off by creating a new document in which we can design our template. For this tutorial use the following settings press OK. Leave the document as is and do to step 2.

2. I opened a picture of a student. Created a new layer by clicking at the bottom right next to the trash can and drew on layer 1. Use the following pen settings. I used the pen tool to trace around the picture by click and drag, creating a silhouette..

3. After the silhouette is complete, click and hold down layer 1 to drag into the project window that was created in the beginning. If necessary press ctrl+T to scale image then press enter to accept command. I repeated this process.

Next I selected one layer and added a gradient. Click on style layer and selecting “gradient overlay.” I chose this gradient from drop down menu then OK.

I went from black to this gradient. You know how to create a new layer so create one and drag it to the bottom of the layers palette. Press ctrl+delete to fill it with white, just be sure your foreground color is white.

After creating a white background I open a Illustrator document that I created earlier and dragged it in to the project window. “I wont got into details on how I created this Document but you can bring in a picture or drawing. After creating this I clicked on the Text tool and clicked on the document and typed S.A.Y Yes!. I used Marker felt as my Font but you can use any font that you like.

After adding some more text on a different layer and using some of my personal brushes I created this art work. Then created a new layer to add 2 images to be as links to photo galleries. Well I finished the process of designing the page. Before I post it on the web site I needed go through the following process.

First I need to export it for the web. For this specific project I need to split the document into 2 Doc’s. I turn off students layer by clicking on the eye and also the background. Go to file save for the web. I selected the following Settings and saved in a Folder that I named images. I then repeated the same Step for the bottom part of The document.

From this point I opened Dreamweaver and I went to create a new document. Created a a table and with 1 column and 1 row. Since I am the web master for my church I have access to the web server. I’m not going to show the process to getting my page on line, because different hosting company have different processes to access them. Also depending on the software you use there is different process. In Dreamweaver I created the links to the photo album. In this case I use My capabilities to create a photo gallery and created albums. I wanted to use Google's Picasa web album but wasn’t able to because the Download is not Mac compatible.