Você está na página 1de 42

Manual de imgenes para crear los nuevos videntes

En el siguiente manual usted encontrar informacin acerca de la especificaciones


tcnicas de las imgenes para poder crear a un vidente, como tipo de imagen, formato,
tamao, etc. Los lineamientos como colores y tendencia a utilizar sern indicados por
nosotros, es decir, recibirn las indicaciones de la paleta de colores y la fotografa del
vidente a utilizar. Pero la idea es que usted cree un nuevo vidente con sus elementos.
Un consejo es realizar los artes como los ve en este manual, para que se puedan visualizar
el conjunto y una vez terminado puede proceder a la separacin de los elementos como
podr ver a continuacin.
El formato que se indica es solo una referencia, usted al final de cuentas tiene la
posibilidad de elegir el mejor formato para su diseo, debido a que si su diseo posee
trasparencias o huecos necesitar realizar un png, de quizs una imagen que nosotros
estamos recomendando hacer en jpg o por el contraro no requiere ser un png y la hace
en jpg para reducir peso. Recuerde siempre optimizar por https://tinypng.com/
El manual se divide en dos secciones, la primera compuesta por la versin desktop y la
segunda por la versin mvil de la versin desktop.

Versin desktop

1- ndex:
El ndex o landing es la pgina en donde llega el cliente a travs de la publicidad y se registra, es el
sitio ms importante porque es el primer contacto del cliente con el vidente, en pocas palabras, es
te sitio tiene que ser llamativo y con un formulario que genere muchos registros.
La estructura siempre va a ser la misma, esto no va a cambiar, lo que vamos a cambiar va a ser el
diseo de los elementos que la componen, ejemplo: en las siguientes imgenes vern un
formulario, la estructura ser la misma siempre en cantidad y tamao de los elementos, pero el
diseo de los mismos ser el que cambiar.
ejemplo1:

ejemplo2:

ejemplo 3:

Son dos formularios distintos pero solo en las imgenes, las estructura y la cantidad de elementos
son las mimos. Incluso tambin puede tomar como ejemplo el ndex de la portada de este manual.

Elementos y caractersticas del ndex:


Existen dos tipos de ndex, ndex 1 que se basa en un video y un formulario simple e ndex 2 que
se basa en un ndex con formulario de preguntas.
Vamos a tomar como ejemplo a Jade, el ndex 1 de cualquier vidente se divide en dos etapas, uno
que contiene un video y uno que solo tiene a la vidente, pero en realidad es el mismo, que una vez
que el video llega al final aparece el vidente.
A continuacin ejemplo de estas dos etapas ndex 1.

ndex 1 video

ndex 2 vidente

Cada ndex se constituye de varios elementos grficos, para as poder crear uno completo, a
continuacin estos elementos.
1a- Fondo: 1366 x 756px en jpg siempre optimizado por https://tinypng.com/
Este fondo debe destacar al formulario, nunca debe ser el protagonista, debe apoyar al formulario
a ser el principal y destacar.

1b- Formulario: Para realizar un formulario completo se necesitan varios elementos que permitan
realizar uno en su totalidad, a continuacin se explican los elementos a crear en un formulario.
Adjunto varios ejemplos de formularios.

1b.1- Fondo formulario: 377 x 519px en png, esta es la imagen que va a


contener los dems elementos: Si el fondo usted lo disea con algn
tipo de transparencia enve la imagen con el porcentaje de opacidad
segn su diseo, si en su diseo la imagen est a 80% de opacidad,
exporte el png con esa caracterstica.

1b.2- Imgenes deseos: 1346 x 537 px en png, esta es la imagen de los deseos de la parte superior,
los que indican soltera, pareja, dinero y trabajo. No se debe colocar el texto, solo la imagen en
sprite de la siguiente manera.

La imagen se compone de 9 imgenes horizontales y 4 verticales, las filas horizontales son la


