crear web en adobe muse

Cargando...

Crea la siguiente página, o plantilla web con Adobe® Photoshop, organizala con Adobe® Muse y
súbela a un dominio.com.ar con filezilla etp client.
trataré de ser lo mas detallado y explicativo posible, para evitar dudas, aunque no dudes en preguntar si surge alguna.
en el post se explica todo, desde como crearla, hasta ubicarla y publicarla en la web, incluyendo el procedimiento de conseguir el dominio .com.ar a traves de nic.ar
No recomiendo que solamente te quedes con el Adobe muse, ya que hay bastantes cosas que se consiguen escribiendo los códigos manualmente
Si no ves alguna imagen, carga de nuevo la página

- Página que crearemos
- ¿Para qué nos servirá?
- Programas necesarios
- Adobe muse: creamos el fondo gris
- Adobe photoshop: creamos el fondo gris
Tutorial por imágenes y por video
- Adobe photoshop: creamos el marco y los botones de la galería
Tutorial por imágenes y por video
- Adobe photoshop: creamos los botones del menú
Tutorial por imágenes y por video
- Adobe photoshop: creamos los botones de la página principal
Tutorial por imágenes y por video
- Adobe photoshop: creamos los renglones y las barras
Tutorial por imágenes y por video

- Adobe Muse: organizamos la página
Creamos la página parte 1
Creamos la página parte 2

- Delegamos el dominio y preparamos el filezilla

Página: http://www.tassito.com.ar

- para comprender el Adobe Muse
- para crear la plantilla o buscar ideas de plantillas
- para comprender como subir la página a la web (dominio y hosting)
- para lo que te pueda servir

(No recomiendo crear la misma plantilla, ya que tarda en cargar, sino en sacar ideas y comprender el Adobe Muse, la programación web, el adobe photoshop y el filezilla)

Visita éste tutorial para darte una idea de cómo es el Adobe Muse por dentro

Abrimos el Adobe Muse y creamos un nuevo sitio con las siguientes medidas:

Luego, al terminar de crearlo, hacemos doble click en la futura página principal

Ahora le debemos cambiar el fondo "relleno" y el fondo "relleno de navegador" con el color #E8E8E8, al trazo de la web, le quitamos color:

guardamos el archivo

nos descargamos ésta imagen, la abrimos con el photoshop, clickeamos dos veces en la única capa que hay y le damos a aceptar, para así desbloquearla

Ahora vamos al menú Imagen>Ajustes>Mapa de degradado. Se nos abrirá una venetana, en la cual tendremosq ue clickear en la barra de color (o en su defecto, blanca y negra) para así modificarla a nuestro gusto.
se nos abrírá una ventana más y deberemos clickear dos veces en el primer señalador (el de la izquierda) e insertar el color #D7D7D7, luego, en el otro señalador, pondremos el color #E8E8E8, le damos a aceptar a todas las ventanas

Duplicamos la única capa (click derecho en la capa>duplicar capa>aceptar) y seleccionamos la herramienta marco elíptico (

) que está ubicada dentro de la herramienta marco rectangular (

), solo debes mantener apretada esta para que aparezca.
seleccionamos una parte de la imagen, de tamaño similar a como indica en la imagen, luego clickeamos en la herramienta máscara de capa (

).
realizamos lo mismo con la otra capa que tenemos, aunque seleccionamos otra parte de la imagen

ahora las separamos, que haya un gran espacio entre ambas y un gran espacio entre el limite del documento.

Ahora seleccionamos la máscara de capa de cualquiera de las dos capas

vamos al menú Filtro>Desenfocar>Desenfoque gaussiano... y ponemos el valor de "30", luego aceptamos y repetimos los dos ultimos pasos con la otra capa

elegimos la herramienta sector (

), y seleccionamos cada una de las imagenes, aunque con un gran espacio extra

Finalmente, vamos al menú Archivo>Guardar para web y dispositivos... y guardamos.
Si por casualidad, te aparecen blancas las imagenes, como en la imgaen, presionala y elige en el menú debajo del botón guardar "PNG-24".

Eliminamos las imagenes vacias (son de color blancas o negras) en la carpeta donde se guardó y nos quedarán dos imagenes similares a estas:

(1) (2)

Puedes ver el tutorial también en video (miralo en 720p HD):

Puedes descargar el PSD de este ejercicio clickeando acá

Abrimos el photoshop, y creamos un nuevo documento con las siguientes medidas (archivo>Nuevo)

clickeamos en la herramienta rectangulo redondeado (

) si no lo ves, mantén precionado en la herramienta rectángulo (

) para visualizarlo.
Luego de presionar, modificamos lo que indica en la imágen

