Criando ícones do iPhone.

COMPARTILHE:

Revisado dia 29/01/08. Descrição: Como criar ícones do iPhone além de criar um fundo personalizado para eles usando diversas ferramentas ...

Preview Revisado dia 29/01/08.

Descrição: Como criar ícones do iPhone além de criar um fundo personalizado para eles usando diversas ferramentas do Photoshop combinadas com layer styles.








01. Primeiro faremos o background, para isso pressione Ctrl+N para criar um novo documento de 500×120 pixels, logo após crie uma nova layer pressionando Ctrl+Shift+N e dê o nome de “Interface”, com a nova layer selecionada vá em Edit> Fill e defina Color: #a3acb7.

02. Clique duas vezes na layer “Interface” para abrir a caixa de Layer Style, depois defina Inner Shadow, com Opacity: 50%, Angle: 90, Size: 7.

03. Crie uma nova layer pressionando Ctrl+Shift+N e dê o nome de “Tile”, logo após pressione a letra M do teclado para selecionar a Elliptical Marquee Tool, segure o Shift e crie um círculo de 3×3 pixels e defina a cor para preta.

04. Abra a caixa Layer Style da layer “Tile”, e escolha a opção Drop Shadow, defina os seguintes valores:



05. Selecione o círculo que acabou de ser feito e duplique pressionando Ctrl+J, mova 5 pixels para a direita e mais 5 pixels para baixo. (Segure Alt+Ctrl e use as setas).

06. Selecione uma área de 10×10 pixels e crie um Pattern indo em Edit> Define Pattern dê o nome de “Tile”.



07. Delete a layer “Tile” e selecione a layer “Interface”. Logo após selecione tudo Ctrl+A, vá em Edit> Fill e escolha o modo Pattern> Custom Pattern: "Tile".



Seu background deve estar assim.



E suas layers devem estar assim:



08. Agora vamos criar o ícone de nosso Widget, primeiro crie uma nova layer pressionando Ctrl+Shift+N, dê o nome de “Widget BG”, selecione a Rounded Rectangular Tool (letra U do teclado) e crie um quadrado de 70x70 pixels, clique com o botão direito sobre ele e escolha Fill Path, use a cor #BF0000, depois abra a caixa de Layer Style, escolha a opção Drop Shadow e defina como a foto abaixo.



09. Pressione a letra T do teclado para selecionar a Horizontal Type Tool, escreva no botão criado a palavra “Tutorials” e use estes valores:



10. Novamente com a Horizontal Type Tool, escreva "2.0" e use estes valores:



11. Você terá um resultado próximo a este:



12. Agora selecione a layer “Widget BG” clicando na layer com a tecla Ctrl pressionada, depois vá em Select> Modify> Contract e defina 3 pixels.

13. Agora selecione a Gradient Tool (letra G do teclado), defina seu gradiente conforme os valores abaixo.



14. Defina em seu gradiente, Top left: 50% de opacidade, Top right: 0% de opacidade, Bottom left: #FFFFFF, Bottom right: #FFFFFF.



15. Com a Gradient Tool, clique segure e arraste de cima para baixo dentro da seleção.



16. Retire a seleção pressionando Ctrl+D, selecione a Elliptical Marquee Tool (Letra M do teclado) e crie um círculo como este:



17. Clique com o botão direto sobre a seleção e selecione a opção Select> Inverse e depois pressione o Delete em seu teclado. O ícone do seu Widget já deve estar parecido com este:



E suas layer devem estar assim:



18. No texto "2.0" adicione um Layer Style, selecione a opção Drop Shadow indo em Layer> Layer Style> Drop Shadow, aplique também ao texto "Tutorials", logo após selecione a layer “Widget BG” clicando na layer com a tecla Ctrl pressionada, depois aplique um gradiente que vai da cor #BF0000 para a cor #FF0000, seu ícone ficará assim:



19. Sinta-se a vontade para criar quantos ícones achar necessário!.

COMENTÁRIOS

BLOGGER: 11
  1. Muito show!

    Parabéns pelo tutorial e pela idéia do blog!

    Abraço!

    ResponderExcluir
  2. Acho que deu problema nas imagens. Não consigo ve-las.

    ResponderExcluir
  3. Oi Amigo, desculpe pelo incoveniente, algumas imagens sumiram, estou neste momento trabalhando para resover isto mudando as imagens de servidor, até sexta feira tudo estará normalizado, abraço!!

    ResponderExcluir
  4. Olá André,

    Ficou show de bola o tutorial.

    Só um detalhe. No passo 12, depois que for feita essa seleção e acionado o Contract, é importante que seja criada uma nova layer. Se não, quando você fizer o passo 17, vai acabar deletando coisa a mais.

    Abraço e parabéns pelo Blog !

    Alexandre Hogler

    ResponderExcluir
  5. Estou muito feliz com esse tutorial,pela primeira vez consegui criar um icone igualzinho ao q foi ensinado :)

    Adoro seus tutoriais.

    ResponderExcluir
  6. Por favor me escalresçao o passo 17.A cima do layer Wdget bg existe outro layer,mas nao existe parte no tutorial onde ele é citado.
    Ou seja nao existe este passo.
    por favor me ajude.

    ResponderExcluir
  7. Parabenz!

    Seria pedir muito para que vc disponibilize o arquivo original deste tutorial para baixarmos?

    ResponderExcluir
  8. Muito legal o tutorial, principalmante umas tecnicas que eu não sabia, tipo: Select> Modify> Contract e o tile, muito bom pra colocar em blogs e sites

    ResponderExcluir
  9. alguem pode me ajudar eu queria saber como ajustar o 3x3 pixels,como selecionar e como faxzer o fill path ficar clicavel

    ResponderExcluir