misma imagen del deseo pero con algn detalle para hacer una animacin, que no es limitante, es
decir si no desea hacer una animacin solo debe respetar la forma del sprite, por lo contrario
quiere hacer una animacin de tomar en cuenta que la misma comienza de izquierda a derecha y
que tiene 9 cuadros para realizar dicha animacin. Algo muy importante es que la distancia entre
las imgenes, tanto horizontal como vertical no importa el diseo, debe ser la misma entre cada
una, debe ser una cuadrcula perfecta para que la imagen se vea correctamente.
Esta imagen del sprite es de ejemplo para que se pueda comprar con el original de los formularios
de ejemplo. La idea es que estn en ese orden y que refleje cada icono las categoras. De igual
forma todos los elementos son adjuntados para que los pueda comparar con su trabajo.

1b.3- Icono de los imputs: 57 x 276px en png, esta es la imagen que describe los imputs, es decir,
gnero, nombre, fecha de nacimiento y e-mail.

La idea es que estn en ese orden y que refleje cada icono las categoras a las que se refieren.
1b.4- Contenedor de los imputs: 290 x 53px en png, esta es la imagen que contienen las palabras
que dicen: gnero, nombre, fecha de nacimiento y e-mail.

Gnero:

Normales:

La diferencia es la pequea flecha en genero, para que el usuario entienda que es un men
desplegable. Pero es simplemente el arte normal con una flecha que seala hacia abajo.

1b.5- Botn de registro: 484 x 130 px en png, este es el botn inferior que le permite al usuario
registrarse, en donde dice haga clic aqu para recibir su videncia, en el formulario es una de las
partes ms importantes debido a que debe llamar tanto la atencin que genere en el usuario
ganas de hacer clic, es decir, que den hagas de hacer clic a pesar de no haber llenado el
formulario.

Usted tiene todo el espacio para hacer el botn, pero es agradable agregarle elementos como el
ejemplo para llamar ms aun la atencin, claro que estn acorde con el formulario y el vidente.
Todo est relacionado entre s para tener una misma tendencia y lnea grfica.

Usted debe escoger incluso el tipo de tipografa y enviarla adjunta con los archivos de imgenes y
especificando en donde se debe utilizar en el caso que sean ms de 2 tipos de fuentes utilizadas.
Los formatos de las fuentes deben ser en ttf, eot y woff para hacer la conversin de ttf a las
dems est este sitio web: https://everythingfonts.com/ en donde puede realizar la conversin
en la pestaa "font conversion"

Recuerde que todo debe estar en armona y que cada elemento es importante y que en conjunto
deben formar la parte ms importante de la compaa, que es donde el usuario se registra.
1c- imagen del vidente: 700 x 660 px en png, es la imagen del vidente que contiene el logo del
nombre.

Es la imagen principal del vidente y usted la adaptar dependiendo de las fotografas que recibir,
como por ejemplo volupta. Para poder diferencia esto ingrese a los siguiente links.
www.volupta-clarividencia.com / www.irina-clarividencia.com / www.adriana-clarividencia.com
1d- El video: el video no debe preocuparse ese lo crear otro departamento.

ndex 2 video y formulario.


A diferencia del ndex 1 este (ndex 2) no se va a dividir en dos etapas, el video se va quedar en el
mismo sitio una vez finalice, y realmente lo vamos a componer con un elemento del ndex 1 con
correcciones de tamao y nuevos elementos.
Los elementos son:
1e.1- Imagen del vidente: 277 x 262 px en png, es la imagen del vidente que contiene el logo del
nombre y una frase. Pero tiene una caracterstica para poder colocar el nombre y al frase. El
espacio que se debe utilizar (en altura) para colocar la frase es hasta los 200px, es decir que debajo
de los 200px solo debe quedar una parte no importante de la imagen, en los siguientes ejemplos
vern la caracterstica:

Hasta la lnea tiene para colocar el texto del nombre del vidente y la frase, de all para abajo la
imagen podr ser tapada.