Vamos al menú Vista>Mostrar>Cuadrícula y realizamos la figura con dos cuadrados de espacio entre ésta y el borde

Al finalizar, modificamos el radio que habíamos modificado antes por "10"

y realizamos una figura horizontal que quede en el medio de la anterior y que sobresalga apenas un cuadrado

Seleccionamos las dos capas que se crearon (CTRL+ click del mouse en cada una), clickeamos con el botón derecho del mouse y elegimos combinar capas. Quitamos la cuadrícula (Ver>mostrar>cuadrícula), seleccionamos la herramienta rectangulo redondeado (si es que se había deseleccionado) y modificamos los valores indicados en la imagen

Creamos una figura de menor tamaño a la primera, clickeamos con el botón derecho del mouse y elegimos "Hacer seleccion...", le damos a aceptar y tocamos la tecla Suprimir (Supr)

Por ahora nos tendría que estar quedando así (ignora el color)

Clickeamos en la capa que tiene nuestra figura, hacemos click derecho y seleccionamos opciones de fusión.
Vamos a "sombra paralela" y modificamos los siguientes valores

Luego, sin cerrar la ventana de opciones de fusión, seleccionamos "superposición de degradado", clickeamos en el rectangulo de color (o blanco y negro) se nos abrirá una ventana más, clickeamos en el señalador de la izquierda y ponemos el valor #ebebeb, (en el otro señalador debe estar el color blanco, si no lo está clickealo y seleccioná el color blanco #ffffff)

Por ultimo en la ventana de opciones de fusión, vamos a "trazo", modificamos los valores indicados en la imagen y seleccionamos en el rectangulo de color para cambiar el color a blanco (#ffffff)

Creamos una nueva capa. Seleccionamos la herramienta marco rectangular. mantenemos apretados SHIFT y creamos un pequeño cuadrado, luego lo pintamos con cualquier color

Vamos al menú Editar>Transformación libre. mantenemos apretado SHIFT y y rotamos el cuadrado hasta que se convierta en un rombo (puedes aumentar la vista para trabajar mejor)

Elegimos la herramienta Marco rectangular de nuevo y seleccionamos la mitad del rombo. luego lo eliminamos con la tecla suprimir (Supr)

Ubicamos el triangulo, hacemos click derecho en la capa de ésta figura y seleccionamos opciones de fusión...
elegimos "Sombra interior" y modificamos los valores como indica la imagen

Luego elegimos "Superposición de color", clickeamos en el rectángulo de color y elegimos el color blanco (#ffffff)

Duplicamos la capa del triangulo (click derecho en la capa > Duplicar capa > aceptar) vamos al menú editar>transformar>voltear horizontal y ubicamos el nuevo triangulo en el otro extremo.
nos tendría que ir quedando algo similar a esto

Seleccionamos todas las capas menos el fondo (CTRL + click en cada una de las capas) hacemos click derecho y presionamos combinar capas

Elegimos de nuevo la herramienta marco rectangular y seleccionamos el botón "anterior" de nuestra galería como indica la imagen. al finalizar, clickeamos con el botón derecho y seleccionamos "Capa vía cortar"
realizamos este mismo paso con le otro botón de la galería.

al finalizar, movemos las dos neuvas capas que aparecieron (las capas de los botones) al centro. las seleccionamos (CTRL + click en cada una de las capas) y clickeamos en combinar capas

abrimos de nuevo la herramienta rectángulo redondeado y modificamos los valores de su menú como indica la imagen:

Seleccionamos el color negro en la paleta (#000000)

Realizamos la figura similar a la que está en la imagen, creamos una nueva capa y seleccionamos "rellenar razado"

Eliminamos el fondo (click derecho>eliminar capa)

Modificamos el lienzo del documento, ya que organizaremos las capas; vamos al menú Imagen>Tamaño de lienzo... seleccionamos en el menú la opción "píxeles" y ponemos el valor de "1200". Luego seleccionamos la flecha que indica a la izquierda

Movemos de lugar la capa de los botones y la capa del cuadrado fuera de la otra capa, para darle mas espacio.

Con la herramienta sector, las seleccionamos con un espacio "extra" para que pueda entrar la sombra también.
nos vamos a archivo>guardar para web y dispositivos..., seleccionamos cada una de las 4 imagenes (el marco, el botón negro, el botón derecho y el botón izquierdo de la galería) una por vez y seleccionamos el formato PNG24 como expliqué al crear el fondo gris con photoshop.

tendríamos que tener 4 imagenes similares a estas;

(1)(2)(3)(4)

Puedes ver el tutorial también en video (miralo en 720p HD):

Descarga el PSD de este ejercicio clickeando acá

Creamos un nuevo documento en Adobe Photoshop con las siguientes mediciones:

Seleccionamos la herramienta cuadrado rectángulo (

) y modificamos el radio y seleccionamos la opción que indica la imagen:

luego realizamos una figura, que no toque los bordes, similar a esta:

hacemos un click derecho en la capa que se creó, presionamos en "opciones de fusión..." y nos dirigimos a superposición de degradado. estando allí modificamos el angulo a 100°

Luego presionamos en el rectangulo de color situado arriba del ángulo, se nos aparecerá una nueva ventana y clickearemos en el señalador de una punta y le cambiamos el color a #F2F2F2

realizamos lo mismo con el otro señalador, anque con el color #E1E1E1. Luego los movemos al centro, similar a como indica la imagen

nos vamos a la pestaña de "sombra paralela" y cambiamos los valores como indica la imagen

Aceptamos todo, y clickeamos con el botón derecho la capa la cual le pusimos las opciones de fusión, clickeamos en duplicar capa y aceptamos de nuevo.
Hacemos click derecho en la nueva capa creada y seleccionamos opciones de fusion nuevamente.
nos vamos a sombra paralela y modificamos las siguientes opciones: modo de fusión a normal, color a blanco (#FFFFFF), distancia a 1 y tamaño a 1

clickeamos en sombra paralela y lo modificamos como indica la imagen

Aceptamos todo y seleccionamos las dos capas (ctrl + click) y las duplicamos (click derecho>duplicar capa...)
seleccionamos una de las dos capas nuevas y clickeamos en su mascara de capa

nos dirigimos a edicion>transformación libre y cambiamos el valor del alto a 50%

Te debería quedar algo así, si es así, preciona la tecla enter para confirmar y realizalo con la otra capa creada

(opcional) al terminar de transformar, renombra las capas clickeando dos veces en el nombre, para así no tener problema más tarde (ponle un nombre que las diferencie, como 1-1,1-2,2-1,2-2)

Por último paso, crea 4 capas nuevas, y combina una con cada capa (click derecho>combinar capas)

borra el fondo (con la goma, no quites la capa) y Guarda el documento en formato .PSD

Puedes ver el tutorial también en video (miralo en 720p HD):

Descarga el PSD de este ejercicio clickeando acá

creamos un nuevo documento con el photoshop, con las siguientes medidas:

seleccionamos la herramienta rectangulo redondeado, le aplicamos un radio de 5 píxeles y seleccionamos la opción de la izquierda

Dibujamos cuadrados, cuantos quieras y con la forma que quieras, solo procura que haya un espacio considerable en los lados y arriba (para luego agregarle una flecha). en mi caso, crearé las formas autenticas que están en la web;

Ahora seleccionamos la herramienta forma personalizada (si no la vez, mantén precionado la herramienta rectangulo redondeado, recientemente usada) y seleccionamos la forma de la flecha gorda, donde indica la imagen

Empezamos a realizar las flechas, puedes hacerlas como quieras, yo las haré bien estiradas

Como la flecha solo apunta hacia la derecha, si quieres que apunte hacia otro lado, primero haz la flecha y luego ve a edición>transformar>voltear horizontal/vertical, o en su defecto, mediante la transformacion libre;

Al finalizar las flechas, combina cada flecha con su cuadrado, (clickeas en la flecha y luego clickeas en el cuadrado correspondiente con el mouse + ctrl) te deberían quedar 4 capas con la forma de los cuadrados + las flechas.
ahora seleccionamos la herramienta marco rectangular (

) y seleccionamos un cuadrado en cada figura, y lo borramos con la tecla SUPR

Nos debería quedar algo similar a esto

ahora seleccionamos una capa que contenga un cuadrado y una flecha (cualquiera), clickeamos el botón derecho del mouse y seleccionamos opciones de fusion...
cambiamos lo seleccionado en la imagen de "sombra paralela"

Nos vamos a superposición de degradado, cambiamos el valor a 120°

Seleccionamos en la barra del degradado (en este caso la img blanca y negra) y cambiamos el color del señalador de la izquierda por #E2A9A9 y el del otro lado por #F8D2D2, aunque puedes elegir el color que te guste

Ahora repite el paso anterior en las demas figuras, aunque con otros colores, yo usaré los mismos colores asi no se hace largo el tutorial.

Buscamos las imagenes que tendrá cada cuadrado en su interior, en mi caso no pondré las imgs que tiene la web, pondre una imagen colorida, para ahorrar espacio. en cuanto la tengamos, vamos a edicion>pegar

clickeamos en la capa de cualquier figura, seleccionamos la herramienta varita magica (

) y con ella seleccionamos el espacio vacio del cuadrado, seleccionamos la capa de la imagen y clickeamos en el botón mascara de capa (

) ubicado en la parte inferior de la ventana de capas.debería quedar algo similar a lo indicado en la imagen:

En la capa con la mascara de capa, seleccionamos opciones de fusion... (click derecho>opciones de fusion)
nos vamos a sombra paralela, y cambiamos el color, el modo de fusion, el tamaño y la distancia

luego a sombra interior

Realizamos los tres pasos anteriores para cada espacio vacio de cada figura, yo lo realizaré con la misma imagen.
Duplicamos todas las capas, exceptuando el fondo, y en cada capa duplicada, nos vamos a opciones de fusion>superposición de color y le aplicamos el color negro con el modo de fusion "color"

nos debería quedar algo similar a esto;

Con la herramienta sector, selecciona cada cuadrado con su flecha;

Borra el fondo, ve a archivo>guardar para web y dispositivos> seleccionalos todos y pon "PNG-24" y guardalos.
Luego, desactiva las capas blanco y negro

y realiza el mismo paso, aunque nombrandolas diferente.

Puedes ver el tutorial también en video (miralo en 720p HD):

Descarga el PSD de este ejercicio clickeando acá

Creamos un documento en Adobe Photoshop con las siguientes medidas.

desbloqueamos el fondo, clickeando dos veces sobre la capa y presionando aceptar

clickeamos con el botón derecho del mouse sobre la capa y elegimos opciones de fusion, nos vamos a sombra paralela y modificamos el tamaño a 0, la distancia a 1 y el color a #C1C1C1

Nos vamos a sombra paralela y también modificamos los siguientes valores

Ahora nos vamos a imagen>tamaño de lienzo... y modificamos el valor de 2 por 20. luego presionamos la flecha de la izquierda

seleccionamos la goma y elegimos el siguiente estilo de goma

y borramos las puntas de la barra

Guardamos el documento como .PNG, aunque no está de mas guardarlo como PSD

Creamos otro documento, con las siguientes medidas;

desbloqueamos el fondo y aplicamos una sombra interior con las siguientes modificaciones

Lo guardamos como .PSD y .PNG, aunque se puede guardar en .GIF o JPG también

Creamos otro documento, con estas medidas:

desbloqueamos el fondo y le aplicamos sombra paralela con estos valores modificados

lo guardamos como .PNG solamente (es opcional guardarlo en PSD)

Creamos el último documento, con las siguientes medidas

abrimos el documento PSD que habíamos guardado (el de la barra ancha por si guardaste de mas) (archivo>abrir) y "movemos" la barra hacia el nuevo documento

movemos la barra a la parte superior del documento

Eliminamos el fondo (click derecho>eliminar capa)

Con la herramienta marco rectangular, seleccionamos todo el documento

Nos vamos a Edicion>definir motivo y aceptamos

Vamos a imagen>tamaño de lienzo.. y lo modificamos por estos valores

pintamos la unica capa que tenemos con cualquier color, luego nos vamos a opciones de fusion (click derecho> opciones de fusion), seleccionamos superposición de motivo y elegimos el motivo que hicimos

por ultimo cambiamos el valor del relleno de la capa a 0%

guarda el documento en .PNG, aunque no vendría mal el PSD

descarga todos los PSD de las barras y renglones desde aquí en formato Rar

Abrimos el archivo de adobe muse que creamos al inicio del post y hacemos doble click en la página

Nos vamos a archivo> colocar y seleccionamos; los dos archivos de fondo, el marco y el botón negro de la galería

Los organizamos, copiando y pegando otro marco de galería y moviendolos para que quede de la mejor forma (esta vez, igual a la forma de la web)

Trae al frente las galerías (click derecho>traer al frente)

Nos vamos a la barra lateral que tenemos en el adobe muse, seleccionamos biblioteca de widgets como menú y seleccionamos presentación de diapositivas, el básico

Lo agrandamos para que quepa en el marco

Nos saldrá un circulo azul con una flecha blanca en la parte superior derecha de la presentación de dapositivas basica, la clickeamos y cambiamos las opciones para que queden igual a esta;

hacemos click en la flecha siguiente (es un ">" que está dentro del cuadrado gris que viene con la presentación de diapositivas basica), luego nos vamos a la barra laterial, seleccionamos el menú relleno y clickeamos en el ícono de la carpeta, seleccionamos el boton de la galeria

Ajustamos el botón para que se bea el botón perfectamente

ubicamos el botón en el marco, agranda la pantalla y desactiva las guias intelignetes (ver>guias inteligentes) para hacerlo facilmente. cuando lo tengas ubicado, envíalo hacia atras.

Ajusta y ubica el botón "anterior", debería quedarte algo similar a esto;

Selecciona el marco y traelo al frente, ya debe tener la forma de la galería. ahora mueve el botón gris a la imagen, puedes reducirle un poco de opacidad si quieres (en la barra superior)

Selecciona la herramienta texto (

) de la barra superior y crea un rectángulo, escribe lo que deseas (en este caso "Taringa! visita mis temas"

y ubicalo en el centro del botón

Selecciona todos los objetos de la galería (la diapositivas, el marco, el texto y el botón negro) (shift+ click en cada uno) y agrupalos (click derecho > agrupar)

Copia el grupo y pegalo en el mismo documento y ubicalo

te quedaría algo así

Con la herramienta cuadrado (

) haz un cuadrado debajo de la galería recién pegada.

Luego ve a la parte superior y rellenalo con el gris predeterminado, quitale el trazo y aplicale puntas redondeadas

Con la herramienta texto, haz dos click dentro del cuadrado y escribe lo que quieras

Ve a archivo>colocar y coloca la barra lateral grande y los renglones

Ubicalos bien;

Ve a archivo>Colocar botón de photoshop... y selecciona el archivo PSD de los botones del menú

Selecciona la capa que quieras que esté en cada lugar, yo en el estado normal pondré la elevada, en rollover (cuando está el mouse encima) pondré la hundida. si quieres que sea igual a la web, pon primero el fondo o "compuesto", luego la elevada y luego la hundida.

Nos quedaría algo así, luego seleccionamos la herramienta texto y le hacemos dos clicks sobre el boton (tal vez necesites 3 clicks)

Escribimos "Página principal" y modifica los siguientes puntos en la barra superior

nos quedaría algo similar a esto;

Realizamos lo mismo con los demás botones.

Agregamos la barra lateral chica y la horizontal chica (archivo>colocar) y las ubicamos

escribimos MU adobe, y lo modificás a tu gusto (opcional)

Nos vamos a ésta página, ponemos nuestro futuro dominio web y copiamos todo el codigo de al lado.

Volvemos al muse, vamos a objeto>insertar html y lo pegamos. le damos al Ok y lo ubicamos ( a veces aparece el botón, otras un cuadrado que dice html)

Creamos un rectangulo con la herramienta del mismo nombre

Seleccionamos el ícono de la carpeta y añadimos un botón de color. luego le quitamos el fondo, y seleccionamos el cuadrado del medio en posición.

Ajustamos el rectangulo para que pueda verse la imagen completa

Clickeamos en la parte donde dice Rollover y seleccionamos la que es en blanco y negro

Realizamos lo mismo con los demás botones.

Nos vamos a nic.ar y ponemos nuestro futuro dominio

Si nos dice que está disponible, clickeamos donde dice "aquí"

Agregamos nuestro dominio y nuestro mail (mail valido, ya que necesitamos confirmar muchas cosas)

Clickeamos en nueva identidad

Seleccionamos con nuestros datos, pueden ser falsos, aunque el nombre y el mail no

Agregamos solo el DNI, con un numero de 8 cifras, que esté dentro de los 40 millones

Pon cualquier nombre aquí

Selecciona cualquier nombre de aquí

Clickeamos en delegar

Nos vamos a tuars.com y nos registramos, también con mail valido.

nos llegará un mail de confirmación con un link: lo abrimos y registramos nuestro futuro dominio. (recuerda la contraseña, te servirá para usar el FTP filezilla)

Esperamos un ratito, le damos a F5 y clickeamos en Acceder

Vamos a detalles

Copiamos esos datos y los pegamos en la pestaña que dejamos abierta de nic.ar

así;

Seleccionamos de nuevo una persona, aceptamos y luego nos mostrará un resumen de la informacion.
rellenamos el captcha de abajo y le damos a aceptar.
nos enviarán dos mails, el primero de la identidad y el segundo del host. el segundo hay que reenviarlo, tené cuidado acá, hotmail y gmail le cambian el asunto (ej; RE) y le agregan descripcion (ej: enviado por:...) al principio, quitaselas.

Vamos de vuelta a la pestaña de tuars.com y tenemos en cuena los datos del FTP (username, password e IP)