Esto continúa siendo un proyecto

Esto continúa siendo un proyecto, por lo que una meta a cumplir es necesaria, ¿verdad?

Shot At The Night tiene un objetivo muy claro: dar un mayor conocimiento sobre diseño con Photoshop y HTML a través de la realización de diferentes composiciones a cada cual más compleja. No hay una mejor forma de aprender a nadar que tirarse a la piscina.

Comenzaremos desde un punto sencillo, con códigos fáciles de entender y explicados con anterioridad, para comprender qué diablos estamos haciendo y ver el sentido en todas esas extrañas palabras acompañadas con números. Nos enfocaremos tanto en el diseño de posts (mensajes) como de tablones de anuncios o las tablillas. Pese a realizar ese tipo de diseños, los conocimientos que se aplican para la realización de estos se pueden usar para cualquier otro.

Sobre el Photoshop me dedicaré a subir algún tutorial sobre cómo lograr un diseño determinado o explicaré cómo conseguir algún tipo de efecto popular o que suela usarse con regularidad. Me enfocaré en la creación de gráficos de no más de 1000x500px, pues si son imágenes de mayor tamaño se vuelve bastante pesado, aunque para gustos los colores, ¿no? Sobretodo realizaré firmas, avatares, cabeceras y otras imágenes usadas para publicitar páginas en otras o adornar sitios web.

Para poner la guinda al pastel, usaré de ejemplo un par de foros de mi propiedad y facilitaré algunas páginas donde se puede hallar información más detallada acerca de este tema.

Shot At The Night está enfocado a aquel público que deseé aprender sobre este tema, no miramos por darle más prioridad a los jóvenes o a los adultos, cualquier tipo de seguidor está aceptado mientras tenga ganas de sentarse a leer y jugar con los códigos. Sólo aviso que esto son horas de ensayo y error.

El presupuesto de este proyecto no alcanza ni el euro, puesto que reutilizamos materiales que ya de por sí pagamos o hemos pagado, como la luz y un ordenador, además el programa Photoshop se encuentra en la red para la descarga gratuita.

Pequeña introducción al HTML

Aunque el blog está mayormente enfocado al diseño con Photoshop, el HTML también es útil a la hora de pasearnos por internet. No sé vosotros, pero yo suelo pasar mucho tiempo en foros y blogs, sobretodo en foros varios, donde el diseño es una maravilla o vemos tablillas que nos dejan pasmados. ¿Y eso cómo se hace? Con los códigos HTML. Parece complicado, sin embargo una vez los comprendes la cosa va como la seda. No os dejéis intimidar por los códigos, parece que muerden pero al final son muy amables.

Hay dos tipos de elementos HTML en general. Unos pueden usarse de diferentes maneras, otros funcionan como si fueran ambos. Hablamos de:

• Elementos de bloque (block elements): estos pueden contener dentro otros códigos de bloque (divs) o de línea (links) sin problemas, son elementos «grandes».
• Elementos de línea (inline elements): pueden contener dentro otros elementos de línea, sin embargo no podemos meter uno de bloque. Es decir: no podemos incluir un div en un link.

Esto conforma el body de nuestro documento HTML.

ELEMENTOS DE BLOQUE

La mejor forma de pensar en los elementos de bloque es que son como cajas, donde uno puede meter dentro de todo, otras cajas más pequeñas, sobres, papeles... Nos permiten incluir muchos otros elementos. Asimismo, una propiedad fundamental de estas «cajas» es que suelen ocupar todo el ancho del lugar donde están metidos, en otras palabras: siempre medirán el 100% del ancho, no importa lo poco que haya en su interior. Para evitar esto (si es que queremos evitarlo) es añadir una anchura determinadas.

Para ello añadimos «width: (número de píxeles que deseemos de anchura)px». Yo, por ejemplo, le voy a poner 140 píxeles de anchura.

• Quedaría de esta manera:

De esta manera no importa lo que escribamos, la anchura y la altura seguirán siendo las mismas.

<--div style="width: 140px;">De esta manera no importa lo que escribamos, la anchura y la altura seguirán siendo las mismas.<--/--div--->

(Los guiones entre los corchetes y el "div" están para que se puedan ver el código, en realidad no los lleva)

Pero todavía está un poco soso, ¿verdad? Sólo con las letras... Para darle un poco más de color explicaré otra manera de jugar con los elementos de bloque: el fondo. Podemos ponerle un color o una imagen de fondo a nuestra caja. En esta ocasión explicaré cómo añadir el color, es tan sencillo que uno se ríe de ello.

Añadimos (siempre separado por un punto y coma de la anterior característica -estas deben estar cerradas por comillas, sino el código no aparecerá correctamente-) «background: (nombre o código RGB del color deseado)».

• El mismo div añadiéndole el «background»:

Se vería de esta manera.

<--div style="background: tomato; width: 140px;">Se vería de esta manera.<--/--div-->

(Los guiones entre los corchetes y el "div" están para que se puedan ver el código, en realidad este no los lleva)

Por supuesto, esto es sólo el principio, hay muchísimas formas de mejorar nuestro diseño u otras clases de elementos que nos ayudan a mejorar la estética, otras características como la barrita de subida y bajada que nos encontramos a la derecha de las páginas, bordes, efectos... El HTML es todo un mundo y esto un insignificante aperitivo.

Buenos días, tardes, noches

Mi nombre es Alba Pavón, curso primero de bachillerato artístico en la Escuela de Arte San Telmo y quiero darles la bienvenida a Shot At The Night; en esencia proyecto de clase, pero oportunidad al mismo tiempo. Este proyecto trata de dar vida a un blog de tema a elección, uno en el que publiquemos cómo avanza nuestro trabajo, mostrando así los resultados que hemos logrado, además de las entradas afines al tema seleccionado. Por mi parte he decidido enfocarlo al diseño gráfico, pues figura entre mis aficiones y es una de las disciplinas en las que me gustaría especializarme. De ahora en adelante, por un año o más, colgaré tanto diseños que me hayan llamado la atención como tutoriales, bien sea de cómo lograr una determinada composición o nociones básicas acerca del Photoshop CS5 (programa que empleo), también tocaremos algo de HTML, y finalmente algunos datos curiosos.