1e.2- Tapa del vdeo: 512 x 380 px en jpg, esta es la imagen que sustituir al video una vez quede
en pause. A continuacin ejemplos:

Para poder ver este ndex 2 en vivo puede ingresar a:


http://ebookseuphoria.com/?v_id=8&l_id=1&dyvid=1
Los dems elementos sern creados por programacin, de existir algn cambio con este ndex le
daremos la informacin de los nuevos elementos a crear.

2- Textos:
Texto normal:

Texto una vez que se hace scroll, es decir cuando se baja para seguir leyendo el texto:

Este diseo de los texto tambin contienen una cantidad de elementos que se necesitan para
completar un diseo general, al igual que el ndex todo debe ser una armona de colores y basados
en la misma paleta que la del ndex pero que por supuesto sean diferentes.

Elementos y caractersticas del texto:


A continuacin las caractersticas de los elementos que componen el texto.

2a- fondo texto: 1450 x 990px en jpg siempre optimizado por https://tinypng.com/
Este fondo debe destacar al diseo del texto, nunca debe ser el protagonista y debera tener la
misma tendencia del fondo del ndex pero nunca ser el mismo.
Ejemplos:
Fondo ndex:

Fondo texto:

Fondo ndex:

Fondo texto:

La misma tendencia pero no el mismo fondo.

2b- fondo del texto: Esta es la imagen que est debajo del mismo texto como tal y que separa el
texto del fondo, esta imagen realmente est constituida de varas imgenes. A continuacin la
explicacin de esta imgenes y la forma de proceder.

El fondo est constituido en tres imgenes, una superior, un centro que es la imagen a repetirse y
la inferior, entonces cuando usted realice el arte debe tomar en cuenta que estas imgenes deben
tener una continuidad y concordancia, ejemplo:

Imagen superior: 513 x 22 px en png

Centro superior: 513 x 34 px en png

Imagen inferior: 513 x 22 px en png

La idea de esto es poder crear una imagen de fondo del largo del texto, que esta se adapte a la
cantidad de caracteres.

Como pueden ver los patrones y texturas estn diseados para que se pueden repetir y seguir
dando la apariencia de que hay continuidad. Entonces una vez que disee tome en cuenta estas
consideraciones para poder enviar imgenes que se puedan utilizar. Respete siempre las medidas.

2c- Botn del texto: 222 x 222px en png, el botn del texto es aquel que contiene la oferta y que
ser uno de los elementos que llevar al usuario a realizar la compra, por ello este botn debe ser
muy llamativo pero a la vez que permita tener texto arriba y que tenga lectura. Si este botn se
puede hacer con una pequea animacin eso sera genial, un sprite con la secuencia de la
animacin nada elaborado pero s que lleve al usuario a ver el botn, aqu ejemplos de los botones
estticos.

En este link podrn ver una demostracin de un botn animado:


http://b556df7d817b06260ee5f1205ba1cfd77bb973cc0ffc1bcdf44e.r90.cf1.rackcdn.com/otras/esperanza-3.gif

Ejemplo de un sprite de una animacin de un botn:

La idea es crear una animacin como si fuese una pelcula de cine. El diseo y la forman dependen
de lo que usted quiera para el diseo del vidente. Respetando las dimensiones.

2d- Header texto Vidente: 799 x 226px en png, esta es la imagen del vidente de la parte superior
antes de hacer el scroll, es el encabezado del texto y es importante que siempre conserve este tipo
de estilo como el ejemplo, claro adaptndose a los requerimientos de diseo del vidente.

2e- Imgenes de ttulo y sub-ttulo: estas imgenes son las que destacan al ttulo y al sub-ttulo
-Ttulo: 493 x 109px en png, debe desatracar el ttulo y tener el estilo del vidente.

-Sub-ttulo: 388 x 42px en png, debe desatracar el sub-ttulo y tener el estilo del vidente.

Elementos y caractersticas del texto cuando se hace Scroll:


