sábado, 26 de diciembre de 2009

The hidden beach of Lubenice

It might have been snowing here in Slovenia for the last week or so, but I just have to finish my short series of posts about a trip to the Croatian island of Cres a couple of months ago. As I mentioned a few posts back, Lubenice is a village well worth a visit if you happen to find yourself on the island.



St. John (Sveti Ivan) beach bellow the village of Lubenice on the island of Cres is one of the loveliest hidden beaches in Croatia. It is not easily accessible from land - the descent from the village 378 meters above takes 45 minutes and the climb back even a bit more. The little bay can be approached only from two directions - one is a steep, narrow path we took and for the other you need a boat.



When we were still at the top, in the Lubenice village, we thought about not doing the whole thing at all. Dark clouds were starting to role in from the sea. We figured the worst thing that could happen would be some kind of a thunderstorm. Since we were going to get wet in the sea anyway, we decided to go down the path.



After a few minutes we decided it would be best to just keep going.


When we got to the beach we were soaking wet. There we were greeted by a few other adventurers crowded under a small roof trying to stay dry. We joined them and waited for the storm to pass. After five minutes it was all over and sun was shining again. Time to dry wet clothes and to take a swim. It was great!


The afternoon went by all too quickly and it was time to get going. On our way up we saw a person meditating alone on the picture-postcard beach during a magnificent sunset (if you look closely you can see him on the above photo). If that isn't an idyllic way to end the day I don't know what is!


Since the winding path is pretty steep the climbing time depends heavily on ones physical condition.
I guess since we needed almost the same amount of time for the climb as we did for the descent, we are not in such a bad shape after all.


This trip was really lovely and I recommend it to anyone with taste similar to ours. However if you try to do this in top summer season, you might be disappointed with hordes of tourists rushing in on charter boats from nearby towns. Luckily we didn't see any.

miércoles, 2 de diciembre de 2009

Descargas de la plantilla Photoshop del manual Diseño desde cero

Diversos archivos para descarga que serán de utilidad para seguir el vídeo del diseño web desde cero con Photoshop y el manual de maquetación CSS 960 Grid System.

Debido a la solicitud de diversos usuarios y visitantes del material original de Photoshop que estamos utilizando en el manual de maquetación CSS con 960 Grid System, publicamos una descarga que seguro resultará interesante y útil para las personas.
En el manual mencionado, sobre la maquetación web con CSS y uno de los más conocidos frameworks CSS, vimos un ejemplo práctico de maquetación de una página web en un caso real, es decir, cómo tenemos que realizar paso por paso la creación de una web con HTML y CSS a partir de un modelo o plantilla creado con Photoshop.

Por recordar un poco todas las cosas y para los que lleguen de entrada a este artículo sin conocer el material al que hacemos referencia, vamos a poner los link a diversos artículos y vídeos que hemos ido realizando los pasados meses:


Vídeo explicado del diseño de una web desde cero
Caso real de maquetación web con CSS y 960 Grid System
Parte dos de la maquetación web, caso real
Tercera y última parte de la maquetación CSS
Si os fijáis, todos estos materiales están preparados en vídeo, con lo que son un material ideal para aprender y además con la facilidad que da ver tú mismo cómo se han ido realizando las cosas.

Con el paquete de descarga que ofrecemos ahora, ponemos a vuestra disposición los requeridos "materiales fuente" para llevar paso a paso este trabajo de maquetación:


Plantilla original, o archivo PSD con el diseño creado
Archivos gráficos utilizados en el diseño, como iconos
Las páginas resultantes, maquetadas con HTML y CSS y sus distintas imágenes de trozos del diseño para colocar en las webs, extraídas del PSD.

En definitiva, un paquete que seguro resultará de interés para todas las personas que siguen el manual de Maquetación CSS con 96 Grid System.

La descarga está disponible para los usuarios de DesarrolloWeb.com:

Materiales para la maquetación web CSS

Opciones de la herramienta de forma

Veremos las múltiples opciones de configuración de las formas y trazados que se pueden crear con las distintas herramientas de forma.

En el artículo anterior estuvimos comentando las distintas herramientas de forma disponibles en Photoshop. Ahora vamos a analizar casos de uso más avanzados de esta herramienta y vamos a explicar algunas de las cosas que podemos hacer con ellas, como modificar sus trazados, para personalizarlas y adaptarlas a nuestras necesidades.
Como ya hemos visto repetidas veces en el Manual de Photoshop de desarrolloweb.com, todas las herramientas de Photoshop, disponemos de varias opciones que nos aparecen en la barra de opciones de herramienta:





Las opciones de forma funcionan de la misma manera independientemente del tipo de forma que tengamos seleccionada, ya sea un rectángulo, rectángulo con bordes redondeados, formas personalizadas, etc. A continuación veremos una descripción de las opciones posibles para la herramienta de forma, tal como están numeradas en la imagen anterior:
1.- Capas de forma
Crea formas en nuevas capas. Genera una nueva capa para colocar esa forma nueva en una capa independiente.

2.- Trazados
Simplemente se crea el trazado de la forma, pero no se hace nada con él, hasta que no lo indiquemos nosotros. Una vez creado un trazado podremos transformarlo, crear una selección a partir de él, o rellenarlo de color. Pero el trazado por si solo no aparecerá en la imagen y no servirá para nada hasta que realicemos algún tipo de acción con él.

3.- Rellenar píxeles
Esto crea la forma con un color de relleno, es decir, no creará la forma vectorial que estábamos comentando, sino que la dibujará y la rellenará como mapa de bits.

4.- Selección rápida de herramienta pluma
Con estos botones podemos acceder rápidamente a alguna de las utilidades de la herramienta pluma.

