Admin
Admin
Cantidad de envíos : 30
Fecha de inscripción : 17/05/2007
 |  Tema: †-† COMO REALIZAR UN TUTORIAL  Jue Mayo 31, 2007 9:39 pm | |
| REALISAR TU PROPIO TUTORIAL ( JORGE WEB MASTER) TRILOGIA-NAZI
COMO HACER UN TUTORIAL En éste tutorial tal y cómo me pidieron en el foro, voy a tratar de explicar cómo se hace un tutorial. Vaya por delante que no existe una única forma de hacerlos, ya que cada maestrillo tiene su librillo, pero yo voy a explicar cómo hago los tutoriales que podéis encontrar en ésta web. Primero vamos a repasar el material que utilizo para trabajar con mis tutoriales:
- Adobe Photoshop 6
Photoshop cómo muchos sabéis es un programa de retoque fotográfico impresionante. Para mí es sin discusión el mejor de cuántos existen. Las posibilidades y la potencia de éste programa son escalofriantes. Para mí junto a Dreamweaver, son las mejores herramientas posibles para un webmaster.
- Macromedia Dreamweaver MX
En mi opinión y la de muchísima gente, el mejor editor HTML que existe en el mercado. La sencillez de manejo básico que tiene es admirable y hace que sea un programa con el que la gente se maneja bastante bien una vez que lo ha "trasteado" un poco. Imprescindible.
- Adobe Image Ready
Éste fabuloso programa de animación de imagen viene integrado dentro de photoshop. Es ideal para hacer banners, botones con comportamientos, gifs animados, etc... Si de por si Photoshop es lo mejor, encima nos regala con éste magnífico programa de animación.
- Crazy Browser
Bueno y éste último no es más que el explorador de internet que uso. En realidad es una especie de add-on de Internet Explorer, con la ventaja fundamental que te bloquea los pop-ups. No sé cuánto hace que no veo un pop-up 
Una vez os he presentado mis herramientas de trabajo, vamos a explicar cómo hago mis tutoriales ¿os parece?. Lo primero es tener claro sobre que queremos hacer nuestro tutorial (o manual), para ilustrar este tutorial, vamos a imaginar que queremos hacer un tutorial sobre el registro en miarroba.com de un subdominio mismamente. Lo primero será entrar en la página principal de miarroba.com y hacer una captura de pantalla (presionando la tecla Impr Pant que está justo a la derecha de la tecla F12 (al menos en los teclados españoles claro, en otros no sé).
A continuación lo que haremos será abrir Photoshop y crear un documento nuevo pulsando simultáneamente las teclas control (o ctrl) y N. Una vez se nos abra el nuevo documento pulsaremos simultáneamente las teclas control y V. Con ello visualizaremos en photoshop lo siguiente:
En la imagen vemos cómo se muestra la página principal de miarroba en el nuevo documento que abrimos en photoshop. Lo siguiente será "cortar" el trozo de la imagen que nos interesa. En éste caso lo que necesitamos es un trozo del menú de miarroba que figura a la izquierda. Para ello utilizaremos la herramienta selección rectangular, la cual podéis ver que está seleccionada en la barra de herramientas de photoshop que figura a la derecha de la imagen (ésa alargada). Veamos cómo aparece la imagen con la selección rectangular ya hecha:
En ésta nueva imagen vemos cómo hay una especie de cuadrado de línea discontinua en torno al trozo de pantalla que queremos cortar para usarlo en nuestro tutorial, ahora lo que procede es cortar. Para ello pulsaremos simultáneamente las teclas control y C. Con ello ya tendremos copiado en el portapapeles ese trozo de la imagen, lo siguiente será abrir un documento nuevo (control y N) y pegar en él la selección pulsando las teclas control y V (cómo ya vimos antes). Veamos que sucede:
En ésta nueva imagen vemos cómo en el nuevo documento aparece tan sólo el trozo que nos interesaba el cual utilizaremos en nuestro tutorial para ilustrar la explicación. Ahora lo que deberemos hacer es guardar esa imagen optimizándola para web (de ése modo la imagen ocupará mucho menos). Para ello desde el menú de photoshop iremos a "Archivo" y luego "Guardar para web". Se nos mostrará entonces lo siguiente:
La imagen de la izquierda muestra el original sin optimizar y la de la derecha cómo quedará una vez la guardemos optimizada, fijáos debajo de cada una de los imágenes sus tamaños, mientras el original pesa 51,6 Kb la optimizada tan sólo pesa 1.34 Kb... con lo que la velocidad de carga en la web de la imagen será instantánea. Impresionante ¿eh?
Esta parte es muy importante y hay que tener en cuénta muchos factores (aquí habría que ver ya un tutorial de photoshop, pero vamos a ver los más elementales). Por ejemplo, lo primero será decidir que formato queremos que tenga nuestra imagen, si os fijáis en los campos y botones de la derecha, vemos un campo que pone GIF, bien, ahí es dónde le diremos a photoshop que formato queremos. ¿Cual elegir? bien, lo normal es elegir GIF o JPEG. Si nuestra imagen tuviera transpariencia o fuese animada, obligatoriamente elegiriamos GIF, de no ser así podremos elegir JPEG que es un formato con algo más de calidad de imagen que GIF.
También podemos asignar la cantidad de colores de la imagen entre otras cosas, pero por ahora nos quedamos con éstas que son las más importantes para el tema que nos ocupa en el presente tutorial. Una vez tuviéramos claro todo, pulsaríamos el botón que figura arriba del todo OK. Para finalizar elegiriamos un nombre para nuestra imagen y decidir dónde lo queremos guardar. Lo mismo haríamos con todas las imágenes que usemos en el tutorial. Os aconsejo que hagáis una captura de cada paso que déis para incluirlo en el tutorial, así vuestros usuarios comprenderán mejor lo que estáis explicando.
Y bueno, lo último ya sería ir a Dreamweaver y montar el tutorial con mucho texto explicando lo mejor posible los pasos a seguir y usar las imágenes para mostrar gráficamente los aspectos más relevantes.
Así es cómo básicamente hago los tutoriales, luego para animaciones usaría Image Ready, pero eso no es imprescindible para hacer un buen tutorial. Lo más importante y necesario, lo he reflejado aquí.
| |
|