2f- Top scroll: 768 x 107px en jpg o png lo que mejor se adapte al diseo, esta es la imagen de la
parte superior cuando se hace el scroll en la pgina de los textos. El espacio debe estar pensado
para que quepa un mensaje y la cara del vidente. Ejemplo:

Ejemplo de cmo debe ser la imagen: Siempre en armona con los colores del vidente.

2g- Vidente scroll: 320 x 230px en png, es la imagen del vidente que va en la barra "top scroll"

2h- iconos de perfil y oferta o carrito: Este es un sprite de 150 x 58px en png, es la imagen de la
parte inferior del texto.

Nuevamente la idea es que todo vaya en conjunto a la lnea grfica y que todo tenga la misma
armona.

3- NOV: Este es la pgina de pago, aqu reutilizaremos los elementos como el fondo texto, fondo
del texto, la imagen del ttulo, header del vidente, elementos del scroll y un botn, botn que
depender del estilo del diseo, ya vern en la explicacin. Ejemplo de nov:

Elementos y caractersticas del nov:


Imgenes a reutilizar:
- Header texto Vidente
- Imagen de ttulo
- Fondo del texto
- Fondo texto
- Botn de registro o sub-titulo**

**Dependiendo de qu funcione mejor con el estilo del vidente se podr utilizar el botn de
registro del ndex o el subttulo de los textos, pero preferiblemente el botn del ndex para que
haya una relacin en la mente del usuario entre el ndex y el pago, es decir que para el sea natural
presionar ese botn. Pero a veces los diseos no se ven bien, entonces se vale apara acortar el
tiempo de diseo reutilizar elementos y adaptarlos a los colores que deseamos, un ejemplo de
esto en la siguiente imagen en donde en el nov se utiliz el botn del registro en el botn del nov.

La idea es optimizar los tiempos pero jams sacrificando la calidad, si ninguno de los botones no
funciona se realizar uno nuevo acorde a la tendencia del vidente.

Imgenes a crear:
3a- Checkmark: 20 x 20 en png, este es un icono de checkmark que cuadra con los colores y
destaca.

3b- lazos de regalo: Esta se compone de dos imgenes y la idea es que se genere un lazo distinto
por vidente con el mejor color para resalta esta parte:
-lazo superior: 53 x 80px en png, es la imagen del lazo del regalo de la parte superior.

-lazo inferior: 53 x 25px en png, es la imagen del lazo del regalo de la parte inferior.

Ejemplo:

3c- Oferta 1: 500 x 500px en png, es la imagen de la oferta del mtodo de pago, esta es una de las
imgenes que llevara texto, es la palabra oferta. De igual forma la forma del diseo la elige usted,
pero respetando esta inclinacin y procurando de escoger el mejor color que resalte y concuerde
con los colores del vidente. En el ejemplo se justifica la inclinacin y el uso del espacio.

Traducciones:
ES: OFERTA
EN: SALE
FR: OFFRE
PT: OFERTA
Para guardar los archivos, estos en especficos se deben guardar de la siguiente manera:
ES: oferta_tag-es
EN: oferta_tag-en
FR: oferta_tag-fr
PT: oferta_tag-pt

3c- Sello de garantizado: 150 x 150px en png, es la imagen 100 % garantizado, esta es una de las
imgenes que llevara texto. De igual forma la forma del diseo la elige usted, pero respetando el
mejor color que resalte y concuerde con los colores del vidente. El uso de maysculas o
minsculas depende de usted

Traducciones:
ES: Satisfaccin 100% Garantizada
EN: Satisfaction 100% Guaranteed
FR: Satisfaction 100% Garantie
PT: Satisfao 100% Garantida
Para guardar los archivos, estos en especficos se deben guardar de la siguiente manera:
ES: sello_bg-es
EN: sello_bg-en
FR: sello_bg-fr
PT: sello_bg-pt

3d- Contenedor de pago: 388 x 405 en png, es la imagen que contiene los botones y mtodos de
pago.