Nome

.ai,71,.asl,1,.eps,24,.indd,1,.jpg,20,.png,40,.psd,594,.sketch,2,.svg,7,2006,90,2007,352,2008,942,2009,1780,2010,1822,2011,1825,2012,1764,2013,240,2014,559,2015,1195,2016,518,2017,748,2018,700,2019,415,2am,1,2axion,1,360,4,abril,378,abstrato,223,acer,1,actions,151,adobe,32,adobe experience house,1,adobe max,1,agosto,532,ajax,1,allan portilho,1,animação,39,aritana,1,arte,27,artistas do photoshop,1079,axis,5,backgrounds,1,basekit,1,básico,68,benq,9,bethesda,4,bgs,123,bmx,1,booombox,2,brasilmegaarena,2,brushes,107,bug,1,bunker,1,campus party,1,capcom,1,cartazes de cinema,117,cartazes de rock,203,cinemark,1,codemasters,1,com2us,3,concurso cultural,1,css3,1,curta,6,de(ath)sign,236,designbunkertp,1,dezembro,642,dica ninja,99,dificuldade 1,38,dificuldade 2,389,dificuldade 3,948,dificuldade 4,332,dificuldade 5,56,distortions,4,divulgação,1,diy,32,dji,1,dlink,1,documentário,105,dollarphotoclub,37,download,1780,edição de vídeo,3,efeito,1076,esportes,11,fastcom,3,ferramentas online,1,fevereiro,492,filme,3,flipbook,1,flow motion,1,fontes,569,fotolia,13,fotoshistoricas,39,fotosqueabalaramomundo,75,gamebau,1,games,214,gamevil,1,gastore,1,gifart,27,gomidia,1,goPro,1,gradientes,7,greenk,1,guest post,5,historia da foto,22,hitbox,1,hopi-hari,1,hoplon,19,html5,3,hype,2,hyperlapse,5,hyperx,33,ícones,96,idc,2,imagem,1,infográfico,1,inspiração,34,janeiro,480,julho,494,junho,393,kingston,16,kinship,2,layer style,43,lbee,1,leitores,1,levelup,15,lightpainting,1,lista,2,live-stream,2,magic the gathering,1,maio,336,março,466,matéria,591,maurício de souza produções,1,melhordasemana,17,mestres da pintura,35,meutimao,1,mob2b,1,mockup,39,música,48,natal,1,novembro,698,off,1,off-topic,520,outubro,748,palestra,7,parkour,1,patern,46,pdf,2,pérolas do instagram,1,photoshop básico,1,Photoshop CC,2,photoshop express,1,photoshop week,1,pixel show,1,plugin,4,png,1,positivo,16,post pago,2,prezi,1,printi,2,project ten,2,psd,2,psdownloads,1,pshelp,1,pszuero,2,purgatorium 90,1,rawar,2,razer,36,relink,210,responsivo,2,retoque de imagem,111,rixty,3,saga,12,selecaoTP,44,setembro,520,shapes,2,showreel,7,skate,59,skillab,1,smyowl,6,sony,1,speedart,3,speedpaint,8,splashscreen,1,stop-motion,9,tectoy,4,template,4,teste,1,texto,272,textura,137,tilt-shift,3,timelapse,21,tipografia,3,tp,2,tunning virtual,14,tutorial,2210,tutorial builder,2,tutorial player,2,ubisoft,71,udemy,1,ui,16,unboxing,1,vaio,1,vice,64,vídeo,706,vídeo aula,484,video mapping,3,wallpaper,1,warspear,1,wbgames,1,web,25,webfont,1,wix,3,xma,5,
ltr
item
::Tutoriais Photoshop::: Criando ícones do iPhone.
Criando ícones do iPhone.
http://www.andresugai.org/Tutoriais/02.2007/T11/imagem17.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2007/02/criando-cones-do-iphone.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2007/02/criando-cones-do-iphone.html
true
34833248
UTF-8
Ver todos os Posts Não encontramos nenhum post VEJA TODOS Leia Mais Responder Cancelar Resposta Deletar Por Home PÁGINAS POSTS Veja Todos RECOMENDAMOS TAMBÉM LABEL ARQUIVO SEARCH TODOS OS POSTS Não encontramos nenhum post relacionado com sua busca Voltar para a Home Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copie todo código Selecione todo código Todos os códigos copiados para o clipboard Não foi possível copiar todo código / textos, pro favor pressione [CTRL]+[C] (ou CMD+C no Mac) para copiar