elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


  Mostrar Mensajes
Páginas: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 [16] 17 18 19 20 21 22 23
151  Media / Diseño Gráfico / Creando páginas webs en: 2 Abril 2009, 01:39 am
Hoy os voy a hablar de las páginas web creadas desde Photoshop, realmente, desde Photoshop solamente creamos el diseño y los fondos, pero para finalizar nuestro diseño web nos es necesario algún que otro programita más. Entre ellos necesitaremos el Adobe ImageReady, nosotros los usaremos en su versión CS2 y por otro lado también nos hará falta el Dreamweaver de Macromedia, lo usaremos en su versión 8. Con estos tres programas y un poco de inmaginación vereis el tipo de páginas web que podemos llegar a hacer, en principio haremos una web estática, es decir, hay que cambiar el contenido de forma manual. Ya cuando vayamos avanzando haremos un tutorial sobre páginas webs dinámicas.

Photoshop

Comenzamos con Photoshop, creamos un nuevo documento, nosotros le vamos a dar un formato de (1024×800) esto ya depende de nuestro contenido y demás, nosotros en principio le daremos este. Una vez que ya tenemos delante de nosotros nuestro escenario comenzaremos a trabajar. Para ello nos hará falta las reglas si no las tienes colocadas puedes colocarlas en Vista—> Reglas (Ctrl+R). Una vez ya colocada las Reglas comenzaremos a marcar nuestra página, para ello marcaremos las siguientes secciones: Banner, dos menús laterales, una columna de contenido en el centro y un pie de página. Para marcar con las reglas debemos que pulsar nuestro ratón con el botón izquierdo dentro de la regla, mantenerlo pulsado y arrastrarlo hasta nuestro escenario de la siguiente forma.



Pues así tenemos hacerlo con ambas reglas, tanto con la regla superior como la de la izquierda, y vamos formando espacios donde irán nuestro contenido, una vez que ya tenemos delimitado esos espacios nos tocaría rellenarlos con el material adecuado que deseamos introducir. Además con la ayuda de las guiás hemos delimitado los márgenes tanto los laterales como el inferior y superior, para que no se salgan las cosas de esos límites y se respeta un mínimo de organización y márgenes.



Bien empecemos por el principio, el Banner, muy sencillo lo abrimos con Photoshop, marcamos copiamos y pegamos en nuestra web y lo colocamos en su correspondiente hueco. Yo voy a aprovechar y voy a hacer una web que tengo pendiente del Colectivo CEPA. Una vez colocado el Banner continuaremos con el menú de la izquierda al cual lo vamos a llamar Menú Principal. Para ello vamos a crear antes un Grupo dentro de las capas para poder tenerlas bien ordenadas. A la cual le vamos a llamar “menu left”, ahora creamos una capa. Que la colocaremos dentro de está carpeta que hemos creado. Decir también que cada vez que hagáis un botón como es inicio, contactos, etc… hay que crearlo en capas independientes el uno al otro para poder trabajar más cómodo. Yo me voy a permitir sacar un par de guiás más para poder guiarme a la altura a la que voy a colocar las letras para que estén a la misma altura tanto en la columna de la izquierda como en la de la derecha. Ya tenemos colocados los primeros botones de la columna de la izquierda quedando algo así.



 
Bien empecemos por el principio, el Banner, muy sencillo lo abrimos con Photoshop, marcamos copiamos y pegamos en nuestra web y lo colocamos en su correspondiente hueco. Yo voy a aprovechar y voy a hacer una web que tengo pendiente del Colectivo CEPA. Una vez colocado el Banner continuaremos con el menú de la izquierda al cual lo vamos a llamar Menú Principal. Para ello vamos a crear antes un Grupo dentro de las capas para poder tenerlas bien ordenadas. A la cual le vamos a llamar “menu left”, ahora creamos una capa. Que la colocaremos dentro de está carpeta que hemos creado. Decir también que cada vez que hagáis un botón como es inicio, contactos, etc… hay que crearlo en capas independientes el uno al otro para poder trabajar más cómodo. Yo me voy a permitir sacar un par de guiás más para poder guiarme a la altura a la que voy a colocar las letras para que estén a la misma altura tanto en la columna de la izquierda como en la de la derecha. Ya tenemos colocados los primeros botones de la columna de la izquierda quedando algo así.



  Solamente he puesto unos ejemplos para que lo veáis bien podéis poner cuando os deje la resolución que hayáis puesto al comienzo. Ahora a su vez crearemos el menú de la derecha el cual pretendo que las letras que coloque a continuación estén a la misma altura en el de la izquierda, para ello ya antes puse su correspondientes guiás. Aquí incluiré una imagen a la cual después le haremos un enlace al final.

    Ya tenemos las dos columnas rellenas, yo solamente he puesto un pequeño ejemplo para que lo veáis.