Esta imagen es la que destaca a los metodos de pago y normalmente se ha diseado con un
motivo de fondo que concuerda con las tendencia de colores y elementos del vidente. Ejemplos.

3e- Estrellas de los testimonios: 47 x 10px en png, estas son las estrellas que llaman a la atencin
en la seccin de los testimonios, si usted decide que este arte debe ir pero con otra forma lo
puede hacer, lo importante es que el nombre del testimonio resalte. Ejemplos:

4- Rituales:

Esta seccin es una variacin del punto 2 (textos, pgina 9), y es que una

modificacin del mismo y est destinada a un texto que se le regala al usuario. En base es igual al
punto 2 pero posee elementos que lo diferencian.

Se pueden reutilizar elementos para crear las variaciones como hay que crear otros, a
continuacin los elementos a crear.

4a- fondo texto: 1450 x 990px en jpg siempre optimizado por https://tinypng.com/
Este fondo debe destacar al diseo del texto, nunca debe ser el protagonista y puede tener una
tendencia diferente al del ndex y textos.

4b- fondo del texto: Al igual que en los textos, esta es la imagen que est debajo del mismo texto
como tal y que separa el texto del fondo, esta imagen realmente est constituida de varas
imgenes. A continuacin la explicacin de esta imgenes y la forma de proceder. Puede utilizar el
mismo estilo modificndolo o realizando un nuevo arte para esta seccin verifique bien porque
las medidas son distintas.
El fondo est constituido en tres imgenes, una superior, un centro que es la imagen a repetirse y
la inferior, entonces cuando usted realice el arte debe tomar en cuenta que estas imgenes deben
tener una continuidad y concordancia, ejemplo de la modificacin:

Imagen superior: 532 x 33 px en png

Imagen centro: 532 x 235 px en png

Imagen inferior: 532 x 33 px en png

Es importante destacar que las medidas en esta seccin si cambian y que es importante respetar
completamente estas medidas. Esto est as por un propsito de programacin.

Como pueden ver los patrones y texturas estn diseados para que se pueden repetir y seguir
dando la apariencia de que hay continuidad. Entonces una vez que disee tome en cuenta estas
consideraciones para poder enviar imgenes que se puedan utilizar. Respete siempre las medidas.

4c- botn del ritual: 143 x 143px en png, el botn del texto es aquel que contiene la oferta y que
ser uno de los elementos que llevar al usuario a realizar la compra, aunque es base se parece al
del texto no lo es, tiene un menor tamao y debe ser distinto al del texto, pero igual
preferiblemente en una animacin. Ejemplos de botones de rituales:

En este link podrn ver una demostracin de un botn animado de ritual:


http://b556df7d817b06260ee5f1205ba1cfd77bb973cc0ffc1bcdf44e.r90.cf1.rackcdn.com/otras/irina-1.gif
Ejemplo de un sprite de una animacin de un botn:

La idea es crear una animacin como si fuese una pelcula de cine. El diseo y la forman dependen
de lo que usted quiera para el diseo del vidente. Respetando las dimensiones.

4d- ttulo y sub-ttulo: Se pueden reutilizar estos elementos de los textos, pero como pueden
observar con ciertas modificaciones que permiten hacer diferencias, de igual manera este arte no
tiene que ser totalmente parecido al de los textos, es decir, usted decide si desea hacer un arte
nuevo. En esta seccin las medidas nuevamente son diferentes, este pendiente de esto.
Ttulo: 461 x 101px en png

Sub-ttulo: 414 x 66px en png

4d- Oferta ritual: 311 x 156px en png, esta es la imagen de oferta de la parte inferior del ritual.
Este arte debe ser siempre diferente para cada ritual que se haga, este es un ejemplo:

Aproveche siempre el espacio para crear un arte grande, la forma del arte la decide usted.

5- Bluesnap: Esta son las imgenes de uno de los mtodos de pago, este se constituye solo de
dos secciones.

