Taller de Adobe Photoshop: Práctica

¡Hola, alumnos! El tiempo pasa volando y ya estamos en la quinta clase del Taller de Adobe Photoshop. ¡Nuestra primer práctica!

Pero quizá les sorprenda que haya tanta teoría en la práctica, jejeje, esto es porque los que van a practicar son ustedes. Hoy comenzarán a diagramar sus sitios web, pero verán que hay muchos pasos previos al diseño en sí. ¡Comencemos!

Photoshop es una excelente herramienta para diseñar la plantilla de nuestro sitio web. Al final del curso veremos que se puede hacer un sitio enteramente con Photoshop (aunque lo más recomendable es usar DreamWeaver para optimizar la plantilla y terminar el sitio).Volviendo al tema, es importante conocer las herramientas que ofrece Photoshop a la hora de diseñar un sitio web, las cuales veremos a lo largo del taller.

Pero un sitio web no sólo es su estructura, también tiene contenido (imágenes, textos, etc). Por lo que también es importante saber cómo generar ese contenido.

Comenzando a diagramar tu Sitio Web

Si queremos hacer bien las cosas, el diseño de nuestro sitio comenzará en una hoja de papel. Allí volcaremos nuestras ideas.

Hay que tener en cuenta que el sitio debería tener una buena estética, pero sin descuidar la accesibilidad ni la usabilidad, es decir que el usuario pueda comprender de un vistazo todo lo que ofrece el sitio, cómo se accede a ello y que pueda “usarlo” (navegarlo) con facilidad.

En los ejemplos que veremos no nos vamos a volver locos con diseños archi-complejos, porque sabiendo diseñar una página estándar tendremos los conocimientos para hacer después algo más creativo.

La primera pregunta es: ¿De qué tipo de sitio se trata? (Comercial, institucional, un portfolio, un blog, etc).
La segunda: ¿Cuál será el público de mi sitio?

Teniendo en cuenta estas dos cuestiones básicas, podemos tener una idea de qué tipo de diseño realizaremos, si será más o menos complejo (¡ojo! complejo no significa complicado), formal o informal, etc. Y también qué elementos voy a necesitar en él (carrito de compras, botoneras extras, íconos, etc).

Un sitio básico puede tener una o más barras horizontales superiores, barras verticales (columnas), un sector central para el contenido y una barra horizontal inferior (pié del sitio).

Elementos que lo conforman

No hay límites para esto, pero generalmente se utiliza un banner principal, con una imagen, tal vez un texto integrado a la imagen o el logo de nuestro sitio, una barra de navegación (dividida en botones, donde cada uno nos llevará a una sección distinta del sitio), que puede ser horizontal o vertical, y el cuerpo o sector donde irá el contenido propiamente dicho.

En base a esto podremos ir pensando cómo irán distribuidos estos elementos en el diseño de nuestra página. Luego de bocetarlos en papel, para tener una idea más clara de cómo quedará finalmente, podemos dedicarnos a conseguir los recursos, imágenes, íconos, tipografías, etc.,etc., etc., que incluiremos, ya sea que vayamos a retocarlos o no.

Incluso podemos buscar varias fotos que nos interesen para (luego veremos cómo) fusionarlas en una sola imagen, una especie de collage (bien hecho) como se suele ver a menudo por la web.

Tarea nº 1: Piensen en lo explicado, creen un sitio (”en una hoja de papel”) y asígnenle un nombre de dominio (imaginario, estilo: “pepito.com”). Elijan la estructura que más les convenga y los elementos que necesitarán (por el momento céntrense en la página de inicio).

Tarea nº2: Recolecten por la web todos los recursos necesarios (fotos, íconos, etc.) que crean que pueden ser útiles. Nada está de más en esta etapa. Pueden buscar imágenes desde Flickr o a través de Google (como haremos un sitio para practicar, no importa qué tipo de imágenes usemos, pero luego tendremos que usar imágenes libres de derechos, al momento de publicar un sitio real).

La interfaz del Sitio

Todavía no nos meteremos a diseñar la interfaz, pero a partir de esta clase comenzaremos a ver varios ejemplos prácticos que nos permitirán hacerlo más adelante.

Lo que sí haremos es plantearnos qué elementos reaccionarán de una manera u otra frente a una acción del usuario (por ejemplo: un botón que cambia al pasarle el cursor por encima, un campo que se expandirá al agregarle más contenido, etc).

Es importante que realicen este trabajo porque en base a esto haremos los ejercicios de las clases siguientes.

Boceten todo en papel, miren infinidad de sitios por la web para aprender cómo se comportan, qué cosas están buenas y cuáles no, etc.

Para terminar la clase quisiera decirles que no se desanimen porque no van a usar Photoshop en esta primera práctica. Todo Diseñador Gráfico sabe que el trabajo principal se realiza fuera de la PC, sobre papel y en la cabeza.

<< CLASE ANTERIOR


0 comentarios to "Taller de Adobe Photoshop: Práctica"

Publicar un comentario en la entrada

Blog Archivo

Subscribete via E-Mail

Subscribete via RSS!

Ingresa tu email para:
Recibe actualizaciones del Blog.

Etiquetas