Ahora vamos a lo principal, al centro vamos a buscar un fondo con sentido, usando los dos manuales anteriores yo me he creado este centro. Solamente he creado la imagen la he copiado y la he pegado en el centro dentro de una nueva capa.



Ahora vamos a crear el footer, para ello vamos a crear una capa nueva y con la herramienta marco rectangular (M) seleccionamos la zona del footer. Una vez que lo tenemos marcado, por ejemplo le vamos a hacer un degradado desde un tono gris hacia un blanco para resaltar un poco más esa zona de la web. Todo esto ya dependerá de nuestros gustos hacia los colores, de todas formas os dejo como me ha quedado.




Ya hemos hecho todo lo que se hace con Photoshop dentro de este manual que es diseñar nuestra web ahora tenemos que llenarla de textos, imágenes, enlaces y contenidos para ello vamos a continuar con el siguiente programa ImageReady, recomiendo que hagáis una copia antes de empezar a trabajar con Imageready. Para pasar nuestra web de Photoshop a Imageready tenemos que hace click en el siguiente botón. (Mayus+Ctrl+M)



ImageReady


Aquí lo que vamos a hacer es recortar toda nuestra web en pequeñas imágenes, será útil para cuando nos vayamos a Dreamweaver y para que a la hora de cargar nuestro sitio web no se haga muy pesado, ya que en vez de ser una gran imagen que pese mucho, serán pequeñas imágenes de poco peso cada una.



Comencemos a recortar nuestras imágenes. Para ello usaremos la Herramienta Sector (K) he iremos recortando imagen por imagen y botón por botón, tenemos que recordar que tanto el centro como el footer lo tenemos que seleccionar entero. Comencemos de arriba a abajo. Ya tenemos recortada nuestro banner.



Continuemos con el menú, los botones y la columna de la derecha y después haremos el centro y el footer. Una vez que ya tenemos el Banner y las dos columnas de menús recortadas tendríamos que tener algo parecido a esto.



Ahora vamos a recortar el centro y el footer, para ello seleccionamos todas las imágenes que tengamos como centro, en mi caso la hoja y las tres cintas de celo, después veréis el motivo de esto. Y por último el footer, y nos quedaría algo así ya con todo seleccionado.



Una vez que ya tenemos todo recortado tenemos que pasarlo a html, para que después el Dreamweaver sea capaz de interpretarlo. Así que nos vamos a Archivos—> Guardar Optimizada… (Ctrl + Alt + S) le ponemos como titulo index.html ya que el index es la web principal y le damos a aceptar. Si abrimos el index.html con algún explorador nos dará el resultado, en nuestro caso ha sido este.



Ahora vamos a trabajar con Dreamweaver, para comenzar a introducir texto y demás. Para ello ya podemos cerrar tanto Photoshop, como Imagineready. Y abrimos Dreamweaver.

Dreamweaver

Ya estamos dentro de Dreamweaver, desde aquí abrimos nuestro archivo index.html



Lo primero que vamos a hacer es centrar la web, para ello vamos a acceder al código de nuestro archivo index.html, por lo que accedemos al apartado “Código”



Una vez dentro vamos a buscar la etiqueta <body>



Justo delante de esta etiqueta vamos a escribir <center>, después vamos a buscar la etiqueta </body> la cual cierra la sentencia del cuerpo de la web y vamos a poner al final de esta etiqueta </center>





De esta manera si volvemos al apartado Diseño ya veremos nuestra web, perfectamente centrada. Una vez que ya está todo centrado vamos a comenzar a la introducción de texto y contenido, para ello nosotros vamos a jugar con tablas. Para comenzar vamos a eliminar la imagen del centro.



E introducimos una tabla en ese hueco que nos ha quedado vacío. Con los valores de 1 celda, 1 columna y 0 en grosor del borde.



Una vez que ya tenemos nuestra tabla en el centro lo que vamos a hacer es poner como fondo la imagen que antes recortamos y acabamos de quitar de aquí. Nos vamos hacia abajo en “Propiedades” y ahí abrimos la carpeta que tenemos marcada.



Una vez ya introducida la imagen empezamos a estirar la tabla hasta completar ese hueco que tenemos hay en blanco, si cuando empezamos a estirar la imagen para ocupar todo el espacio que en el que antes estaba la imagen nos ocurre algo como esto:



No os preocupéis con tan solo hacer click en una de las imágenes que no esté dentro de la tabla que hemos creado, todo se pondrá en su sitio sin ningún tipo de problema y continuamos estirando hasta ocupar todo el espacio. Nos quedaría algo así.



    Ahora hacemos exactamente lo mismo con el footer, quitamos la imagen, metemos una tabla y añadimos la imagen del footer como fondo de esa tabla que hemos creado.

    Y ya solamente introducir las imágenes y textos correspondientes quedándonos un resultado como este.



