Graphix Nยบ 1
MX $30 AR $24.9
illustrator Graphix
1
BIENVENIDOS Graphix nació hace sólo 2 semanas como una propuesta de una nueva publicación destinada a la comunidad de diseñadores. Es un espacio para que ustedes mismo puedan publicar sus trabajos, comentarios y opiniones así como algunos tips en algunos de los programas de diseño para facilitar nuestro trabajo. Debemos recordar que el diseño es clave y forma parte de todos los aspectos de nuestra vida. Nuestro mayor deseo es que esta revista se convierta en una pieza escencial que faltaba en la comunidad de diseñadores de Quintana Roo y México.
índice Graphix Índice
3
Carta Editorial
Novedades en CS5
4
Illustrator
7
¿Cómo crear botones web desde Illustrator?
Photoshop
Dando un aspecto lúgubre a tus fotos
Flash
Creando una Galería Web
Dreamweaver
Comenzando a usar Dreamweaver
11
17
20
novedades en CS5 Graphix Novedades en CS5 La llegada de las nuevas versiones de Photoshop y compañía siempre han provocado emoción con la cantidad de novedades que prometían. desplegable.z Presiona OK y en unos instantes verás como el área seleccionada es reemplazada por una textura muy precisa construida a partir del entorno de la selección. Luego presiona Ctrl D para remover la selección y así ver bien el resultado. En la siguiente imagen puedes ver como a través de dos operaciones separadas extendimos la imagen a la izquierda y eliminamos los edificios.
Relleno según el contenido (Content Aware Fill) Relleno según el contenido es una de las novedades que trae el Photoshop CS5, pero es una de las mejores y más impresionantes herramientas que jamás tuvo el programa, por su simplicidad y el tiempo que nos puede ahorrar. Esta herramienta realiza en forma automática la remoción de grandes objetos y es capaz de extender la imagen hacia un lado, cosas que normalmente hacemos con él tampón de clonar en forma manual. Sin embargo clonar áreas grandes suele ser difícil, en especial si hay un gradiente
4
Novedades CS5 Graphix
de color (como en el cielo), una textura compleja o si no tenemos ‘datos suficientes o adecuados’ sobre los cuales basarnos. Relleno según el contenido (Content Aware Fill) simplifica tanto la operación que ni siquiera tenemos que realizar una selección precisa sobre el área que queremos remover. Tan solo realiza una selección (a través de cualquier herramienta de selección) que abarque la totalidad del área y un poco más. Luego selecciona la herramienta, desde el menú Edición > Relleno (Edit > Fill) o simplemente presiona Shift + F5. En el cuadro de diálogo que se abre asegurate de utilizar la opción Según el contenido (Content - Aware) que se encuentra en el primer menú
En la mayoría de los casos los resultados serán bastante aceptables, incluso en imágenes muy complejas en donde la misma tarea manualmente demandaría mucho tiempo o sería muy difícil
obtener resultados realistas. Y si los resultados no son de tu agrado, estas son algunas de las opciones que tienes * Deshacer la operación y realizar una nueva selección para repetir el proceso. * Realizar un nuevo relleno sobre parte del existente, o mejorar el área a través del tampón de clonar (clone tool) o las herramientas pincel reparador (spot healing) o parche (patch). * Refinar el borde de la selección, con esta otra nueva herramienta del Photoshop CS5 que mostramos mas abajo.
Herramienta Pincel Correctovvr Puntual según el contenido (Spot healing con Content Aware) Esta herramienta ha sido mejorada en el Photoshop CS5, para permitir utilizarla ‘según el contenido’. Es similar a la herramienta Clonar, pero con esta herramienta no debemos seleccionar un origen en el cual basarnos. Photoshop analiza los píxeles alrededor del área cercana para cubrir ese sector. Brinda resultados bastante aceptables de manera rápida en el arreglo de este tipo de imperfecciones puntuales, y apartir de la versión CS5 es capaz de trabajar correctamente cerca de bordes y líneas, resultando herramienta útil para, por ejemplo, remover los
cables que pueden estar cruzando el frente de un edificio. Simplemente selecciona la herramienta (desde el menú de herramientas o con la tecla J) y asegúrate de que una vez seleccionada la herramienta elijas de su barra superior la opción Content Aware. Esta nueva herramienta trabaja de la misma manera que Relleno automático según el contenido (Content Aware Fill), solo que esta última herramienta es utilizada para remover o crear grandes áreas de la imagen a través de una selección, como acabamos de mostrar. En el siguiente ejemplo de manera simple y casi sin tener que pensar removimos casi todas las aberturas y elementos de esta imagen algo compleja. Simplemente ‘pintamos’ con esta herramienta todo lo que queríamos remover. No llevó ni un minuto hacerlo.
Novedades CS5 Graphix
5
6
illustrator Graphix
illustrator Graphix Illustrator es una herramienta que nos permite crear vectores pero en esta ocasiรณn la ocuparemos para la creaciรณn de elementos WEB. Cualquier duda, consultanos รณmรกndanos un correo electrรณinico: doubts@graphix.com.mx
illustrator Graphix Creando un botón Web Illustrator es una herramienta que nos permite crear vectores pero en esta ocasión la ocuparemos para la web. Paso 1: En Illustrator, creamos un documento nuevo de 640 x 480. Usaremos pixeles como unidad de medida.
Paso 2: Creamos un círculo de 200 x 200 px y un rectángulo de 365 px x 115 px lo cuales ubicamos tal como se ve en la imagen.
Paso 3: Seleccionamos el rectángulo, vamos al menú Effect>Stylize>Rounded Corners... y en la casilla Radius aplicamos un valor de 20 px, posteriormente vamos al menu Object y seleccionamos el comando Expand Appearance.
Paso 4: Seleccionamos tanto el círculo como el rectángulo, vamos al menú Window y seleccionamos Pathfinder y hacemos click en el primer botón de este panel (Unite). El resultado es una sola figura a la cual le aplicaremos 5% de gris como relleno, 20% de gris al contorno y un espesor de contorno de 2 pt.
Shape Builder Tool (Herramienta Creador de formas): combine de forma intuitiva, edite y rellene las formas directamente en la mesa de trabajo. Arrastre el cursor por los trazados y formas superpuestas para crear nuevos objetos y agregue color sin acceder a diferentes herramientas y paneles. Una, excluya, recorte y mucho más con rapidez.
8
illustrator Graphix
Paso 5: Aplicamos una sombra a la figura con el comando Effect>Stylize>Drop Shadow y aplico los valores que se ven en la imagen
Paso 6: Creamos un círculo de 160 px x 160 px al cual le aplicamos un relleno 30R 115G 170B y contorno ninguno, posteriormente centramos este círculo en la parte circular de la figura creada en las etapas anteriores tal como se ve en la figura.
Paso 7: Ahora crearemos dos círculos que serviran de brillos. El primero será de 115 px x 90 px y el segundo de 80 px x 45 px. Alinearemos estos círculos tal como se muestra en la figura.
illustrator Graphix
9
Creando un botón Web Paso 8: Seleccionamos el círculo que corresponde al brillo superior aplicamos un esfumado de dos pasos (blanco a blanco), cambiamos el desplazamiento del esfumado seleccionando el rombo de la parte superior de la barra del esfumado en el panel Gradient e ingresando el valor de 70% en la casilla Location. Cambiamos la orientación del esfumado a 90 grados y finalmente
hacemos doble click en el stop color izquierdo (el ícono que parece una casa debajo de la barra del esfumado) y en la casilla Opacity digitamos 0. La opacidad en los esfumados es una característica nueva de Illustrator CS5, si estás trabajando con la versión CS3 o anterior podrás simular el efecto con un Opacity Mask (Máscara de opacidad). Puedes ver el resultado en la figura.
Paso 9: Seleccionamos el círculo que corresponde al reflejo inferior y le aplicamos un relleno 255G 255B (Cyan), contorno ninguno. Para desenfocar el círculo vamos al menú Effect>Blur>Gaussian Blur y aplicamos un radio de 15 px. Y ahí esta nuestro Botón, el cual le puedes poner el nombre que quieras.
10
illustrator Graphix
Mejoras de dibujo: trabaje más rápido con las herramientas diarias. Dibuje por detrás, ignorando el orden de apilamiento. Dibuje o coloque una imagen dentro, creando de forma instantánea una máscara de recorte. Una trazados con una sola pulsación de tecla, vea los orígenes de la regla en la parte superior izquierda y escale los símbolos con un control de nueve sectores. Gráficos nítidos para la Web y dispositivos móviles: cree objetos vectoriales de forma precisa en la cuadrícula de píxeles del archivo para obtener ilustraciones alineadas a nivel de píxel. Genere gráficos de trama nítidos y limpios mediante la activación de la función Alinear con cuadrícula de píxeles y mediante las opciones de suavizado para marcos de texto individuales.
photoshop Graphix Las nuevas herramientas de Photoshop permiten crear ambientes y personajes con la ayuda de otros recursos para poder crear una composici贸n natural
photoshop Graphix Dando un aspecto lúgubre a tus fotos Con las nuevas herramientas de Photoshop, se puede crear una variendad de ambientes y luces, desde fotos e imagenes sin esa intención.
En este tutorial se muestra como transformar una foto con iluminación normal a una con lúgubre aspecto. Uno puede elegir una fotografía que sea de una habitación con aspecto abandonado,
12
Photoshop Graphix
se puede elegir alguna que se haya tomado o alguna de el siguiente link: www.abandonalia.blogspot.com.
Dando un aspecto lúgubre a tus fotos
Paso 1.- lo que vamos a ocupar será oscurecerla. Para ello usaremos el shortcut CTRL + J para duplicar la capa. En el menú de capas, seleccionarmos como estilo de capa multiplicar.
Como se puede apreciar en la imagen anterior, se puede ver más lúgubre. Para darle un aspecto más natural, se intercala otra capa con un color diferente (ajustando atributos de la imagen como tono y saturación) y un estilo de capa como es subexponer color o similar. Estas son sólo sugerencias y dependerá de los gustos de cada persona así que no te limites, no hay norma alguna a seguir. Pero siempre recordando que lo que queremos conseguir son sombras y luces tenues.
Paso 2.- El primer paso que vamos a ocupar será oscurecerla. Para ello usaremos el shortcut CTRL + J para duplicar la capa. En el menú de capas, seleccionarmos como estilo de capa multiplicar.
Paso 3.- Aquí se sugiere realizar el cambio de color a la capa principal y a la que esta en modo multiplicar seguido y entre medio de las dos otras capas con el color original en estilo color.
Photoshop Graphix
13
Y queda de la siguiente manera con tonos más fríos que el original.
Paso 5.- Ahora, para modificar el colchón, que se sigue viendo aun muy claro, para esto con la herramienta de selección rápida lo selecciona y el shortcut CTRL + J hice una copia a la que también se le da un estilo de multiplicar. Y lo mismo se hace con la puerta del armario.
! A Decorar ¡ En este caso, una vela que ilumine la parte izquierda de la habitación y dos personas besándose encima del colchón. Primero haremos la vela.
Paso 4.- Ahora lo que sigue es superponer todas las capas y colocando una capa totalmente negra a la que le ha dado estilo de saturación. A continuación se baja la opacidad al 55% para que que pierda coloración.
Varita mágica: Es para hacer selecciones rápidas de áreas del mismo color. Pulsando en un lugar de la imagen nos selecciona todo el área que tiene el mismo color continuo.
14
Photoshop Graphix
La vela la puedes encontrar en algun sitio de internet o de su propia colección de imágenes. Puede que la aureola que aparezca alrededor si se encuentra encendida nos moleste, pero no importa, la podemos borrar o también con la herramienta de goma dándole una opacidad del 30% podemos ir borrando poco a poco hasta que quede de nuestro gusto. A la vela la copiaremos 3 veces poniendo a la copia superior subexponer color, a la de en medio multiplicar y a la inferior normal. Con ello obtendremos una vela no tan brillante La vela alumbrara una zona de la habitación así que lo que tendremos que hacer es pintarla nosotros mismos. Elegimos un color similar al de la
llama de la vela antes de aplicar los efectos sobre ella. Elegiremos el pincel y en él una brocha de las del segundo tipo, de las que tienen los bordes difuminados. Después, bajaremos la opacidad a un 30% y pintaremos en una capa nueva por donde creamos que habría luz. Esta capa se situara debajo de la vela y debajo de la ultima capa del colchón para no ocultar todo con la luz. Una vez creada la iluminación, la copiaremos dos veces y pondremos una sobre el colchón que tenia el efecto de multiplicar. A la capa superior le daremos el efecto de sobreexponer color (opacidad al 25%) y a la de en medio el de exclusión (opacidad al 5%). En esto como en todo podemos probar diferentes efecto a ver cual nos gusta más.
Después pondremos a la pareja en la cama. Para ello recortaremos de la foto que queramos la pareja por el método que prefiramos. Luego la pegaremos debajo de la capa que en la imagen aparece nombrada como 8. Ahi repetiremos el proceso de copiando dos veces a la imagen y aplicando a la copia superior el efecto de multiplicar y al de en medio subexponer color, jugando si nos parece con la opacidad. Ahora haremos una cosa no muy complicada para no romper el orden de las capas y a la vez conseguir la misma iluminación que en el resto.
Photoshop Graphix
15
Para ello daremos click en la imagen de la capa que tenga a nuestra pareja manteniendo CTRL pulsando, con esto lo que conseguiremos será seleccionar solo esa zona. Luego daremos click (sin el ctrl.) encima de la capa que contenga a una de las dos luces inferiores, sin perder la selección. Entonces copiaremos con CTRL + J solo a la zona que se encuentra dentro de la selección. Repetiremos el proceso con la otra capa de iluminación, no así con la superior que ya se encuentra por encima de la pareja.
Ya casi tenemos la foto finalizada pero nos falta la sombra arrojada por la vela, para ello lo que haremos será hacer una copia de la pareja, a esta copia de la pareja la haremos
16
Photoshop Graphix
completamente negra mediante el menú de tono saturación que hemos usado antes. Luego disminuiremos la opacidad y la deformaremos pulsando ctrl. +t. luego la situaremos en
donde queramos para que parezca la sombra. Y ya tendremos la imagen acabada.
flash Graphix No se sabe si el Flash sustituirá al Html dentro del Internet, porque de todas formas Internet es una realidad en continua evolución y tarde o temprano aparecerá algún programa nuevo que podrá mejorar las funciones del Flash.
illustrator Graphix
17
flash Graphix Creando un galería web No se sabe si el Flash sustituirá al Html dentro del Internet, porque de todas formas Internet es una realidad en continua evolución y tarde o temprano aparecerá algún programa nuevo que podrá mejorar las funciones del Flash, mientras que el Html de cualquier forma vendrá utilizada porque es la base de la tecnología utilizada para el Web. Paso 1 .- Crear un documento Flash y poner las dimensiones y colores siguientes:
Paso 3.- Después, sitúa “thumb-0”, “thumb-1” en la capa llamada “thumbs” y la imagen más grande en la capa llamada “gallery”.
18
Flash Graphix
Paso 2.- Para este tutorial, se esta usando imágenes de 64 x 56 para las miniaturas y con la imagen principal de 320 x 280. Todas las imágenes usadas en este tutorial han sido descargadas desde la página sxh.cu gratis. Cada una ha sido cortada y resterizada a 320 x 280 para la imagen principal y 65 x 60 para las miniaturas. Lo segundo que vamos a crear es crear 2 folders en la librería, llamado imágenes y thumbs. Importe 8 miniaturas y 8 imágenes a los folders, preferentemente llamadas como se muestra a continuación.
Paso 4.- Convertir cada una de las miniaturas en “Movie Clips”, dandoles click y presionando F8, moviéndolas a la posiciones mostradas a continuación. No tienes que convertir la imagen grande en un movie clip, porque vamos a adjuntarlas dinámicamente usando un “ActionScript” en unos momentos, Sólo sitúalas en las posiciones siguientes mostradas en la tercer imagen, para que se cree el fondo alrededor en el siguiente paso.
El Publish, que es un visualizador de nuestro trabajo ya sea en Html o en Flash. Y dependiendo de la orden que le demos, en este formato lo veremos, previo a nuestra edición final. Este se encuentra en Archivo. Otra forma de visualizar nuestro trabajo es por medio de Test Movie que se encuentra en Controles.
Paso 5.- Dar doble click en la herramienta de rectángulo, en la barra de herramientas y establecer un radio en las esquinas de 10.
Paso 6.- Crear un rectángulo azul oscúro en una capa inferior a las imágenes y después crear un rectángulo blanco en una capa inferior a esta.
Paso 7.- Da click en una imagen grande , convertirla en Movie Clip. Entrar a la imagen 1 “Image 0” y activar el campo de “Linkage”. “Image 0” debera aparecer bajo Identifier. Esto te permitirá adjuntar la imagen dinámicamente con ActionScript. Una vez que se ha hecho esto, borrar el Movie Clip desde la estación y hacer lo mismo con la imagen-1, pero esta vez asignando a “image1” como el nombre del Movie Clip y “Identifier”. Después eliminar el Movie clip de la estación una vez que se haya hecho esto.
Flash Graphix
19
Paso 8.- Hacer lo mismo con el resto de las imágenes grandes, nombrándolas image2 - image1. Después convertir la miniatura en un Movie Clip llamado thumb0. No tienes que darle un Identifier o borrarlos de la estación, ya que no vamos a anexar dinámicamente con Actionscript.
Paso 11.- En esta parte utilizarmos Actionscript, para esta crearemos una nueva capa por encima de todas las otras que llamaremos “Script”. Dar le click a esta y abrir el panel de acciones. Entrar a la primer línea del código y escribir lo siguiente.
Paso 9.- Hacer lo mismo con la siguientes miniaturas, cambiándoles el nombre.
Paso 10.- Crear un rectángulo con las dimensiones mostradas a continuación, y convertirlo en Movie Clip llamado Mask. Darle un Identifier llamado Mask, y después borrarlo, ya que se establecerá una máscara dinámica.
20
Flash Graphix
dreamweaver Graphix En la actualidad el contar con un sitio web se incrementa dia a dia. No solamente para aquellos que quieren ganar dinero en internet, sino para todas aquellas personas.
illustrator Graphix
21
dreamweaver Graphix Configurando un sitio nuevo En la actualidad el contar con un sitio web se incrementa dia a dia. No solamente para aquellos que quieren ganar dinero en internet, sino para todas aquellas personas que ya ofrecen algun serivicio o tienen algun negocio fisico Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto de modo que la gente podrá verlo en Internet. Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que
22
Dreamweaver Graphix
trabajaremos, y los cambios los actualizaremos en el sitio remoto. La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc. La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre. Por ejemplo, si escribiéramos la dirección genérica http://www.google.com en el navegador, éste intentaría cargar la página http:// www.google.com/index. htm, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm, y no se podría navegar por el sitio a no ser que se escribiese exactamente http://www.google. com/nombrepagina.htm
Crear o editar un sitio web sin conexión a Internet Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio. Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio. Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos.
También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios o Nuevo sitio...
En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad. Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir o modificar las características del sitio.
Ver el sitio El panel Archivos (menú Ventana > Archivos o tecla F8) es uno de los paneles más importantes de Dreamweaver, ya que nos da acceso a los archivo del sito. En este caso vemos todos los documentos creados en nuestro sitio buscar.htm, paraplantilla.htm, platossemana.htm, postresemana.htm y las carpetas imágenes y varios. Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay que pulsar sobre el botón que aparece en la parte superior del panel y de la ventana. Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. También el servidor de pruebas o las bases de datos.
24
Dreamweaver Graphix
Propiedades del documento Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo
* Pulsar la combinación de teclas Ctrl + J. * Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. * Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página.
Propiedades de la página. Este cuadro se puede abrir de tres modos diferentes:
Se abrirá el cuadro de diálogo siguiente:
En la categoría Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades: Fuente de página: es el tipo de letra que le aplicaremos al texto. Tamaño: es el tamaño de la fuente que aplicaremos al texto. Color del texto: es el color de la fuente. Color del fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo. Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opción no-repeat. Si queremos que se repita o
dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se repita solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y. Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador. En la categoría Apariencia (HTML), como vemos en la imagen siguiente, encontramos las propiedades:
Dreamweaver Graphix
25
Fuente de página: es el tipo de letra que le aplicaremos al texto. Tamaño: es el tamaño de la fuente que aplicaremos al texto. Color del texto: es el color de la fuente. Color del fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo. Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif ani-
mado como fondo. Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opción no-repeat.
Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el mismo. Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador. En la categoría Vínculos (CSS) encontramos las propiedades: Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica nuestra configuración utilizando reglas de estilo, mientras que HTML lo hace con atributos HTML. Estos últimos están cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al diseño. Por eso, te desaconsejamos su uso.
26
Dreamweaver Graphix
illustrator Graphix
27
xihparG
28
illustrator Graphix