tecnicas web
TRANSCRIPT
LUIS EDUARDO MORA OSEJOPASTO ÑARIÑO
2011
Maquetación Página Web Empresarial
ESTUDIANTE DOCENTE
WILSON GUERRERO JAIRO INAGAN
Caso 02. Maquetación Página Web Empresarial.Situación. Berta, posee una microempresa destinada al diseño de figuras en fomi. Visita a los estudiantes futuros bachilleres técnicos con especialidad en Computación para que le orienten sobre el diseño de una página web para su empresa. Después de estudiar la opción, analizar la información que se quiere mostrar, definir las partes y estructura de la página se procederá a realizar una primera maquetación en un editor de imágenes teniendo en cuenta los siguientes aspectos: Logotipo, nombre, eslogan, objetivo, misión, visión, portafolio de servicios.
Desempeño Cognoscitivo, Procedimental, Actitudinal y de Convivencia. Evidencias. Plataforma
01. Técnicas de diseño web. a. Revisa la Clase 300456. Diseño de botones para la web. (http://www.jairoinagan.com) b. Diseña Paso a Paso diez técnicas más de elementos para la web. c. Empaquetar: fichero con documento en Word que contiene los tutoriales paso a paso e imágenes resultantes en cada tutorial.
HEADER
HEADER REALIZADO EN EL SOFTWARE PHOTOSHOP CS5
PASO 1. NOS DIRIGIMOS A ARCHIVO NUEVO
MEDIDAS 920 X 200
PASO 2. DESBLOQUEAMOS CAPA DAMOS CLIP DERECHO Y OPCIONES DE FUCION NOS DIRIGIMOS A ESTILOS Y ESCOGEMOS UN ESTILO ADECUADO
PARA NUESTRO HEADER
COMO PODEMOS VER ESTE ES NUESTRO ESTILO
PASO 4. NOS DIRIGIMOS A COLOCAR UNA IMAGEN EN LA PARTE DE RECHA O IZQUIERDA PARA ELLO NOS VAMOS A ARCHIVO ABRIR Y ESCOGEMOS UNA
IMAGEN ACOR A LO QUE VAMOS A DISEÑAR EL HEADER
COMO SE DAN CUENTA YA NOS VA QUEDANDO NUESTRO ESTILO
PASO 5. LUEGO NOS DIRIGIMOS A NUESTRA HERRAMIENTA TEXTO Y ESCRIBIMOS EL TITULO DEL HEADER
PASO 6. LUEGO DAMOS CLIP DERECHO A NUSTRA CAPA DEL TITULO Y OPCIONES DE FUCION DISEÑAMOS EL COLOR DEL TEXTO Y TENEMOS
NUESTRO HEADER LISTO PARA USARSE.
BOTTON
BOTTON REALIZADO EN EL SOFTWARE PHOTOSHOP CS5
PASO 1. DISEÑAMOS NUESTRO BOTTON CON LA HERRAMIENTA RECTANGULO LUGO LE DAMOS CLIP DERECHO EN EL RECTANGULO Y
SELECCIONAMOS TRANSFORMACION LIBRE DE TRAZO Y ESCOGEMOS LA OCCION DEFORMAR Y DEFORMAMOS NUESTRO RECTANGULO EN EL CASO
MIO ESTE MODELO
PASO 2. YA TEMOS LISTO NUESTRO BOTTON NOS DIGIMOS A DARLE UN COLOR APROPIADO PARA ELLO NOS DIGIMOS A LA HERRAMIENTA COLOR
FRONTAL.
PASO 3. LUEGO NOS DIRIGIMOS ARCHIVO ABRIR Y SELECCIONAMOS UNA IMAGEN ACORDE A LO QUE VAN A DISEÑAR EL BOTTON EN MI CASO ES EL
ESCUDO DE LA INSTITUCION DONDE REALIZO MIS ESTUDIOS TECNICOS.
LOGO
LOGO REALIZADO EN EL SOFTWARE PHOTOSHOP CS5
PASO 1. DISEÑAMOS UN CIRCULO CON LA HERRAMIENTA ELIPSE DE CUALQUIER TAMAÑO LUEGO NOS DIRIGIMOS A LA CAPA Y DAMOS CLIP
DERECHO, OPCIONES DE FUCION Y ESTILOS CARGAMOS UN ESTILO
LUEGO QUE EMOS CARGADO NUESTRO ESTILO LE INPRECNAREMOS UNA IMAGEN
PASO 2. PARA ELLO ARCHIVO ABRIR COMO PUEDEN VER YO E UTILIZADO UN CAVERNICOLA
PASO 3. LUEGO QUE YA EMOS ABIERTO NUESTRA IMAGEN LA ARASTRAMOS HASTA LA CAPA DE LA ESFERA QUE EMOS DISEÑADO Y COLOCAMOS
NUESTRA IMAGEN EN UN PUNTO DE LA ESFERA
PASO 4. LUGO CON LA HERRAMIENTA TEXTO ESCRIBIMOS UN LEMA, UN TITULO RELACIONADO CON LO QUE VAN REALIAR
PASO 5. LUEGO QUE EMOS CREADO NUESTRO TITULO DAMOS CLIP DERECHO EN NUESTRO TITULO Y CLIP EN LA OPCION DEFORMAR TEXTO Y EMOS
CREADO NUESTRO LOGO
FOOTER
FOOTER REALIZADO EN EL SOFTWARE PHOTOSHOP CS5
PASO 1. PARA REALIZAR NUESTRO FOOTER LAS MEDIDAS QUE E TOMADO SON LAS SIGUIENTES 980X150.
PASO 2. YA QUE TENEMOS NUESTRA CAPA DAMOS CLIP DERECHO EN LA CAPA OPCIONES DE FUCION Y EN ESTILOS ESCOGEMOS ESTILO
TAMBIEN SI NO DESEAN SEGUIR ESTE PASO LO PUEDEN HACER MEDIANTE LA HERRAMIENTA PINSEL Y ESCOGER UN COLOR QUE MAS LES GUSTE
BANNER
BANNER REALIZADO EN EL SOFTWARE PHOTOSHOP CS5
PASO 1. LAS DIMENCIONES DEL BANNER SON DE 620X150
LUEGO QUE EMOS CREADO NUESTRA IMAGEN PASAMOS A PINTAR CON LA HERRAMIENTA PINSEL DE UN COLOR ROJO O EL COLOR QUE MAS LES GUSTE
PASO 2. DESPUES QUE YA LA EMOS PINTADO NUESTRA IMAGEN PASAMOS A CARGAR UN PINSEL O VARIOS PARA ELLO EN LA PARTE SUPERIOR DE LA
IZQUIERDA ESTA LA FORMA DEL PINSEL Y HAY UNA FLECHA DAMOS CLIP EL LA FLECHA Y DAMOS CLIP EN LA SUIGUIENTE FLECHA Y ESCOGEMOS LA
OPCION CARGAR PINSEL
PASO 3. YA QUE EMOS CARGADO NUETRO PINSEL PASAMOS A PINTAR LA FORMA DEL PINSEL EN ESTE CASO EN LOS BORDES
PASO 4. LUEGO QUE YA EMOS PINTADO NUESTRAS FIGURAS ESCOGEMOS UN PINSEL REDONDO Y PASAMOS A PINTAR LAS PUNTAS DEL BANNER Y EMOS
CREADO NUESTRO BANNER PUBLICITARIO
MENU
MENU REALIZADO EN EL SOFTWARE PHOTOSHOP CS5
PASO 1. DISEÑAMOS UNA CAPA CON LAS MEDIDAS 565X38 LA COLOREAMOS
CON LA HERRAMIENTA PINSEL
PASO 2. LUEGO LA ARASTRAMOS A UNA NUEVA CAPA DE 600X250
PASO 3. DISEÑAMOS UNA NUEVA CAPA CON LAS MEDIDAS 100X38 Y LA ARASTRAMOS A LA CAPA ANTERIOR
PASO 4. YA QUE LA EMOS ARASTRADO DUPLICAMOS LA CAPA
PASO 5. LUGO CREAREMOS UNA NUEVA CAPA CON LAS MISMAS MEDIDAS QUE LA NATERIOR Y ARASTRAMOS ASTA LA CAPA PRINCIPAL
LUEGO QUE EMOS RASTRADO TOLAS CAPAS ORGANIZAREMOS LA FORMA DEL MENU
PASO 6. YA QUE TENEMOS LISTO NUESTRO MENU ESCOGEMOS LA HERRAMIENTA DE TEXTO Y ENSAMOS A ESCRIBIR SOBRE EL MENU COMO LO
MUESTRA LA IMAGEN.
PAGE
PAGE REALIZADO EN EL SOFTWARE PHOTOSHOP CS5
PASO 1. PASAMOS CREAR UNA CAPA CON LAS MEDIDAS 366X489 YA CREADA PASMOS A PINTARLA CON LA HERRAMIENTA PINSEL
PASO 2. UNA VEZ YA PINTADA CARGAMOS UN PINSEL PARA DARLE UN
RETOQUE ARTISTICO
PASO 3. ENPEZAMOS APINTAR CON EL PINSEL FORMAS PARA DARLE UN TOQUE LLAMATIVO.