Aquí acaba este tutorial, espero que no haya sido muy pesado y que sobre todo te haya servido para algo. De todas formas si tenéis algún tipo de duda, podéis comentarla en los comentarios de aquí abajo o en el correo blog@ramondevesa.es

Y recuerda para más información visita blog.ramondevesa.es
152  Media / Diseño Gráfico / Re: Tutorial: crear celo o fixo como querais. en: 30 Marzo 2009, 21:08 pm
Claro, tengo que hacerme publicidad xD y reutilizo mis tutos xD, estoy preparando otro sobre diseño web, se utiliza photoshop y algo de deamweaver para finalizar, ¿estaria bien posteado quí?

Saludos
153  Media / Diseño Gráfico / Tutorial: crear celo o fixo como querais. en: 30 Marzo 2009, 21:00 pm
En este tutorial como bien habéis podido leer, vamos a aprender a crear fiso, si, aunque parezca raro fiso ¿para que? Sinceramente no tiene prácticamente ninguna utilidad, igual que la hoja esquinada, si metemos todas estas pequeñas técnicas en un único diseño nos puede quedar un gran diseño, son matices que hay que ir aprendiendo para después poder dar un toque de profesionalidad a nuestros futuros trabajos.

Comenzaremos como siempre creando un nuevo documento como siempre algo amplio para poder trabajar de una forma cómoda, yo siempre le doy lo mismo 700 x 700 y el colo del fondo nos da igual por que ahora lo vamos a pintar de un color que no sea ni muy claro (blanco) ni muy oscuro (negro), para poder observar bien el efecto que vamos a darle al celo. Comencemos pues.

Rellenamos el nuevo documento con el cubo de pintura seleccionamos un color como antes dije que no sea ni muy claro ni muy oscuro para ver bien el efecto yo en este caso usaré como fondo un azul (3f89c3).

Creamos una nueva capa. Capa—> Nueva—> Capa… (Mayús+Contr+N), lo que vamos a hacer ahora es crear nuestro celo, sobre esa última capa creada, con la herramienta, Herramienta Marco Rectangular (M) crearemos nuestro molde de nuestro celo.



    En ese rectángulo que tenemos ahí en medio tenemos que rellenarlo con un color de tono gris para hacer el efecto plástico del celo. Yo he usado este tono de gris (cfcece). Una vez que ya tengamos nuestro rectángulo relleno vamos a comenzar a darle sus correspondientes efectos, el primero es la sombra paralela. Para ello tenemos que dirigirnos a Capa—> Estilo de Capa—> Sombra Paralela…

    Esto es al gusto pero yo le he dado unos valores de 60% de Opacidad 2px de distancia, 0px de Extensión y 2px de Tamaño.




Ahora usaremos la herramienta Subexponer y hacemos 3 o 4 líneas de forma diagonal.



Y hacemos lo mismo pero con la heramienta Sobreexponer quedando algo más o menos así.



Continuemos, vamos a darle el efecto de plastico para ello nos vamos a ir a Filtro—> Artístico—> Plastificado… En intensidad lo he puesto a 9 Detalle a 11 y suavizar a 8 eso ya depende de vuestros gustos. Nos quedaría algo así.



Este es nuestro celo, lo único que aun no hemos acabado, ya que le vamos a dar un último toque y es algo de transparencia, cuando colocas un celo encima de un folio ves lo que hay debajo, no es opaco así que vamos a darle algo de transparencia.



Yo le he dado ese 40% y ya nos queda un celo mucho más real el resultado sería este.



Una recomendación es que cada vez que querais hacer un trozo de celo lo hagais en capas diferentes, de esta forma os quitaréis problemas. Con este efecto podemos conseguir cosas como estas.



Para más información consultar blog.ramondevesa.es
154  Media / Diseño Gráfico / Re: Tutorial: Esquinar hoja en: 26 Marzo 2009, 01:11 am
lo mismo quiero hacer pero en flash un anuncio que por ejemplo salga de la esquina superior derecha un desdobles de la pagina y salga el anuncio muchos ya lo hemos visto alguien sabe como se hace =)  seria muy grato que me hicieran instalar flash para aprender este detalle que me parece muy interesante...

¿Te vale esto? http://www.elliottkember.com/sexy_curls.html
155  Media / Diseño Gráfico / Tutorial: Esquinar hoja en: 26 Marzo 2009, 00:49 am
Bueno comenzaré con mi primer tutorial, el cual consistirá en esquinar una posible hoja de una forma muy simple y sencilla como podréis comprobar.

Para comenzar, creamos un documento nuevo, de unas dimensiones cómodas para poder trabajar bien. Yo por ejemplo le voy a dar una proporción de 700 x 700, el fondo es lo de menos, ya que ahora vamos a rellenarlo de un color.

Ahora con el bote de pintura (G) y con un color diferente a negro y blanco, (para poder ver bien el efecto) pintamos el fondo del color que queramos yo por ejemplo voy a usar un naranja (fab301) como fondo.


Ahora crearemos una capa nueva Capa ---> Nueva ---> Capa... (Mayús+Contr+N) sobre esa nueva capa, creamos un rectángulo el cual será nuestra hoja a esquinar. Y con el bote de pintura nuevamente, rellenamos el rectángulo con el color que queramos, yo en este caso, he usado un verde (8dc54c)


Hasta aquí todo muy fácil ¿no? De todas formas si tienes alguna duda o bien puedes dejar un comentario o enviar un correo a blog@ramondevesa.es. Continuemos.

Vamos a darle un efecto de relieve a nuestro folio, para crear la sombra que se creará cuando levantemos nuestra esquina.

Teniendo la capa que hemos creado anteriormente seleccionada vamos a acceder a Capa---> Estilo de Capa---> Sombra paralela... Yo he puesto 75 % de opacidad, 120º de ángulo, 5 distancia, 0 extención y 5 de tamaño una vez que los tengamos introducidos le damos a Ok.


Y vemos como se crea una fina sombra en la parte derecha de nuestra hoja.


Ahora vamos a crear una capa nueva, pero cuidado, no se crea como creamos la capa anterior, sino que nos vamos hacia Capa---> Estilo de Capa ---> Crear Capa y nos saldrá una advertencia a la cual le decimos ok. Lo que hemos hecho ha sido sacar el efecto de sobra paralela a una capa.

Continuamos ahora doblando la esquina que queremos doblar, todo esto dependerá también del número de grados que le hayáis dado antes al efecto de sombra paralela, si le disteis 120 como nosotros la sombra estará en la derecha, entonces levantaremos la esquina inferior izquierda. Para levantar la esquina nos iremos a Edición---> Transformar ---> Deformar.


Pinchamos con nuestro ratón en el cuadrado que se encuentra en la parte inferior izquierda de nuestra hoja verde y lo mantenemos pulsado y lo movemos hasta donde queremos que llegue la esquina de la hoja.


Y lo guardamos y este es el resultado de nuestra hoja con una esquina doblada.


Sustraido de www.blog.ramondevesa.es en este Blog también está en Ingles

156  Seguridad Informática / Nivel Web / Re: ¿Que es file discloure? en: 11 Febrero 2009, 20:32 pm
Yo lo he metido en Google y me lo ha corregido de la siguiente forma file disclosure ¿es lo mismo? yo creo que tiene toda la pinta.
157  Foros Generales / Sugerencias y dudas sobre el Foro / Re: porque me borraron el post en: 2 Febrero 2009, 13:34 pm
El espacio son las normas de comportamiento que tienen todos los foros...
158  Programación / PHP / Cuestionario tipo examen en: 31 Octubre 2008, 15:15 pm
Saludos a tod@s, tengo un pequeño problema, y es el siguiente, tengo que crear una especie de gynmcana, mediante internet de tal forma que se les presenta una pregunta y los niños tienen que responder adecuadamente. Mi problema es qu me he confiado demasiado, pensando que hiba a ser posible encontrar algo por Google, pero la fecha de entrega es el día 14 de Noviembre y estoy viendo que me está pillando el toro. Entonces os cuento cual es mi problema.

La idea es la de crear un formulario, de tal forma que cuando los niños se sienten delante del pc se registren y despues del registro que empiece el cuestionario. De tal forma que el cuestionario controla el tiempo en el que se hace el cuestionario y hasta que la 1º pregunta no este correctamente respondida no puede continuar y pasar a la pregunta siguiente, tambien si habria la posibilidad de crear un apartado desde la pual se le puedan ayudar a los niños a responder las preguntas, y para finalizar que al terminar me llege un correo electronico en el cual me indique las preguntas respondidas, las falladas, el tiempo que ha tardado en acabarlo y la persona que lo ha hecho. no se si habra alguna forma de generar dichos formularios de una forma sencilla, ya que mi conocimiento sobre php es practicamente nulo, me dedico mas a joomla a la hora de webs.

Saludos y gracias
159  Programación / PHP / Re: Formulario sumador en: 17 Octubre 2008, 18:01 pm
ok gracias.

Saludos
160  Seguridad Informática / Materiales y equipos / Re: problema con mi router en: 17 Octubre 2008, 14:59 pm
Google, pon la marca y el modelo y añadele contraseña por defecto.

Saludos
Páginas: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 [16] 17 18 19 20 21 22 23
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines