INDICE...La cuarta opción es la herramienta de selección rápida y si dejamos pulsado la opción...
25
Transcript of INDICE...La cuarta opción es la herramienta de selección rápida y si dejamos pulsado la opción...
INDICE
1. Crear Documento (pag. 3).
2. Herramientas Básicas (pag. 5).
3. Cajón de Capas (pag.8).
4. Edición de una imagen (pag. 12).
5. Creación Imagen Página Web (pag. 14).
CREAR DOCUMENTO
Creamos un documento nuevo (Archivo/Nuevo).
Al ir a crear el nuevo documento podemos comprobar que podemos crear la imagen
del tamaño que queramos ya sea dándole los datos en píxeles, centímetros, etc.…
También tiene la opción de elegir ya tamaños predefinidos estándares. Si elegimos en
la opción predefinir la opción de Papel internacional, directamente nos aparecerá por
defecto el papel A4 con su respectivo tamaño.
Y dentro de tamaño tenemos los tipos de papel más estándar.
HERRAMIENTAS BÁSICAS
Ya tenemos creado un documento nuevo (en este caso he creado un documento de
1920x1080 px)
La barra que nos aparece a la izquierda será la barra de herramientas que podemos
usar. El primer tramo que nos encontramos podemos decir que son las herramientas
de selección y recorte.
La primera opción es la herramienta de mover. Con esta podremos mover las
capas (más adelante explicaremos que es una capa) que tengamos creadas por todo el
documento.
La segunda opción es la herramienta de marco rectangular (es la que viene por
defecto seleccionada) pero si dejamos pulsada la herramienta nos aparecerán las
demás herramientas de marco que existen pudiendo seleccionar la que necesitemos.
Con cualquier de estas herramientas de marco podremos hacer una selección en la
capa que deseemos con la diferente forma que hayamos seleccionado.
La tercera opción es la herramienta lazo (es la que viene por defecto
seleccionada) pero si dejamos pulsada la herramienta nos aparecerán las demás
opciones de esta herramienta.
Con estas herramientas podemos realizar selecciones que no tengan formas
geométricas como en la herramienta de marco.
La cuarta opción es la herramienta de selección rápida y si dejamos pulsado la
opción nos aparece la herramienta de varita mágica. Estas dos herramientas nos
valen para realizar selecciones rápidas de una capa como por ejemplo si queremos
seleccionar todos los blancos de una capa.
La quinta opción es la herramienta de recorte. Con esta herramienta podremos
realizar recortes de tamaño del documento, acortarlo tanto vertical, como
horizontalmente.
Y por ultimo tenemos la herramienta cuentagotas que nos sirve para poder
seleccionar un color del documento.
En el segundo tramo nos encontramos con las herramientas de pintura.
De las cuales las que más se utilizan son:
La herramienta pincel que nos servirá para pintar del color que queramos.
La herramienta tampón de clonar con esta herramienta podremos seleccionar
una parte o punto del documento y podremos ir clonando esa parte seleccionada en
donde necesitemos.
La herramienta borrador con el que podremos borrar parte del lienzo.
Y la herramienta de degradado con el que podremos realizar degradados de
color.
El siguiente bloque serían las herramientas que principalmente vamos a usar para
crear más adelante la imagen de nuestra página web.
Tenemos la herramienta pluma que sirve para realizar trazos de manera
detallada ya sean rectas o curvas.
La herramienta de texto nos permite introducir texto en el documento.
La herramienta de selección de trazados nos permite seleccionar un trazado que
se haya creado anteriormente y moverlo.
Y por último, la herramienta que nos sirve para crear dependiendo de cual
elijamos formas rectangulares, circulares o formas libres (esta será una de las
herramientas que usaremos principalmente para crear nuestra imagen de la web).
La última parte de la barra de herramientas de la zona izquierda contiene:
Tiene la herramienta mano que nos permite desplazarnos por el documento si
estamos con zoom en él.
La herramienta zoom que nos permite como dar más zoom a la imagen o
disminuirlo.
Y la parte donde seleccionamos el color que vayamos a utilizar , cada cuadrado
podrá guardar un color diferente. Pinchando en uno de los cuadrados nos da la opción
de seleccionar el color que queramos.
Recordar que al pinchar en cada una de las herramientas, en la barra superior os
aparecerán las propiedades de esa herramienta.
CAJÓN DE CAPAS
En la parte derecha inferior nos encontramos con el cajón de las capas que tengamos.
Esta parte es donde encontraremos las capas que tengamos. Por defecto al crear un
documento nuevo vacío se crea una capa llamada Fondo y que está bloqueada (dando
doble click encima del candado se desbloquearía).
Vamos a realizar un ejemplo para ver como se manejan las capas.
Ya teníamos creado anteriormente un documento en blanco, pues ahora vamos a abrir
una imagen. Al abrir una imagen nos pregunta
le decimos que no modificar y pulsamos OK.
Si nos fijamos tenemos ahora dos pestañas, una con el documento en blanco y otra
con la imagen que acabamos de abrir. Pues ahora vamos a pasar la imagen al
documento en blanco, para ello seleccionamos la herramienta de mover y
arrastramos la pestaña de la imagen un poco hacia el centro del documento y
soltamos.
Ahora pinchamos en la imagen y la soltamos dentro del documento en blanco
(recuerda que tienes que tener seleccionada la herramienta de mover).
Como vemos, se nos ha pasado la imagen al documento en blanco, ahora ya podemos
cerrar la imagen o volvemos a cogerla y la arrastramos hacia donde tenemos las
pestañas de imágenes (en este caso la voy a volver a arrastrar a la zona de las
pestañas).
Al pinchar ya en el documento que hemos creado vemos que ya tenemos la imagen en
el documento en blanco, y se observa en el cajón de las capas que se nos ha creado
una capa nueva llamada Capa 1. El ojo que aparece a la izquierda nos indica si la capa
esta visible o no. Si pinchamos y no aparece el ojo la capa no se verá.
Ahora esto quiere decir que la imagen es la Capa 1, si queremos ahora realizar
cualquier cosa con esta imagen debemos, antes de nada, seleccionar la capa dándole
un click en ella y, a partir de ese momento, podremos realizar lo necesario con esa
capa.
Para cambiar el nombre de la capa es suficiente con dar doble click encima del
nombre) (es muy recomendable dar nombres a las capas para poder diferenciarlas
rápidamente en el caso de tener muchas capas).
Ahora por ejemplo vamos a ponerle un titulo a nuestra imagen.
Seleccionamos la herramienta de texto y hacemos click en una parte del
documento y escribimos “Medusa” (si nos aparece en un color o tamaño que no
queremos después de escribir seleccionamos lo que hemos escrito y, en la barra de
herramientas de arriba, modificamos en color y el tamaño de la letra que deseamos y
le damos a la V de confirmar de la derecha).
Una vez puesto más o menos como queramos si seleccionamos la herramienta de
mover podremos poner el título donde queramos.
Y como vemos, se nos ha creado una nueva capa automáticamente una vez que hemos
puesto el texto.
Otra de las cosas que podemos modificar también en la capa es la opacidad y el estilo
que queremos ver en dicha capa (normal, oscurecer, aclarar, superponer…).
Hay que recordar que siempre que queramos modificar una capa primero la tenemos
que tener seleccionada.
EDICIÓN DE UNA IMAGEN
Para modificar el tamaño de una imagen a nuestro gusto, primero tendremos que
seleccionar la capa de la imagen y después irnos a Edición/Transformación Libre.
Y la podemos modificar directamente desde los puntos que nos aparecen. Pero si
queremos aumentarla o disminuirla manteniendo las proporciones debemos mantener
pulsado el botón SHIFT del teclado y luego ya arrastrar desde el punto que queramos,
soltamos el click y habrá mantenido las proporciones, después simplemente damos a
la V de confirmar en la barra de propiedades o damos a Enter.
Si queremos modificar el tamaño de la imagen directamente poniendo nosotros el
numero de px que queremos de altura y de anchura, arriba en la barra de propiedades
de esta herramienta tenemos para modificarlo.
En la opción An y Al pondremos los px que queramos o lo ponemos por %.
Aparece también la opción X y Y que son para poner la imagen en una posición del
lienzo.
Si queremos ya realizar una modificación de la imagen por ejemplo de giro de 90º nos
iremos con la capa de la imagen seleccionada a Edición/Transformar y elegimos la
opción que queramos.
Una vez tengamos la imagen como queramos se da o a la V de confirmar o a Enter.
Creación imagen pagina web
En este ejemplo vamos a recrear la página web del instituto Tierno Galván
(www.tiernogalvan.es)
Creamos un documento nuevo (1920x1080px).
Vamos a utilizar principalmente la parte de la barra de herramientas:
Seleccionamos la herramienta de rectángulo redondeado y vamos creando la
estructura. Al crear el rectángulo nos aparecerá la ventana:
En ella podemos decir que tamaño queremos exactamente o el color de fondo, el color
del borde o el grosor del borde.
En este caso yo le voy a poner el fondo negro y los bordes negros.
Recordad ir cambiando los nombre de las capas, para así tenerlas rápidamente
identificadas.
Ahora abrimos la imagen que queremos para el fondo y la pasamos a nuestro
documento.
Una vez la tengamos en nuestro documento le damos botón derecho encima de la
capa y crear máscara de recorte.
Y se nos acoplará a la capa que tenemos justo debajo.
Para centrarlo en nuestro lienzo tenemos que seleccionar las dos capas, la de la
cabecera y la del fondo. Y con la herramienta de mover seleccionada en la barra
de propiedades de esta herramienta nos aparece:
Pues hacemos click en y nos lo pondrá en el centro del documento. Si queremos
mover un poco simplemente la capa, seleccionamos la capa de cabecera y con las
flechas del teclado podemos mover dicha capa.
Seguimos creando nuestra estructura de la web:
En el caso del menú, en vez de insertar un fondo, cuando creamos el rectángulo le
ponemos de fondo un degradado. Igual que siempre tendremos que seleccionar la
herramienta de la que queremos cambiar la propiedad, en este caso, la herramienta de
rectángulo redondeado y, en la barra de propiedades, cambiaremos el relleno
de este.
Seguimos creando nuestra estructura hasta tenerla acabada.
Una vez tenemos la estructura realizada a nuestro gusto le ponemos un fondo.
Insertamos una imagen nueva al documento y la capa que se crea con ella tiene que
estar encima de la capa Fondo (que es la capa por defecto que se crea al crear un
documento nuevo), ya que va a ser la capa que más atrás esté.
Ahora ya podemos empezar a poner el contenido en cada uno de nuestros apartados.
Empezamos por la cabecera, vamos poniendo igual con la herramienta de rectángulo
redondeados las cajas del login de usuario y pass, según queramos, en este caso, con el
fondo blanco. Igual hacemos con el botón de login, en este caso con un degradado gris
y negro. Y por último, ponemos las imágenes de las banderas.
En el texto que hemos puesto de Usuario, Contraseña y Login, si le damos doble click
en la capa de texto nos aparecerán unas opciones para poder dar diferentes estilos al
tipo de la letra con sombras, resplandor, etc…
Y ponemos la imagen del título que nos guste.
Para tenerlo todavía más organizado vamos a crear una carpeta llamada Cabecera y
vamos a meter todas las capas correspondientes a la cabecera.
Para crear la carpeta vamos a la caja de capas y en los botones que nos aparecen
abajo.
Pinchamos en le damos un nombre y luego, seleccionamos las capas que
deseamos dejando pulsado control y clickando en las que queremos y las arrastramos
a la carpeta.
Ahora ya tenemos metidas todas las capas de la cabecera en una carpeta. Si elegimos
la herramienta de mover y tenemos seleccionada la capa de la carpeta Cabecera
se nos moverán todas las capas a la vez.
Ahora vamos con la capa menú. Para esta capa vamos a usar la herramienta de texto
y la herramienta línea .
Ponemos los nombres que queramos para el menú y realizamos las líneas.
Para no tener que estar haciendo línea por línea, creamos la primera línea y como se
crea una capa de esa línea, podemos hacer botón derecho sobre esa capa y duplicarla,
así nos saldrán todas las líneas exactamente iguales.
Ahora vamos a crear el submenú de, por ejemplo, dirección. Para ello realizamos el
cuadrado del submenú y encima de ese cuadrado pondremos los nombres y las líneas
de la misma forma que hemos hecho hasta ahora.
Como al crear el submenú no se va a ver, ya que aparecerán detrás de las demás
capas, vamos a organizar las capas antes de nada, las que estén situadas más arriba
serán las que más hacia delante estén en el lienzo, quedaría así:
Entonces ya si se nos vería el rectángulo del submenú que hemos creado.
Escribimos y ponemos la línea del submenú.
Y creamos una nueva carpeta para el submenú.
Para que nos quede así:
Para enseñar la página y que aparezca o desaparezca el submenú, simplemente
activamos o desactivamos el ojo de la izquierda de la carpeta.
En el camino de migas simplemente usamos la herramienta de texto para
indicar dónde nos encontramos.
En el menú de la izquierda añadimos las dos imágenes, una del calendario y otra de la
foto del instituto. En esta última damos doble click a la capa y le añadimos un trazo en
blanco.
En el menú de la derecha vamos a realizar como en el submenú, rectángulos y líneas.
La parte del centro lo único que tiene es texto y una línea.
Y por último el pie solo lleva texto.
La caja de las capas nos quedaría así:
Al final del todo, la imagen de la página web quedaría así:
