Tutoriales photoshop diseñar un hermosos sitio web desce cero
of 34
Transcript of Tutoriales photoshop diseñar un hermosos sitio web desce cero
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
1/34
m
cr
co
qu
Horlguna vez
tambin.
ar estos di
nocimient
e un dise
de finaliz
has querid
ientras n
seos. Ho
s de Phot
o de sitio
acin: 2-4o disear u
avega por l
en da pu
shop y un
eb un asp
DideMarko
Detall
horas
na pgina
la web, he
edo y voy
ojo para el
cto hermo
sesdePrljic el 2
s Tutorial
Program
Dificulta
web bonita
visto a tant
a ensearte
detalle. A
so. Arranc
1
r ucer
de abril 2
a: Editor: Interme
, pero no s
as pginas
cmo hac
travs de e
a Photosho
h009 con 3
TML, Pho
io
aba cmo
web que b
rlo tambi
ste tutorial
p y vamos
rm
7 coment
toshop
Para ser s
uscan buen
n! En esen
, voy a se
a ir!
so
rios
incero, ha
os y ojal
cia, se req
alar esos p
iti
e unos a
ue tena l
iere unos
equeos d
we
s, que me
s habilida
pocos
talles que
pas a
es para
hacen
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
2/34
P
L
pl
el
16
ex
tie
tuP
so 1 -Desc
s diseos
antillas de
archivo zi
_col. La di
plicarlo un
ne 4 cajas
orial, podr
so 2 - Defi
argar la p
ue se crea
la red del s
y buscar
ferencia e
poco ms,
en su dise
s ver esto
nir la estr
antilla de
n casi todo
istema de
lantillas P
tre estos d
, si usted ti
o, ya sea
en accin.
ctura
960 Grid
s basados
hotoshop.
SD. Usted
os son, co
ene 3 cajas
ue usted e
ystemn el 960
Usted pue
ver que h
o su nom
en su dise
lija la red 1
2
rid Syste
de encontr
ay dos dif
bre indica,
o que ust
2_col o 16
. Por lo ta
arlos en la
rentes tipo
uno se hac
d elegira
_col por 1
to, antes d
960.gs siti
s de planti
e con 12 c
la red 12_
y 16 est
e empezar
web ofici
llas: una es
olumnas y
ol, porque
n divisable
tenemos q
al.Simple
12_col y
la otra con
12 es divi
por 4.Si u
ue descarg
ente desc
l otro es
16 colum
ible por 3,
sted sigue
ar las
mprime
as. Para
o si
ste
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
3/34
A
sit
ej
D
16
fo
tes de abri
io. Esto es
mplificad
aso
spus de
_col.psd. I
ndo # fffff
aso
ir nuestra
un poco m
en l
a ima
3
ue hemos
r a Imagen
.
4
lantilla de
s de una
gen de arri
definido n
> Tamao
la red PSD
structura
ba.
estra estru
de lienzo.
y empeza
omplicada
ctura del s
Establecer
3
r a dibujar,
, porque te
itio que est
el lienzo d
primero te
nemos un
amos listo
e alta 1200
nemos que
iseo den
para segu
px de anch
definir la
ro de un d
ir adelante
o y 1700p
estructura
iseo. Ust
. Abra la p
x. Establec
e nuestro
d puede v
lantilla
er el color
r esto
de
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
4/34
A
al
C
re
un
ef
ora elegir
o. Rellena
aso
ear una nu
tngulo.
par de ve
cto agrad
la herram
r con el col
5
eva capa p
hora, el re
es con el
ble, sutil l
ienta Rec
lor # dddd
or encima
ctngulo s
orde del pi
uz. Adem
ngulo y
d .
el rectng
r selecci
incel un po
s, puede vi
ibuje un r
ulo y el m
nado. Ele
co ms de
ncular esta
4
ctngulo d
do de cap
ir un cepil
la selecci
s dos capa
el ancho d
s de super
lo suave 6
n, como se
.
e tela com
posicin.
00px , esta
muestra e
leta y alre
trl + clic
blecer el c
la image
dedor de 8
n la capa
olor a blan
. De esta
px de
del
o y haga
anera se
lic en
rea un
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
5/34
N
im
C
su10
asoeva capa.
agen.
aso
n la herra
perior. Qu0%.
aso
6Elija la he
7
ienta Rec
sea 575p
8
rramienta
tngulo sel
de alto y
Rectngu
leccionada,
darle un d
lo de nuev
, dibuje un
gradado l
5
o y dibujar
caja gran
ineal supe
en un rect
e con alre
posicin d
ngulo gris
dedor de 5
2d2d0 # a
oscuro del
00px por d
# FFFFF
lgada, com
ebajo del r
, en direc
o se muest
ectngulo
cin a -90,
ra en la
Escala
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
6/34
A
la
Ces
en
C
gr
V
ora vamo
prxima v
ear una nutablecer el
la imagen
aso
ear una nu
adiente az
ea cun
a crear el
z que sl
eva capa p
color a bla
.
9
eva capa y
l agradabl
sutil es
efecto de l
le consult
or encimanco y haga
dibujar en
de # a #
l cambi
a luz mism
e el Paso 5
e todas laclic en un
un gran re
787b7 25
de col
a que se d
para el ef
s capas act
par de vec
ctngulo d
fcd .
r?
6
scribe en
cto.
uales. Ctrles con el b
e 400px de
l Paso 5 .
+ clic en elorde del pi
alto. ste
Nosotros v
l rectngulncel un po
se utiliza p
amos a us
grande.o ms de l
ara nuestra
r esta tcn
lija un cep
la selecci
cabecera.
ica mucho,
illo suave, como se
Rellenar c
as que
600px,
muestra
on un
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
7/34
7
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
8/34
A
so
nu
ca
Cco
aso
regar un c
mbra Mez
eva capa p
a de conte
aso
ear una numo se mue
10
olor azul o
la de uso:
or encima
nido. Bsi
11
eva capa,
stra en la i
scuro lne
Multiplica
y dibuje ot
amente se
con la hemagen. Es
de 1px e
r, Opacida
ra lnea 1p
puede apli
ramientao ser utili
la parte i
: 65%,
x blanco e
car esta t
Rectnguzado para
8
ferior de l
gulo: -90,
el azul os
nica de la
lo , dibuje
nuestra na
caja cole
Distancia:
curo. De e
frontera en
un rectngegacin.
tora, aplic
1px y tam
sta manera
cada caja
lo 50px d
ar la Som
o: 6px.
creamos b
en su dise
alto en la
raefecto.
continuac
ordes afila
o slo con
parte supe
ara el mo
in, cree u
os para n
colores di
rior del lie
o de
na
estra
ferentes.
nzo, tal
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
9/34
A
A
lique una
aso
continuaci
Sombra .
12
n, selecci
Utilice los
one el rect
valores qu
ngulo con
se muest
Ctrl + clic
9
an en la im
Tie
red
que
supe
Dist
fffff
# ce
. Ir a Selec
agen.
po para la
ndeado y
se llenan dInner
rposicin,
ancia: Tam
Respl
f, Tamao:
Carrer
7e01.
cionar>
navegaci
establecer
e # f6a836hadow - c
Opacidad:
ao 7px,:
ndor interi
4px. Tod
a - Tama
odificar>
n. Utilice l
el radio d
, y aplicar
olor: # ffff
60%, ng
px.
or - Modo
lo dems
: Posicin
Contrato
a herrami
5px . Dib
los siguie
ff, modo d
ulo de visi
de mezcla:
deja por de
1px,: en el
y entrar1p
enta Rect
uje un rect
tes efectosmezcla:
n: 120 *
color nor
fecto.
l interior, e
.
ngulo
ngulo,
:
al,: #
l color:
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
10/34
A
b
es
aso
ora vamo
squeda sit
tos estilos
InnerTam
Carre
13
a crear el
ado en el
e capa:
Shadow -
o,: 6px.
ra - Tama
cuadro de
lado derec
color: # 0
o: Posici
bsqueda.
o de la cu
0000, mod
n 1px,: en
Con la her
adrcula de
o de mezc
l interior,
10
ramienta
diseo y e
la: Multipli
el color: #
Rectngul
n el centro
car, Opaci
dfdfdf.
s
t
o redonde
de la band
dad: 9%,
rear una n
stablecer
uperposic
ue se desc
amao de
ez. A contavegacin
e navegaci
ntialias aj
ado , 5px
a superior
ngulo de
ueva capa
l modo de
in y crear
ribe en el
incel ms
inuacin,. Us Aria
in, gorras
stado en "
e radio ,
gris en el
isin: 90 *
por encim
mezcla d
el mismo
aso 5 con
pequeo e
gregue ell para los e
y todos lo
ninguno".
rear un cu
aso 4 . Ag
Distancia
de,
la
efecto
un
sta
exto denlaces
adro de
rega
: 0px
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
11/34
H
H
nu
si
de
A
la
aadido l
sta el mo
eva carpe
plemente
las carpet
aso
ora crear
mitad del
a "bsqued
ento tene
a de capa
Haga clic
s por lo q
14
na nueva
ncho. Col
a" de text
os un mo
s y el nom
+ arrastr
e tenemos
apa y dib
calo deba
y un colo
ntn de ca
re de "bs
r dentro d
una paleta
jar un "Si
o de la cas
gris claro
as y la ne
queda". Se
e la carpet
de buen n
n Up" bot
illa de bs
11
botn "G
esidad de
leccione t
nueva. M
ivel organi
n de la mi
queda en e
". As es c
organizar l
das las ca
s adelant
zada.
sma mane
l medio de
omo deber
as cosas un
as que co
vamos a
a que hem
la raya de
a ser.
poco lo q
ponen el
rganizar o
os creado
navegaci
e se crear
ampo de
tro tipo de
l campo d
.
una
squeda y
contenido
bsqued
dentro
- slo
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
12/34
U
U
D
a vez ms
e un tama
aso
spus de a
aso
estamos c
o ms pe
15
adir el lo
16
reando el e
ueo cepil
otipo y es
fecto de la
lo suave.
logan de l
Etapa 5 .
n este cas
presente
12
se trataba
s la forma
de 45px.
en nuestro sitio debe parecerse
hora.
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
13/34
A
el
ca
C
co
ora vamo
nombre de
mpo de b
ee otra car
mo deber
aso
a regresa
"top_bar"
squeda, bo
peta capa
ser.
17
a nuestra
. Mover to
tn Sign U
aca y el n
organizaci
os los gr
p, navegac
ombre de
n mencio
ficos de la
in y fond
cabecera".
13
ada capa a
parte supe
os).
Aqu es d
pocos pas
ior de la di
nde vamo
os anterior
stribucin
s a poner n
es. Crear u
dentro de
uestros gr
na carpeta
sta carpet
ficos de c
nueva cap
(logotipo
becera. A
vaca y
, lema,
es
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
14/34
El
sit
Es
na
in
E
he
ca
po
co
un
de
encabezad
io. Selecci
coja un gr
vegacin.
ferior de la
aso
este paso
utilizado i
pas, y con
cos pxele
n laherra
a selecci
sapareci
o se ve un
one la casi
n 600px c
Por otra pa
cabecera.
18
voy a expl
mgenes d
la Herram
s hacia aba
ienta Ma
similar a
e la imag
poco claro
lla de cabe
epillo sua
rte, para g
Dale una o
icar a uste
e Safari de
ienta de
o. Ahora
rco Recta
la que apa
n original.
en este m
era (azul)
e , de col
nar ms p
portunidad
cmo he
mis dos pl
ransform
acer una s
gular . Ir
ece en la i
Repita est
mento lo
. Crear una
r # ffffffy
ofundidad
!
reado el r
lantillas: la
cin Libr
eleccin d
a Seleccio
agen. Pul
e paso par
14
ue vamos
nueva cap
haga clic
, se puede
flejo de la
escala de
e, dar vuel
sde fuera
ar> Modi
se la tecla
la segund
a aadir el
a vaca en
n un par d
ambiar el
s imgene
no abajo
ta la image
e la parte
ificar> De
de borrar
a imagen.
efecto de l
ima y esta
veces en
color a ne
de cabece
colocarlo
n y luego l
inferior a l
vanecer y
un par de
la luz mis
blecer el m
el rea deb
ro y de ha
ra. Tomar
detrs de l
a otra. Ca
a mitad de
el tipo de
veces y va
a en todas
odo de su
ajo de la b
er lo mis
dos imge
a ms gran
bie las do
la primera
30px o m
a crear un
partes en
erposici
arra de
o slo en
es de su el
de. Copie
s imgene
imagen vo
s.Usted de
reflejo agr
l
.
la parte
leccin,
las dos
de unos
lteada
be tener
dable
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
15/34
A
de
A
esca
Si
cr
pr
ra
ora bien,
superposi
es como
tos grfico
rpeta para
aso
nos fijam
ar estas fi
imer lugar,
io de 10p
ara hacer
icin . Cre
nuestra ca
s dentro demantener l
19
s en la pre
has vamo
crear una
o ms si
esas dos i
el efecto
ecera deb
la "cabecas cosas or
visualizaci
s a necesit
forma de r
s lo dese
genes se
descrito en
mirar des
ra" de la cganizadas
n de la i
r para llev
ctngulo
. Ahora te
destacan u
el Paso 5
pus de a
apa
aqu ;)
agen final
ar a cabo a
rande con
nemos que
15
n poco, cre
.
adir una fr
, se puede
lgunos pas
la herram
deshacern
ar una nue
se bonita
er que ten
os adicion
ienta Rect
s de la rad
va capa y
algunos
emos pest
les, pero e
ngulo re
io de fond
stablezca
otones. N
as bonita
s definitiv
ondeado
o y hacer u
l modo
te olvides
s en el re
mente val
. Que sea
na esquina
de poner t
de conten
la pena.
0px de alt
perfecta f
odos
ido. Para
n
y un
uera de
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
16/34
l.
ab
es
A
El
Elige la h
ajo mientr
deforme.
ora hemo
aso
ige la herr
aso
rramient
s sostiene
sted ve la
creado un
20
amienta
21
de selecc
la tecla S
pequea a
rincn pe
nea y pon
in direct
ift hasta q
sa. Haga cl
fecto. As
erlo a 1px
y haga cli
ue alcance
lic en l y
es como d
.
16
c en el traz
el mismo
overlo ha
bera ser.
ado de for
ivel con e
cia arriba
epita este
ma. Haga
l eje horizo
asta el pu
paso para
lic en el p
ntal. Hasta
to de la ru
la esquina
nto vertic
aqu todo
ta de acces
inferior de
l y arrastr
bien, pero
o.
recha.
hacia
todava
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
17/34
Di
C
-.
di
lo
Pa
ob
buja en lo
aso
loque alg
Por lo gen
seo, tene
s ttulos y
aso
ra hacer la
jeto y lueg
separador
22
nos icono
ral, una p
os que en
l texto mi
23
pestaa a
o restar de
es de colo
, ttulos, y
staa siem
ontrar un
ntras se m
tiva ms o
la selecci
gris, mien
una descri
pre est ac
manera d
antiene la
bvio, vam
n para obt
tras que la
pcin para
tivo y los
lograr est
estaa act
s a darle u
ner slo l
17
celebraci
cada ficha
tros estn
o. Yo desa
iva primer
n fondo bl
primera p
n de la tecl
. Yo sola
inactivos.
turados los
colorido
nco se des
estaa sele
a Shift .
ay Cheun
ara aclara
iconos de
brillante.
vaneci. P
ccionada.
g iconos di
r este punt
otros y la
ara hacer e
sponibles
en nuestr
educcin
sto primer
n WebAp
o
e la opaci
seleccion
ers.com
ad de
a todo el
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
18/34
Es
C
to es lo qu
n un cepil
aso
e su selecc
lo pequeo
24
in debe s
suave, pin
r similar.
tar en un f
ondo blanc
18
o.
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
19/34
A
A
Aj
ob
adir a la s
adir una
uste el col
tiene un e
ombra. Cr
scara ve
or a negro,
ecto agrad
ar un rect
ctorial ha
elija un ce
able sombr
ngulo gris
iendo clic
pillo suav
a falsa det
oscuro det
en el pequ
grande ,
s de nues
19
rs de las l
eo icono
y comenza
tras pesta
engetas, c
n la parte
r a elimina
as.
omo se m
inferior de
r las partes
estra en la
la paleta d
del rectn
imagen.
e capas.
gulo.Com
resultado,
se
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
20/34
Fi
se
un
A
naly la ate
describi
a linda ln
es como
aso
cin al de
nteriorme
a que sigu
nuestras fi
25
alle. Dibuj
nte y con u
e se desva
has debe
a en una l
n pincel gr
eci nues
irar.
nea de 1p
ande y sua
ra sombra
20
gris en la
ve elimina
detrs de l
parte infe
r el extrem
s pestaas
ior de las
o izquierd
.
estaas. C
y derecho
ubra la ca
de la lne
a de nuev
. Ahora te
como
nemos
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
21/34
Es
ag
va
bo
im
su
A
el momen
radable y
a crear la
nita apilad
agen de di
til sombra
ora copia
to de dise
n poco de
imagen de
a efecto de
seo ofreci
efecto.
la capa y
ar el conte
texto. En
las funcio
fotos para
ido. Para el
irar ligera
nido de nu
rimer luga
es. Pens
nuestra
llo, dibuja
mente con
estra prim
r,
ue sera b
un rectng
la herram
21
ra ficha. N
ueno para
ulo blanc
ienta Tra
ecesitamo
omper el n
con un b
sformaci
una imag
erviosism
rde 1px
n libre .
n de dise
del dise
e color gr
Es esto un
o equipad
mediante
is claro , y
vez ms.
, una parti
la creaci
un muy
da
de una
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
22/34
I
de
C
pa
aq
A
porta tu i
los cuadr
ntrato y
rte inferio
u.
es como
aso
agen de l
s, vamos a
oloque 5p
de nuestr
su orden d
26
s funcione
arreglar e
x . Con la
paleta de
e las capas
s y colqu
so. Realice
apa de la i
capas.Uste
debe ser si
lo sobre l
una selec
magen des
d recibir
milar.
22
s rectngu
in en el r
tacados sel
uy bien r
los blanco
ctngulo s
leccionado
deado en
. No se pr
uperior, v
s haga clic
forma de i
ocupe si l
ya a Selec
en el icon
agen, co
imagen e
cionar>
de msc
o se mues
st fluyend
odificar>
ra rpida
tra en la i
o fuera
en la
agen
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
23/34
N
he
M
te
te olvide
hecho.
ediante la
minado. V
de mante
dicin de
amos a se
er las cos
un ttulo b
uir adelan
s organiza
nito, un p
te.
das. Por lo
co de text
23
tanto crea
o y listas c
ms carp
on vietas,
tas de cap
nuestro tr
s y organi
bajo de di
zar su pale
eo web e
ta. As es c
st
omo lo
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
24/34
Y
Pe
di
de nuevo
aso
ns que es
buja un gra
lguna org
7: T
to se debe
n rectngu
nizacin d
esti
ser muy gr
lo de color
e las capas
oni
ande, as q
gris claro
.
os
ue he pues
acerca de
24
o esto en u
20px de al
na caja gr
lto. Dle u
nde justo
borde gri
espus de
s 1px .
la seccin
principal.
Primero
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
25/34
Afr
P
continuacintera gri
r ltimo a
aso
n, dibuje
claro .
adir un po
28
en el otro r
co de text
ectngulo
y ya est!
ms brillan
25
te por 10p
x ms peq
uea en todos los lados.Tambin agrega u
1px
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
26/34
Es
A
hora de q
aso
regue un
aso
e el pie d
29
oco de ef
30
pgina. D
cto de luz
ibuja un gr
de la mism
an rectng
a manera
26
ulo de 400
omo se de
pxeles de
scribe en e
alto, de co
l Paso 5 .
lor gris os
uro.
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
27/34
A
ad
C
na
co
po
lu
continuaci
icin de d
aso
ear la part
vegacin e
locado, se
sible que n
go ir a Im
aso
n, dibuje
s lneas m
31
ms infer
st
mueven h
ecesite am
agen> Ta
32
un rectn
s en la pa
ior, donde
cia abajo
pliar su lie
ao de li
ulo de 10
rte superio
se repite l
hacerlo s
nzo en est
enzo , y aj
x de alto
r e inferior
navegaci
bre la alta
momento
ustar la alt
27
or encima
como se m
n colocad
40px . Co
para que t
ra para ad
del pie de
uestra en l
. Puede co
locarlo en
dos los gr
aptarse a t
pgina y a
a imagen.
piar el rect
la parte in
ficos en f
do el traza
adir un p
ngulo de
erior de la
orma. Si u
do.
co de efec
la parte su
tela.Tenga
ted necesi
to sutil me
erior, don
en cuenta
a para hac
diante la
de la
que es
r eso, y
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
28/34
L
bo
A
atencin
rde agrada
aso
regue un
aso
l detalle n
ble.
33
oco de pi
34
uevo. Agre
de pgina
gar una ln
y el conte
ea de 1px
ido de se
28
blanco po
arar muy
r encima d
ien que de
la caja de
ntro de su
navegaci
red.
n pie para
darle un e
ecto de
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
29/34
O
ganiza de
l Ditodas las c
sepas dentr
de las car etas de ca
29
pas. As es
como yo l
o he hecho
.
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
30/34
30
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
31/34
31
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
32/34
32
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
33/34
33
-
8/2/2019 Tutoriales photoshop disear un hermosos sitio web desce cero
34/34
A
su
Es
gr
Ph
que vam
puesto, a l
onpero que h
andes. Rec
otoshop.
Siga co
os, el dise
venta en
iderayan disfr
uerde, con
Qu piens
n nosotros
o final, co
hemeFor
aciotado de es
atencin a
usted?
en de Twi
un par de
st.net .
neste tutorial
l detalle qu
ter , o sus
variacion
inalhe apren
e, ser cap
rbase al f
s para dife
esido alguna
az de dise
ed RSS N
rentes pgi
s tcnicas
ar sitios w
ETTUTS d
inas. Los
nuevas. A
eb hermos
e tuts de d
ltimos dise
ora es su t
os, con sl
esarrollo
os de PS
urno para
o dos o tre
s diarios
son, por
rear dise
herramie
web y art
s ms
tas de
ulos