5.- Selección rápida de otras formas
Con estos botones podemos acceder rápidamente a otras formas de las posibles con la herramienta de forma.

6.- Combinación de nuevas formas creadas
Permite decir cómo se combinan otras formas y trazados creados sobre la misma capa. Podemos hacer una intersección de las formas, unirlas, restarlas, etc.

7.- Estilos
Permite asignar estilos a las formas que estamos creando, con alguno de los estilos predefinidos en Photoshop u otros estilos que podamos haber creado nosotros.

8.- Color de relleno
Permite especificar el color con el que se rellenarán las formas creadas.

Formas y trazados
Los botones 1, 2 numerados en la anterior imagen permiten hacer formas con trazados y trazados sin más. Es interesante comentar algunas de las cosas que podemos hacer con los trazados.
Como hemos dicho, los trazados en Photoshop tienen la particularidad que se permite transformarlos sin perder detalle en la imagen. Con el botón marcado como 1 (capas de forma) se crea la forma con el color de relleno y esta se encuentra disponible en modo de trazado, para que podamos retocarla si lo deseamos. Por ejemplo podemos hacer una Transformación libre del trazado (desde el menú de edición o con la tecla rápida CTRL + T). Esto nos permite cambiar el rectángulo para adaptarlo a nuevas dimensiones o incluso cambiar el ángulo de los vértices si trasladamos uno de ellos con la tecla CTRL pulsada.

La opción marcada como 2 (Trazados) simplemente crea un trazado. Ese trazado, como se había señalado, no aparecerá en la imagen, simplemente está ahí para que nosotros hagamos algo con él. Podríamos transformarlo, con la opción de transformación de trazado comentada antes, o podríamos crear una selección a partir de él, para luego hacer cualquier cosa con ella, como rellenarla de color. También podríamos crear una forma personalizada a basada en el trazado, que veremos en el artículo de formas personalizadas más adelante, o incluso modificar el trazado con alguna de las herramientas como la pluma.

Para acceder a diversas acciones posibles con el trazado podemos pulsar en la imagen con el botón derecho del ratón y veremos varias opciones. Por ejemplo una de las más útiles es la de crear una selección con el trazado, que hará que se seleccione el área comprendida por ese trazado. Si habíamos creado varios trazados distintos, la selección que se mostrará será la unión de ellos, intersección o cualquier otra operación definida con los botones de las opciones de la herramienta marcados en la imagen anterior en el item 6 (combinación de nuevas formas creadas).

Como siempre, la mejor manera de entender todas las opciones de configuración de las formas de Photoshop, es practicar con las distintas opciones, para poder analizar y entender los resultados obtenidos.

Formas en Photoshop

Cómo realizar formas con Photohop como rectángulos, elipses y otros polígonos. Podemos crear esas formas como trazados o como áreas de color.

En este artículo del Manual de Photoshop vamos a hablar de otras de las herramientas de Photoshop, que sirven para crear diversas formas, de tipo polígono, línea, elipse, etc. Entre las formas de Photoshop vamos a ver varias de ellas simples y más adelante también veremos, ya en sucesivos artículos, que existen formas personalizadas.



Las formas poligonales sirven para dibujar distintas áreas con diversas estructuras. Por ejemplo, la primera que vamos a ver es la forma básica de rectángulo, pero también podemos obtener formas con otras características, como líneas y distintos tipos de polígonos: triángulos pentágonos, hexágonos, etc. Veremos en este artículo también la creación de rectángulos con los bordes redondeados y elipses.

Todas las formas se encuentran disponibles bajo un mismo icono, donde podremos ver inicialmente el rectángulo, pero donde si hacemos un clic con pulsación prolongada se nos mostrarán otras herramientas, que podemos observar en la siguiente imagen.

Herramienta de rectángulo

Con esta herramienta podemos crear rectángulos y rellenarlos de color directamente, o hacer simplemente trazados. En principio, si no hemos marcado otra cosa, se creará un rectángulo con el color de relleno que tengamos configurado en la barra de herramientas como color frontal.

Rectángulo redondeado

Este tipo de forma crea rectángulos donde sus esquinas están redondeadas. Es una manera rápida de conseguir rectángulos suavizados que a menudo dan un aspecto más delicado a los diseños. Con esta forma veremos que aparece una nueva opción en la barra de opciones de la herramienta, que sirve para definir el radio de las esquinas redondeadas.
Forma de elipse

Este tipo de forma crea elipses, de manera similar a los rectángulos. Recordar el uso de las teclas ALT o Mayúsculas, que permiten que la elpise se cree con características determinadas. ALT hace que la elipse se cree en el centro de donde pulsamos inicialmente para iniciar la forma, y la tecla mayúsculas hace que la elipse sea un círculo perfecto, con el mismo rádio en toda la circunferencia.
Forma de polígono

Permite construir otros tipos de formas poligonales, como triángulos, cuadrados, pentágonos, etc. Podemos indicar el número de lados del polígono en las opciones de la herramienta. Los polígonos creados siempre tendrán todos los lados iguales, además, siempre se dibujarán con su centro en el lugar donde hicimos clic inicialmente para crear la forma.
Forma de línea

Forma personalizada

Permite hacer formas de distintos tipos. Esta herramienta también es muy útil, dada la gran variedad de formas que contamos ya con la instalación básica de Photoshop y muchas otras que podremos conseguir instalando paquetes de formas, o creándolas nosotros mismos. Debido a las múltiples opciones de las formas personalizadas, merece la pena dejarlas para un artículo posterior que presentaremos también en desarrollo web .com.