16-bit 2.0 2012 256 colores 2d 3 404 5 8 acelerar Acer Aspire ActionScript ADD-ONS addon adobe adobe air Adsense aerogarden agilidad airbender AJAX alarma alien all your base alta definición Android angulacion answers API APIs aplicacion aplicaciones Apple apps archive Argentina ask atajo atajos de teclado ataque audio avance avatar aventura grafica back background backtweets balsamiq mockups banda bang banners barcelona barra lateral bases de datos Batacazo bateria bbcode bear bebé Biblioteca Virtual big bing BitDefender BitTorrent blekko Blog blogger bloggers blogósfera Blogs bocetos bollywood bordes botánica brickify brush buenos aires buscador búsqueda avanzada cache caja calendario calidad cámara web canciones Canvas carrusel catástrofe ceguera de banners celular CEO charla chpimunk chrome chrome web store chromium chuck norris cine Cisco cita cliente ftp cloud cluster Cms cocina codec código coleccion color colorotate columna comercio commodore 64 compatibilidad Competencia compositio Comscore comunicacion Comunidad comunidad online Conferencia configuración consejos contenido content copia correo correo electrónico cotidiano cpanel Creatividad criminal cross-browser cse CSS CSS3 cubo cuenta cuentos cultivo Curiosidades curso photoshop Cursos daisies date Debian degradé dell desaparecer desarrollo web descarga Descargas descomprimir desfragmentar despertador despertar deviantart DHTML Digg diseñador Diseño Diseño Grafico Diseño Gráfico diseño web Disney dispositivo dispositivos moviles dispositivos táctiles div dominio dramatic dropbox duck go e-book e-commerce e-commerce day e-mail EBE ecología editor educación a distancia educativo Educativos Niños efecto efectos ejemplo emblema emprendimiento emulador emuladores encabezados encuesta enlace episodios error escritura España estadística Estados Unidos estilo estudio etica evento Eventos Excel exportar extensión extensiones extraterrestre Facebook facebook connect garage fc64 feeds Fiberparty film Filosofía Firebug firefinder Firefox firmware fixes Flash flex 4 Flickr fondo fondos font font dragr form formularios foto Fotografía Framework freelance fuente fuentes future FXG g1 gadget gadgets games gaming gazelle geek gestion gestor de contenido gestos gestuales gesture ghajini gm730 Gmail Google google analytics google app Google Calendar Google Chrome Google Docs gradient gradiente gradientes gráfico gran torino gratis groupon guerra guia h.264 habla hack Hackers handle handler hardware herramientas gráficas hitchcock hollywood homepage horizontal hover HP html HTML válido HTML5 HTTP hub huerta IBM icono IE illustrator imagen Imagenes imágenes importar impress inclinacion indio infecciones info-box infografías iniciador Inkscape inspiracion interactivo interfaz Internet Internet Explorer interno invasión investigación iPhone iphone os iPod island istick IT iTunes U jackson JavaScript jerarquía jetpack jQuery jQuery TOOLS jsc64 juego Juegos lanzamiento laptop lego lenguaje Lenovo Lg libre librería libro limpieza Links Linux literatura lógica logo logos logotipo lolcat Lotería love luca lucasarts luces luminoso luz Mac mac book pro mac os x MacBook macro mago Malware manejo mantenimiento manual mapa mapeo maquetación marciano Marketing mascara mascota McBook medicion medio ambiente meme memoria mente menú metafilter metropolis michael microsoft Mobile Learning mockup monkey moonwalker mootools moousture motivacional motor de busqueda motores de búsqueda mouse mouseprobe mov movil mozilla Mozilla Firefox Mozilla Labs mp3 MS Office mujer maravilla multimedia MultiTouch música MXML MySpace MySql N97 napkee navegación Navegador navegadores networking New York nightly nihilogic no ser encontrado nodos Nokia notebook noticias Novedades ochentoso oferta offers oficial online Open Source Open SUSE OpenOffice opera operativo oportunidad optimización orden organizacion orgullo os oscurecer oscuridad oso Outlook oz page speed PageRank pagespeed pageviews panaderia Panda paneles pantalla pantallas táctiles parasitos PDF peekfeed película pencil peoplebrowsr perfil pestaña photoshop photoshop clase 2 PHP php 5 Picasa picker pinceles pingie piratas pirates plagio plantación plantar plantilla plastic logic Plugin plugins pocket yoga podcasts port portal portátil posicionamiento powerpoint ppc prejuicio preparacion presentación Productividad Programación programas promocion protofish prototype proyecto prueba PSD Psicología public Publicidad puerto QEMU quickoffice quicktime quote rafael jimenez rank Recursos Red red social reddit Redes sociales reloj remake reproductor reseña resolución respaldo resultado retro robo rojo RSS rubik Ruby rust Safari Salud sans-serif sclipo script sculpting sdk seleccionador SEO serie serif SERP server servidor servidor web set shadow share sherlock shortcodes shuffle sidebar sidepost simple simpson Sin clasificar sistema sistema operativo sistemas operativos sitios web slideshow smart smooth SMS snow leopard social sociedad Software Software educativo software libre sombra sonido soundmanager2 spam spreadsheet SQL Squeeze startup steps left store streaming subdominio success suckerfish sun microsystems tablas table tabs tactil Taller de Fotografía Digital Taller de Photoshop taller photoshop Talleres Tarjetas de Crédito teaser tecnica Tecnologia teddy telefono television telltale template templates textbox the theme Themes theora thumbnails tienda time tipografía tipografias tips titulares to touchscreen tower defense trailer transform transition tres Troyano Troyanos truco Trucos tutorial photoshop tutoriales TV tweet tweetstats Twitter unplugged Usabilidad USB usuarios Utilidades para PC Utilidades para tu web variables vector vegetales velocidad venta Ventas verde verdura version video videojuego videojuegos videos Videos de Música Peruana viernes Viernes Unplugged VirtualBox Virus Visas VMware voucher w3c wallpaper wallpapers web Web 2.0 web participativa webcam WebKit webm webmaker Wi-Fi widescreen Wikipedia Windows Windows 7 Windows Mobile wiz wizard wolfram wonder woman Word Wordpress WorldBuilder wwdc 09 XHTML yahoo Youtube yui zip