xhaos

Este tutorial apunta a mejorar gráficamente un post de manera sencilla y por sobre todas las cosas “rápida” mediante templates. Yo voy a dejar algunos diseños y aquellos que quieran contribuir pueden subir en los comentarios los suyos, de esta manera podemos armar una buena librería. (si esto funciona, después armamos un post con las librerías y sus respectivos autores). Si la idea trasciende y le gusta a los administradores, se pueden armar templates para las distintas categorías con la colaboración de la comunidad. Para quienes no saben un template es una plantilla pre diseñada que permite personalizar los contenidos independientemente de la estructura. Por si no queda claro, estamos hablando de poder editar. Esto es una ventaja desde todo punto de vista dado que no es necesario tener profundos conocimientos sobre las aplicaciones que se utilizan, tan solo nociones específicas a la hora de presentar algo (en este caso: Photoshop). El aspecto final dependerá de nuestro gusto a la hora de elegir el template. Avancemos sobre lo básico que hay que saber Diseño. Photoshop. Alojamiento de Imágenes. Código Html. En mi caso me gusta que la parte superior de un post identifique de que se trata, así solo sea un título, que ofrezca una síntesis de lo que se va a ver luego. Llamaremos a esto Encabezado. El formato que recomiendo a la hora de guardar imágenes es JPEG y que no pesen más de 50 kb (ya veremos por qué), en cuanto a las dimensiones 750 x 173 píxeles funciona bien (si les gustan los números redondos usen 170 : ) ). Visualmente queda atractivo usar barras para los títulos, 750 x 23 píxeles. Por último para links y download, podemos combinar una imagen + algo de código, o puramente código y a veces es mejor recurso que usar el link pelado (sobre todo si son muy largos). Estructuralmente sería así… De no tener el photoshop Aquí hay una versión pocket del CS3 que sirve para los propósitos y está en español. El Pack de Templetates lo descargan de AQUÍ. En el Rar, van a encontrar varios ficheros en formato PSD, que es la extensión que identifica al Photoshop. Las Carpetas indican si son Encabezados, Barras o Links. Probemos con los Encabezados. Hay dos Archivos allí Encabezados 1- Encabezados Simples (incluye 2 diseños) 2- Encabezados Tipo Pc (incluye 2 diseños) Veamos Su Preview (reducida en tamaño y colores) Todos lo archivos poseen un fondo gris en degradado, esto es por que la página de taringa tiene un tenue fondo en degradado que va hacia el blanco. Los archivos concuerdan perfectamente con el degradado web. ¿Porqué usar un fondo cuando podría ser con un gif transaparente? Por la calidad en la resolución que ofrece formatos como el jpeg, en comparación de los 256 máximos que ofrece el gif. Hagan clic Aquí y se abrirá un documento de texto con los 4 links para hacer la prueba. Para probar como quedan pueden hacer una prueba, abran un post nuevo (agregar) y copien en la primera línea (sin espacio) algunos de los 4 imágenes tal cual como están. Irónicamente los hice gif, pero son a modo de prueba, los que ustedes guarden serán jpeg. Ahora bien, si hasta aquí siguen interesados y quieren usarlos tienen que hacer lo siguiente, si tienen el Photoshop instalado hagan doble click sobre el archivo, en este caso Encabezados Simples. Se abre el programa con el archivo. Busquen en el programa la solapa capas. Si no la ven es porque sin querer cerraron la ventana, presionen F7 y aparecerá. Capas Verán 3 Ojitos, Arriba de todo dirá: Añada su Texto, Luego Fondo Simple I y Finalmente Fondo Simple II. Al principio se verá solo un diseño, para ver el otro deben hacer click en el 2 ojito de arriba hacia abajo (A.), el que dice fondo simple I (la lógica es que oculta el contenido de la capa, deja de mostrar) Escogemos uno o el otro, si nos gustó más el anterior volvemos a hacer click donde antes estaba el ojo. Ahora hay dos formas de cambiar el Texto. 1. Con cuidado hacen doble click sobre el diseño de la t y el todo el texto se selecciona, escriban lo que quieran. (B.). 2. La otra es ir a la barra de Herramientas y Marcar la T de Texto (C.). Es difícil que esta barra no esté, pero de ser así van a “Ventana” > seleccionan “Herramientas”. Barra de Herramientas Luego se aproximan al texto, si prestan atención verán que el cursor cambia de forma cuando están sobre el texto a seleccionar (no tiene un recuadro de puntos, esto quiere decir que están sobre una capa de texto). Pintan como en cualquier procesador de textos todo el texto de Izquierda a derecha y escriben lo que quieren. Se tarda más en leerlo que en hacerlo. Pueden cambiar la fuente, estilo, tamaño, alineación, o el color, para eso hay una barra que se activa cuando seleccionan texto. Para opciones más específicas pueden hacer click en el icono indicado (E.) y verán la ventana que aparece más abajo con más opciones. En el caso que quieran mover las letras de lugar Usen (D.) de la barra de herramientas asegurándose que esté seleccionada la capa de texto. (Barra de Herramientas). Tomen en cuenta que si escriben algo, la capa de texto mostrará las primeras palabras que escribieron (igual siempre estará identificada con la T. para ver lo que digo vean(B.) más arriba donde hablábamos de las Capas). Dejé Guías, que son unas pequeñas líneas celestes que permiten orientarse en cuanto al centrado, no se verán al guardarse el documento. Exploren, muevan todo, prueben que existe la opción de Volver al principio usando F12. Guardar el Archivo Ahora bien, una vez que estamos conformes con lo que hicieron, tenemos que guardar el trabajo. Vamos a Archivo > Guardar para la web. Se abre una solapa con 4 ventanas, la primera es Original (arriba Izquierda) no la tocaremos, vamos a la de Arriba derecha, hacemos click para seleccionarla. 1. Si no está seleccionado, marcamos la opción JPEG. 2. Nos Fijamos el Tamaño del archivo, no tiene que superar los 50 kb. 3. Subimos la calidad o la bajamos para que nos quede de unos 49 kb de tamaño final, puede pasar que la calidad sea 100 y no supere los 49 kb, lo que es óptimo. 4. Guardamos. Listo el asunto. Para las barras, el tema se trabaja igual, le dejo el preview con los respectivos nombres. Ninguno de estos motivos está en el “Estilo” del Photoshop, para dar más opciones y no repetir. Vista claro es el estilo de barras que tiene este post. Si les quieren cambiar el estilo, tanto al texto como a la barra, solo seleccionen lo que quiren modificar (uno a la vez) y vean la solapa de Estilos. La solapa de estilos tiene este aspecto, se carga predeterminada con el programa, si no la encuentran en el la opción “Ventana” > “Estilos” El programa trae por defecto varias que no están cargadas, presionen 5. y seleccionen por ejemplo “botones”. El tema es super simple, marcan la capa y aplican el estilo predefinido. Hay estilo para botones, otros para texto. No todos los efectos quedan bien en los textos o en los rectángulos, es cuestión de investigar, probar y equivocarse. El miedo a error anula la creatividad así que prueben. Hasta acá sabemos usar un encabezado y una barra. Para los que quieran probar todo desde cero, les dejo el fondo copian con el botón derecho, van al photoshop, y hacen: Archivo > Nuevo. El photoshop ofrece un archivo del tamaño de la imagen del portapapeles, Edición > Pegar y tienen el fondo en una capa. El servidor de www.subir-imagenes.com me funciona muy bien, permiten alojar imágenes hasta 50 kb por eso la recomendación anterior de no excederse. Pudiendo usar cualquier servidor de host, ¿porqué usar este? Porque te da todos los códigos escritos. Subir una imagen, no pasa nada… pero cuando son 20 o 30, ahorrarse el tiempo de escribir el código es valioso. No intenten registrarse ya que no funciona. Van a la pagina principal, escriben su mail (conviene tener escrito el mail en el notepad (bloc de notas) si son muchas) ponen examinar y suben el archivo que quieren. Les envían un mail que llega instantáneamente con un link (es el último el que tienen que usar, el de no registrados). En mi caso abro una carpeta por web y uso una regla para que se agrupen, si se pierde el link o por muerte súbita de la pc, no recuperan más el trabajo. Si quieren omitir todos estos pasos, la versión en ingles, sube directamente sin mail y ofrece las imágenes “Originales” (con las dimensiones que uds. Le dieron, sin las miniaturas), pero estén atentos a guardar los links. http://www.upload-images.net/ Para la versión en español desde el mail les abre una página con todos los códigos posibles. Los primeros son de miniaturas, busquen los que están al final que dice “Originales” Encuentren: Código para insertar la imagen en sitios o foros, copiar y pegar: Verán algo como esto. ¿Que quiere decir esto?, lo que seleccioné en amarillo, es la imagen que subí, el resto es un link que se activa cuando hacemos click sobre dicha imagen, esto obviamente cuando copian y pegan esto dentro del post. ¿Que hacemos entonces? si copian lo que está en amarillo, en el mensaje del post, aparece la imagen únicamente, estén atentos a los corchetes [ ] y a las barras / de más o de menos, dado que el copiado puede no resultar del todo preciso, tiene que estar [img.] la dirección de la imagen [/img.] al final todo sin espacios y sin el punto que puse al lado de la g. Ahora bien, ¿puede ser de utilidad el código entero? Por supuesto, cambien la url que está en celeste, por una que quieran linkear y tendrán un bonito link. Como se sabe que es un link, por un recuadro que aparece. Les dejo el botón de bajar con un ejemplo del link. Para links o descargas, les dejo unas imágenes ya subidas, tan solo le colocan la url como expliqué anteriormente y listo Ver. Ya tenemos 3 recursos hasta el momento. Iba a escribir sobre los códigos vB, pero está página los explica muy bien. Le va a servir a la mayoría a mejorar su post. http://www.torobt.com.ar/misc.php?do=bbcode Explica como por ejemplo hacer una cita, busquen quote, acá dejo ejemplo de comandos combinados. Cita: Diálogos de Dr. House: House: Para mí que almacena cocaína en el sótano. Foreman: Pero ella da clases en un jardín de infantes. House: Si yo tuviera 5 años, confiaría ciegamente en ella. ----------- Paciente: "Quiero morir con un poco de dignidad." House: Eso no existe. Los cuerpos se deterioran; a veces a los noventa, a veces antes de nacer; pero siempre sucede sin un atisbo de dignidad. Tanto si no puedes andar, ver o limpiarte el culo, siempre es horrendo, siempre… No se puede morir con dignidad, se vive con ella. ----------- Dr. House: "El 30% de los padres no saben que están criando al hijo del otro" Dr. Foreman: "He leído que la paternidad falsa no pasaba del 10%" Dr. House: "Ésa es la versión de las madres" Les aconsejo no hacer pruebas en los comentarios directamente ya que no podrán editar luego, prueben en “subir archivos” cuidando de no presionar “ok, está perfecto”. Algunos comando funcionan, otros no… prueben. A los que se prendan a armar templates súbanlo por favor con un preview. Una vez que se le toma la mano a esto, es muy rápido, es cuestión de ser organizado. En mi caso abro un procesador de textos, y voy armando lo que quiero que se vea, inserto la imagen que se vería en la web y abajo le pego el link (en código con el ) de donde está alojado, una vez que está listo seleccionás todo y lo pegás en block de notas, las imágenes se van y solo quedan los códigos, revisas, lo pegás en el post y listo. Si algún novato está buscando recursos para obtener puntos, no descarte el darle un bonito aspecto, cuidando la estética, cualquiera se da cuenta cuando un post está bien trabajado, cuando se le dedicó tiempo y esfuerzo. No den nada por sentado, como si quien leyera el post supiera todo lo que ustedes saben. Y mejor que repostear, es armar algo interesante con muchos post. Como decía Goethe “lo importante no es hacer cosas nuevas, sino hacerlas como si nadie las hubiese hecho antes. Si les gusta, les sirve, no duden en comentar. Rualgar, MrTroy, Braku, jhox123, Fruxzon y Feanaro quienes me hicieron full user por el post de la Biblioteca Digital. (si, si tengo algo con las Bibliotecas, las librerias, etc) Saludos a Todos los Taringueros Descargar Templates.