Centro RPG Maker

Centro de Criação => Artes Gráficas - Design => Tópico iniciado por: Zenphis online 06/01/2014 às 23:32

Título: Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: Zenphis online 06/01/2014 às 23:32

(https://i.imgur.com/ecVnxou.png)

[box title=Leiam]
Resolvi trazer meus tutoriais pra cá, como há gente que não acessa a MRM e meus tutoriais estão todos lá e tal, então vou começar com esse aqui, primeiramente, desculpe-me essa formatação feia do tópico e qualquer erro de português, é tudo antigo aqui e estou sem tempo pra refazer no momento, espero que gostem, abraços.
[/box]

[box title=Tutorial]
Irei ensinar passo a passo, a como criar um mapa desse estilo, e estarei disponibilizando a PSD desse mapa que fiz:
Mapa pronto:
Spoiler
(https://i.imgur.com/3gYelZu.png)
[close]

1º Passo: Criando o Projeto.

Bom, começando, primeiro abra seu photoshop, e coloque as seguintes configurações no novo projeto do photoshop (Configurações para um mapa em HD):
Spoiler
(https://i.imgur.com/PSHHsOA.png)
[close]

2º Passo:Desenhando o mapa.

Logo após criar, selecione a ferramenta de Pincel ou pressione a letra B do teclado e coloque o tamanho 9 do pincel, e mude a cor para: #161616. Depois, você desenha um continente, como estou fazendo na print abaixo:
Spoiler
(https://i.imgur.com/mMw9Spt.png)
[close]
Algumas dicas: Mexa bastante a sua mão, com precisão e cuidado para não errar, faça várias pequenas penínsulas, e tome cuidado para que não fique simétricas. Para fazer um estilo com as pontas das penínsulas mais afiadas,abaixe o tamanho do Pincel,mas isso requer mais precisão também.

No final, o seu desenho deve ficar algo parecido com isso:
Spoiler
(https://i.imgur.com/Bh1dr8d.png)
[close]
Não precisa ser junto á margem, pode ser uma grande ilha e tal, mas tente seguir o estilo.

Agora, como segue o desenho, faça várias pequenas ilhas do mesmo estilo, todas perto da margem do continente, algumas ilhas grandes, e pequenas, variando e espalhando-se pelo mapa.
Spoiler
(https://i.imgur.com/K80Fkis.png)
[close]
Eu também fiz um outro continente pequeno, como se fosse uma ilha.

3º Passo:Formando a pintura.

Agora vamos á pintura da imagem, primeiro baixe a seguinte imagem:
Textura Papel Velho (http://www.mediafire.com/?5k6f6gimzg8chch)
Após baixar, insira ela em seu projeto, e redimensione até cobrir todo o projeto, como segue a imagem:
Spoiler
(https://i.imgur.com/9QvFgkC.png)
[close]
Agora, clique no pequeno olho, do lado da camada na lista, e deixe ele desaparecido por enquanto:
Spoiler
(https://i.imgur.com/9JnDhIg.png)
[close]

Agora, finalmente, pegue a ferramenta de tinta, pressionando a letra G ou clicando em seu ícone na aba de ferramentas. Agora, como segue a imagem, preencha  apenas UMA vez dentro de cada ilha/continente desenhado no mapa:
Spoiler
(https://i.imgur.com/muijkYA.png)
[close]
Sim, vai ficar essa linha branca Por Enquanto, só esperem.

Agora, pegue a ferramenta pincel novamente, com a mesma cor: #161616 e tamanho: 9. Agora pinte toda a linha branca que ficou depois que você pintou tudo. Cuidado, não usem novamente a ferramenta de lata de tinta, pois deixará a pintura feia.Ela deverá ficar assim:
Spoiler
(https://i.imgur.com/owUV5W1.png)
[close]

3º Passo: Colocando a textura.

Agora, novamente na lista de camadas, deixe a textura de papel velho visível novamente:
Spoiler
(https://i.imgur.com/eHsO2Su.png)
[close]

Bom, agora selecione a camada da textura de papel velho, clique com o botão direito do mouse encima da camada na lista de camadas, e clique em: Criar máscara de corte.
Spoiler
(https://i.imgur.com/f9TQT5W.png)
[close]
E o mapa deverá ficar assim:
Spoiler
(https://i.imgur.com/8gcWbET.png)
[close]

Bom, Agora vamos mexer na imagem, primeiramente, selecione o mapa , na lista das camadas, e clique com o botão direito, e vá em opções de mesclagem:
Spoiler
(https://i.imgur.com/SGxJD8S.png)
[close]

Agora, nas opções de mesclagem, selecione o Traçado ou Stroke(PS Americano), e coloque as seguintes configurações em cor,modo,posição e opacidade.
Spoiler
(https://i.imgur.com/6459mdx.png)
[close]

Agora duplique a camada da textura do papel,e coloque esta cópia em ultimo, na lista de camadas, e o mapa deverá ficar assim:
Spoiler
(https://i.imgur.com/LggRkOM.png)
[close]

4º Passo: Color Curves.

Bom, agora estamos quase finalizando, vamos lá. Agora selecione na lista de camadas, a camada da textura superior (A Que está sendo usada como Máscara) e clique no ícone de uma meia lua, branca e preta que é para criar uma camada de preenchimento, e clique em color curves, como segue a imagem:
Spoiler
(https://i.imgur.com/RgtAcPJ.png)
[close]

Agora, deixe a configuração do curves mais ou menos do jeito que está na imagem a seguir:
Spoiler
(https://i.imgur.com/NzJ2pe6.png)
[close]
Agora aperte OK, e crie outro curves, só que agora, na cópia da textura de papel velho, que deverá estar em ultimo da lista na lista de camadas. Após criar o outro curves, coloque tais configurações:
Spoiler
(https://i.imgur.com/bmPReD6.png)
[close]
E Seu mapa , deverá estar algo parecido com isto:
Spoiler
(https://i.imgur.com/cHWwSFP.png)
[close]

Agora para finalizar, iremos criar o ultimo Curves. Bom, agora selecione a camada do topo, na lista de camadas, e crie um Curves lá, coloque as seguintes configurações:
Spoiler
(https://i.imgur.com/cJ1NWva.png)
[close]
E seu mapa ficará mais escuro e parecido com um mapa antigo.

4º Passo: Escrevendo no mapa.

Agora, para dar o toque final com bônus, irei ensinar a colocar letras legais, no mapa!
Primeiramente, crie seu texto, com qualquer fonte de letra, e ponha o modo de Mesclagem/Blend em Sobrepor:
Spoiler
(https://i.imgur.com/J1dN9An.png)
[close]
Agora, clique com o botão direito do mouse na camada do texto, e clique em Opções de Mesclagem, agora, selecione ao lado, Sobreposição de Cor, e coloque as seguintes configurações de cor, opacidade:
Spoiler
(https://i.imgur.com/M0NZJ3M.png)
[close]
E para fazer o mesmo com as imagens, basta fazer igual com o texto, só que em vez de escrever, apenas insira a imagem (Imagem seria como uma rosa dos ventos)

E Finalmente, seu mapa estará pronto,e provavelmente parecido com este:
Spoiler
(https://i.imgur.com/M5jq0DQ.jpg)
[close]

Outro Exemplo de mapa feito por mim:
Spoiler
(https://i.imgur.com/qnInygP.jpg)
[close]

Espero que tenham gostado do tutorial! Como disse no inicio, todos os créditos de ideia vão para o Jefter e seu Tutorial. Fiz ele para ajudar pessoas que não tenham ou não queiram baixar o programa GIMP, e também queiram um mapa mais costumizável e livre!

Estarei deixando o PSD do meu Mapa (http://www.mediafire.com/?d76b4cc7ffjl7yl)
Fonte usada: Beyond Wonderland

Deixem seus mapas feitos com ajuda do tutorial nos posts para interagirmos. :P
Qualquer dúvida deixe em resposta aqui.

Visitem o tutorial do criador da ideia, Jefter (MRM):
Mapa mundi feito no GIMP. (http://forums.mundorpgmaker.com.br/index.php?topic=94146.0)
[/box]
Título: Re: Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: Galego online 06/01/2014 às 23:43
Eu realmente estava precisando de algo assim! haha' Ótimo tutorial, técnica impressionante de fato!
Título: Re: Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: Zenphis online 07/01/2014 às 00:18
Fico feliz que tenha gostado, e valeu pelos elogios. Se estiver muito difícil de entender me falem, eu era muito retardado pra escrever na época em que fiz o tutorial. :I
Título: Re: Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: SimonMuran online 07/01/2014 às 01:28
*--* Adivinhou meu pensamento rsrsrs neste exato momento estava vendo o tutorial de mapa mundi
feito pela celianna mas n estava contente com meu resultado, o seu me deu um animo para
reconstruir um novo, começando a partir de agora! rsrs Obrigado e parabéns, ótimo tutorial.
Título: Re: Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: Krepper online 18/03/2014 às 17:21
Da para até fazer um RPG de Mesa imprimindo um mapa assim, ficaria bem legal  :blink: .       
Título: Re: Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: VincentVII online 18/03/2014 às 21:13
Aaaaah!!!!  :aiaiai:

São passos demais pra eu poder acompanhar, não sei nem fazer blendagem (nem sei se é esse o nome). Mas não tem como discutir com o resultado, ficou muito bom (o mapa e o tutorial, embora eu tenha viajado um pouco). Parabéns!
Título: Re: Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: CDCyoshi online 29/09/2015 às 17:13
Alguém pode me mandar prints dos mapas? Eles não tão carregando no meu pc  :aiaiai: (Soluções também me ajudam :))

Spoiler
Citação de: ViniciusMedeiros online 28/09/2015 às 22:40
Citação de: Zenphis online 06/01/2014 às 23:32

(http://img594.imageshack.us/img594/935/logonch.png)

[box title=Leiam]
Resolvi trazer meus tutoriais pra cá, como há gente que não acessa a MRM e meus tutoriais estão todos lá e tal, então vou começar com esse aqui, primeiramente, desculpe-me essa formatação feia do tópico e qualquer erro de português, é tudo antigo aqui e estou sem tempo pra refazer no momento, espero que gostem, abraços.
[/box]

[box title=Tutorial]
Irei ensinar passo a passo, a como criar um mapa desse estilo, e estarei disponibilizando a PSD desse mapa que fiz:
Mapa pronto:
Spoiler
(http://desmond.imageshack.us/Himg10/scaled.php?server=10&filename=24final.png&res=landing)
[close]

1º Passo: Criando o Projeto.

Bom, começando, primeiro abra seu photoshop, e coloque as seguintes configurações no novo projeto do photoshop (Configurações para um mapa em HD):
Spoiler
(http://desmond.imageshack.us/Himg163/scaled.php?server=163&filename=91397971.png&res=landing)
[close]

2º Passo:Desenhando o mapa.

Logo após criar, selecione a ferramenta de Pincel ou pressione a letra B do teclado e coloque o tamanho 9 do pincel, e mude a cor para: #161616. Depois, você desenha um continente, como estou fazendo na print abaixo:
Spoiler
(http://desmond.imageshack.us/Himg138/scaled.php?server=138&filename=36214133.png&res=landing)
[close]
Algumas dicas: Mexa bastante a sua mão, com precisão e cuidado para não errar, faça várias pequenas penínsulas, e tome cuidado para que não fique simétricas. Para fazer um estilo com as pontas das penínsulas mais afiadas,abaixe o tamanho do Pincel,mas isso requer mais precisão também.

No final, o seu desenho deve ficar algo parecido com isso:
Spoiler
(http://desmond.imageshack.us/Himg811/scaled.php?server=811&filename=43133486.png&res=landing)
[close]
Não precisa ser junto á margem, pode ser uma grande ilha e tal, mas tente seguir o estilo.

Agora, como segue o desenho, faça várias pequenas ilhas do mesmo estilo, todas perto da margem do continente, algumas ilhas grandes, e pequenas, variando e espalhando-se pelo mapa.
Spoiler
(http://desmond.imageshack.us/Himg339/scaled.php?server=339&filename=47089686.png&res=landing)
[close]
Eu também fiz um outro continente pequeno, como se fosse uma ilha.

3º Passo:Formando a pintura.

Agora vamos á pintura da imagem, primeiro baixe a seguinte imagem:
Textura Papel Velho (http://www.mediafire.com/?5k6f6gimzg8chch)
Após baixar, insira ela em seu projeto, e redimensione até cobrir todo o projeto, como segue a imagem:
Spoiler
(http://desmond.imageshack.us/Himg72/scaled.php?server=72&filename=87559237.png&res=landing)
[close]
Agora, clique no pequeno olho, do lado da camada na lista, e deixe ele desaparecido por enquanto:
Spoiler
(http://desmond.imageshack.us/Himg864/scaled.php?server=864&filename=61625025.png&res=landing)
[close]

Agora, finalmente, pegue a ferramenta de tinta, pressionando a letra G ou clicando em seu ícone na aba de ferramentas. Agora, como segue a imagem, preencha  apenas UMA vez dentro de cada ilha/continente desenhado no mapa:
Spoiler
(http://desmond.imageshack.us/Himg688/scaled.php?server=688&filename=10399795.png&res=landing)
[close]
Sim, vai ficar essa linha branca Por Enquanto, só esperem.

Agora, pegue a ferramenta pincel novamente, com a mesma cor: #161616 e tamanho: 9. Agora pinte toda a linha branca que ficou depois que você pintou tudo. Cuidado, não usem novamente a ferramenta de lata de tinta, pois deixará a pintura feia.Ela deverá ficar assim:
Spoiler
(http://desmond.imageshack.us/Himg841/scaled.php?server=841&filename=14235933.png&res=landing)
[close]

3º Passo: Colocando a textura.

Agora, novamente na lista de camadas, deixe a textura de papel velho visível novamente:
Spoiler
(http://desmond.imageshack.us/Himg24/scaled.php?server=24&filename=50022407.png&res=landing)
[close]

Bom, agora selecione a camada da textura de papel velho, clique com o botão direito do mouse encima da camada na lista de camadas, e clique em: Criar máscara de corte.
Spoiler
(http://desmond.imageshack.us/Himg109/scaled.php?server=109&filename=52745418.png&res=landing)
[close]
E o mapa deverá ficar assim:
Spoiler
(http://desmond.imageshack.us/Himg839/scaled.php?server=839&filename=70429325.png&res=landing)
[close]

Bom, Agora vamos mexer na imagem, primeiramente, selecione o mapa , na lista das camadas, e clique com o botão direito, e vá em opções de mesclagem:
Spoiler
(http://desmond.imageshack.us/Himg405/scaled.php?server=405&filename=99979255.png&res=landing)
[close]

Agora, nas opções de mesclagem, selecione o Traçado ou Stroke(PS Americano), e coloque as seguintes configurações em cor,modo,posição e opacidade.
Spoiler
(http://desmond.imageshack.us/Himg577/scaled.php?server=577&filename=92463616.png&res=landing)
[close]

Agora duplique a camada da textura do papel,e coloque esta cópia em ultimo, na lista de camadas, e o mapa deverá ficar assim:
Spoiler
(http://desmond.imageshack.us/Himg268/scaled.php?server=268&filename=83478107.png&res=landing)
[close]

4º Passo: Color Curves.

Bom, agora estamos quase finalizando, vamos lá. Agora selecione na lista de camadas, a camada da textura superior (A Que está sendo usada como Máscara) e clique no ícone de uma meia lua, branca e preta que é para criar uma camada de preenchimento, e clique em color curves, como segue a imagem:
Spoiler
(http://desmond.imageshack.us/Himg716/scaled.php?server=716&filename=98585679.png&res=landing)
[close]

Agora, deixe a configuração do curves mais ou menos do jeito que está na imagem a seguir:
Spoiler
(http://desmond.imageshack.us/Himg407/scaled.php?server=407&filename=59171137.png&res=landing)
[close]
Agora aperte OK, e crie outro curves, só que agora, na cópia da textura de papel velho, que deverá estar em ultimo da lista na lista de camadas. Após criar o outro curves, coloque tais configurações:
Spoiler
(http://desmond.imageshack.us/Himg829/scaled.php?server=829&filename=72767734.png&res=landing)
[close]
E Seu mapa , deverá estar algo parecido com isto:
Spoiler
(http://desmond.imageshack.us/Himg13/scaled.php?server=13&filename=30380626.png&res=landing)
[close]

Agora para finalizar, iremos criar o ultimo Curves. Bom, agora selecione a camada do topo, na lista de camadas, e crie um Curves lá, coloque as seguintes configurações:
Spoiler
(http://desmond.imageshack.us/Himg29/scaled.php?server=29&filename=77940893.png&res=landing)
[close]
E seu mapa ficará mais escuro e parecido com um mapa antigo.

4º Passo: Escrevendo no mapa.

Agora, para dar o toque final com bônus, irei ensinar a colocar letras legais, no mapa!
Primeiramente, crie seu texto, com qualquer fonte de letra, e ponha o modo de Mesclagem/Blend em Sobrepor:
Spoiler
(http://desmond.imageshack.us/Himg269/scaled.php?server=269&filename=12985999.png&res=landing)
[close]
Agora, clique com o botão direito do mouse na camada do texto, e clique em Opções de Mesclagem, agora, selecione ao lado, Sobreposição de Cor, e coloque as seguintes configurações de cor, opacidade:
Spoiler
(http://img228.imageshack.us/img228/2447/66759590.png)
[close]
E para fazer o mesmo com as imagens, basta fazer igual com o texto, só que em vez de escrever, apenas insira a imagem (Imagem seria como uma rosa dos ventos)

E Finalmente, seu mapa estará pronto,e provavelmente parecido com este:
Spoiler
(http://img10.imageshack.us/img10/9348/24final.png)
[close]

Outro Exemplo de mapa feito por mim:
Spoiler
(http://img855.imageshack.us/img855/1460/mapmundips.png)
[close]

Espero que tenham gostado do tutorial! Como disse no inicio, todos os créditos de ideia vão para o Jefter e seu Tutorial. Fiz ele para ajudar pessoas que não tenham ou não queiram baixar o programa GIMP, e também queiram um mapa mais costumizável e livre!

Estarei deixando o PSD do meu Mapa (http://www.mediafire.com/?d76b4cc7ffjl7yl)
Fonte usada: Beyond Wonderland

Deixem seus mapas feitos com ajuda do tutorial nos posts para interagirmos. :P
Qualquer dúvida deixe em resposta aqui.

Visitem o tutorial do criador da ideia, Jefter (MRM):
Mapa mundi feito no GIMP. (http://forums.mundorpgmaker.com.br/index.php?topic=94146.0)
[/box]

Isso foi bem desnecessário :=|:

[close]
Título: Re: Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: Victor Sena online 29/09/2015 às 17:41
 Infelizmente o http://imageshack.us foi pro saco e felizmente deu para "recuperar" imagens usando o Web Archive (https://archive.org/web/).

https://web.archive.org/web/20150215013225/http://centrorpg.com/index.php?topic=6161.0

Nota1: Até avatar dele restaurou. /o/
Nota2: Quem não tem os recursos do Kaduki ou FSM (Erroneamente Mack), basta usar o Web Archive também para acessar onde ainda era disponível as imagens.
Título: Re:  Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: CDCyoshi online 29/09/2015 às 18:09
Citação de: Vash online 29/09/2015 às 17:41
Infelizmente o http://imageshack.us foi pro saco e felizmente deu para "recuperar" imagens usando o Web Archive (https://archive.org/web/).

https://web.archive.org/web/20150215013225/http://centrorpg.com/index.php?topic=6161.0

Nota1: Até avatar dele restaurou. /o/
Nota2: Quem não tem os recurosos do Kaduki ou FSM (Erroneamente Mack), basta usar o Web Archive também para acessar os picos de acessos onde ainda era disponível as imagens.
Qui site lindu  :*-*:

Neste momento estou meio  :._.:, tipo, como nunca pensei nisto antes, incrível!
Título: Re: Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: shankx online 28/10/2015 às 21:15
nossa cara genial gostei muito. obrigado. parabens.
Título: Re:Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: aliffer online 12/05/2019 às 14:23
As imagens todas estao fora do ar, poderia repor ?
Título: Re:Crie seu próprio Mapa Mundi (Photoshop)
Enviado por: Victor Sena online 12/05/2019 às 14:47
Citação de: aliffer online 12/05/2019 às 14:23
As imagens todas estao fora do ar, poderia repor ?

Imagens repostadas.

Tutoriais assim não pode perder. Tive sorte que o site Web Archive.org fez apenas 1 captura (https://web.archive.org/web/20150215013225/https://centrorpg.com/index.php?topic=6161.0) onde o imageshack ainda funcionava e todas as imagens estavam intactas, não faltando uma, como infelizmente acontece com muitos tópicos antigos aqui.

Bom proveito. \õ,