5a- Header bluesnap: 900 x 260px en png. En esta imagen es reutilizar el "Header texto Vidente"
(pgina 13) adaptarlo y colocarle un fondo que vaya acorde con toda la lnea grfica del vidente,
ejemplo de la adaptacin:

5a- Fondo bluesnap: 1200 x 890px en jpg, este fondo ser sencillo ya que solo es el complemento
para un sitio de pago. Ejemplos:

6- Profile: Este seccin se constituye solo de tres imgenes.


6a- Foto profile: 380 x 380px en png, es la imagen del para el profile del cliente. La coloca como
usted sienta ms natural y que sea estticamente llamativo, completa el espacio con un fondo
referente al vidente. Ejemplos:

6b- Header superior profile: 2000 x 600px en png o jpg, es la imagen superior del men del
profile. Adjunto ejemplos:

6c- Fondo profile: 1450 x 990px en jpg siempre optimizado por https://tinypng.com/

Ejemplo de la colocacin de los elementos:

7- Bot o Chat:

Estos son los elementos del bot, y se constituye de varias imgenes,

nuevamente verificar tendencia de colores del vidente para realizar estos artes, es decir que los
colores de los artes vayan acorde con la tendencia del vidente, debido a que son artes de
naturaleza sencilla.
7a- Imagen del vidente: 526 x 668 px, esta imagen es la correspondiente al vidente y debe
contener al vidente con el nombre de la maraca y con un fondo que vaya acorde con el fondo y las
tendencia del vidente.

7b- Fondo bot: 1280 x 800 en jpg, la idea de este fondo es que de la sensacin de que est adentro
de la pantalla y no encima, es decir, que tenga sensacin de profundidad. Adjunto ejemplos:

7c- Foto vidente: 200 x 200 px en png, es la imagen del vidente de la parte superior. Debe
contener la cara del vidente con un fondo acorde a su tendencia. Se debe realizar con una sombre
interna para darle sensacin de profundidad.

7d- Foto del chat usuario y chat vidente: 50 x 50 px en png, esta es la imagen del usuario en el
chat y la del vidente.

Foto del usuario

Foto del vidente

7e- Iconos de los imputs: 30 x 30 px en png, las imgenes correspondientes a los imputs del
formulario, es decir, gnero, nombre, fecha de nacimiento y e-mail. La idea, como en todos los
casos, es generar nuevos iconos, pero siempre respetando las limitaciones de tamao y de color
del vidente. No es un sprite, las imgenes van por separado.

Gnero

Nombre

Fecha

E-mail

7f- Iconos de los deseos: 672 x 88 px en png, esta es la imagen de los deseos de la parte superior,
los que indican soltera, pareja, dinero y trabajo. La idea, como en todos los casos, es generar
nuevos iconos, pero siempre respetando las limitaciones de tamao y de color del vidente. No se
debe colocar el texto, solo la imagen en sprite de la siguiente manera.

Amor

Soltera

Dinero

Trabajo

7g- Separador: 517 x 20 px en png, es una imagen utilizada para separar los imputs.

Respetar siempre las dimensiones, es decir no hacer ms gruesa la lnea a pesar de tener el
espacio para hacerlo.

7h- Firma del vidente: No posee una altura determinada, ya que la forma de fuente puede variar,
pero esta no debera pasar los 300px de ancho ni los 100 px de alto en png.

7i- Raspadito bot: 1000 x 350 px en png, este es el raspadito del bot recuerde que son dos artes,
uno superior (el que dice raspe aqu) y uno inferior (que contiene el premio), y su diseo debe
estar siempre relacionado al dinero y la abundancia del dinero, aqu ejemplos y las frases a utilizar.
Arte superior:

Frases a utilizar arte superior:


ES: Pruebe su suerte. Raspe aqu
PT: Prove sua sorte. Raspe aqui (la palabra aqu en PT no lleva acento)
EN: Try your luck. Scratch this off here
FR: Tentez votre chance. Grattez Ici

Arte inferior:

Frases a utilizar arte inferior: Importante resaltar las palabras Gratuita (en maysculas en todos los
idiomas) y 24 Horas.
ES: Usted ha ganado una videncia GRATUITA recbala en 24 horas.
PT: Voce ganhou uma videncia GRATUITA recebera em 24 horas.
EN: You have won a FREE psychic reading and will receive it in 24 hours.
FR: Vous venez de gagner une voyance GRATUITE! recevez la dans moins de 24 heures.

8- Pop-up: Es el que permite recuperar a la gente antes de que se vaya del sitio, en este seccin
reutilizaremos elementos, solo voy a colocar los que necesitamos que generen:
8a- Botn de Registro: 325 x 325 px en png, este es el botn de haga clic aqu del po-pup, ejemplo
de los botones, ya que son dos artes uno normal y uno modificado una vez que el usuario hace clic
en l, y la vista del pop-up:
Normal:

Al hacer clic

Vista del pop-up:

8b- Sello 24 horas: 163 x 149 px en png, es la imagen superior que indica que esta videncia es
gratuita, esta debe parecer un sellos, ejemplo y frases en sus idiomas:

ES: Garantizado - 24 HORAS - Gratuito


PT: Garantido - 24 HORAS - Grtis
EN: Guaranteed - 24 HOURS - Costless
FR: Garantie - 24 HEURES - Gratuit

9- Foto facebook: 450 x 380 px en jpg, y esta es simplemente la foto de perfil del vidente para
facebook.

10- Headers de e-mail:

500 x 150 px en jpg, estas son las imgenes de los e-mails que ya

realizado anteriormente, en este caso necesitaremos 6 headers genricos para la entrega de cada
vidente, de la misma forma que hemos trabajado los anteriores recortados horizontalmente.

Versin desktop

11- ndex mvil:

En este solo se har la versin ndex 1 para la versin mvil, con alguna

modificaciones por el espacio, solo colocar las imgenes que hay que crear, las que se pueden
reutilizar se obvian. Este ndex se divide en formulario de registro y en login o inicio de sesin. A
continuacin los elementos del ndex mvil.
Formualrio de Registro

Login o inicio de sesin

11a- Fondo: 1080 x 1920 px en jpg, es la adaptacin de la versin desktop a una forma vertical,
aqu los ejemplos:
Desktop:

Mvil:

Desktop:

Mvil:

11b- Fondo formulario login: 376 x 346 px en png, esta es la versin recortada de el fondo
formulaio desktop y es para ser utilizada en el login en la versin mvil.

11c- Contenedor Registro / Login: 338 x 50 px en png, esta es la imagen que separa a las palabras
Registro y login, esta tiene que ir acorde con el Fondo formulario login para que exista una
armona entre los artes.

11d- Icono de los imputs de Usuario y contrasea: 57 x 124 px en png, es la imagen que de los
imputs del login. Esta imagen debe describir a el Usuario y la Contrasea.

12- textos mvil: Al igual que el ndex esta es una adaptacin de la versin desktop a mvil,
por ende solo se colocarn los artes a realizar. En este caso ser el header normal y cuando se
realiza un scroll.
Header normal

Header scroll

12a- Header normal: 1080 x 396 px en png, es la imagen superior cuando no se ha realizado un
scroll en la pgina.

12b- Header scroll: 1080 x 248 px en png, es la imagen superior cuando se ha realizado un scroll
en la pgina.

Adapte las fotos que ha recibido para que hacer que vayan en armona con los artes que va
disear.

Si tiene alguna duda por favor comunquese con su superior para que se aclarar lo antes posible,
no importa cul sea la duda preferiblemente pregunte antes de hacer algo y perder valioso tiempo
laboral. Este manual podr ser actualizado, cualquier eventualidad se le ser notificada.
Por favor no distribuir a personas ajenas a la compaa y no divulgar la informacin que aqu se
encuentra.

copyright TERA-smart S.A.

Lic. Jons Salazar


Creative Director
jonas.salazar@tera-smart.com

Você também pode gostar