Se você chegou aqui veio ou do google ou do artigo que fala sobre o Photopea, o Photoshop Grátis online.
Bom na verdade não importa de onde você veio, o fato é que você tão quanto eu, odeia anúncios, e por isso está em busca de uma solução.
Foi pensando nisso que decidi escrever esse artigo. Vou te mostrar como utilizar o Photopea Grátis sem anúncio e em tela cheia! Porque em tela cheia? Porque se você apenas utilizar uma ferramenta para remover o anúncio, a <div> continua mostrando o espaço vazio e fica aquele espaço do anúncio na tela. Não sei você, mas pra mim isso é muito chato. Então vamos lá!
Ahh se você caiu de para-quedas aqui, precisa saber um pouco mais sobre o Photopea, clique aqui para ver o artigo a respeito.
O que vamos precisar?
Eu precisei de 2 extensões para essa tarefa e o básico de css.
Instale no navegador de sua preferência essas duas extensões:
Função:
Essa extensão nos permite clicar sobre um objeto html na página e removê-lo.
Função:
Essa extensão permite executar CSS e JavaScript em tempo real para fazer ajustes nos sites.
Essa extensão permite executar CSS e JavaScript em tempo real para fazer ajustes nos sites.
Instale essas extensões e então continue o artigo.
Bom agora que você já instalou vamos lá. Primeiro preciso que você entenda o papel de cada coisa.
Não sei porque mas estou tendo dificuldade para explicar isso em texto, acho que em vídeo vai ser melhor.
Vamos utilizar a primeira extensão para remover a o elemento HTML que carrega o anúncio na lateral direita.
Ahh antes, lembre-se de fixar as extensões. Na parte superior do navegador tem um ícone de uma peça de quebra-cabeça que é o símbolo das extensões. É só clicar e marcar para fixar as extensões conforme print:
Passo-a-passo:
1 - Agora, acesse o site do Photopea no navegador que possui a extensão instalada. Ao carregar o site, clique em Novo Projeto
2 - Informe as propriedades que deseja nessa tela, depois clique no botão criar.
Após isso deverá carregar uma tela como no print abaixo, porém com o anúncio. Nesse caso, o anúncio não é exibido devido a configuração nativa do navegador Brave, ele não carrega anúncios. Porém, veja também que o espaço onde o anúncio é exibido permanece lá consumindo espaço.
3 - Clique na extensão Click to remover Element. Ao carregar a extensão, passe o mouse sobre a parte onde o anúncio é exibido. Observe que fica vermelho.
Após identificar com o mouse, dê um clique. Talvez você não perceba mas o elemento que você clicou em cima será removido/oculto. veja no vídeo abaixo:
Deve exibir no Removed Element: .app > div:nth-child(2)
Acabamos de remover o HTML onde o vídeo do anúncio é carregado, e bom para essa extensão é só isso mesmo!
4 - Agora precisamos ajustar os elementos html na página para ocupar aquele espaço vazio ao lado.
E aqui eu deixo uma informação técnica. Se você acessar o site e 'dá' um CTRL + U pra ver o código fonte, verá que tem pouco código. Isso porque o site importa a aplicação usando scripts. Isso acabou dificultando localizar os elementos html exatos para trabalhar com eles. Por isso pra poupar seu tempo desse trabalho árduo, vou te dar o código ^^ .
Mas antes clique na extensão User JavaScript and CSS. Ao abrir, clique em Add New, para adicionar um novo site.
Veja que a URL do site Photopea já vai estar lá, pois você abriu a extensão na guia onde o site está aberto.
Segue abaixo os códigos para inserir. É só copiar e colar. Mas tenho uma observação para você:
O tamanho em pixels dos atributos css pode variar de acordo com a resolução do seu monitor. Mas você pode colar e salvar e ir ajustando até que fique bom.
O tamanho em pixels dos atributos css pode variar de acordo com a resolução do seu monitor. Mas você pode colar e salvar e ir ajustando até que fique bom.
JS:
// Seleciona o elemento <canvas> usando querySelector ou outro metodo adequado.
var canvasElement = document.querySelector('canvas');
// Altera o atributo width para 1000.
canvasElement.setAttribute('width', '1000');
// Remove o atributo style.
canvasElement.removeAttribute('style');
//------------------//
CSS:
panelhead.body {
width:1435px!important;
max-width:1435px!important;
}
div.body {
width:1060px!important;
}
div.panelhead {
width:1060px!important;
max-width:1060px!important;
}
canvas {
//width:1000px!important;
//height:500px!important;
}
.lpfoot {
text-align:left!important;
}
5 - Agora é só clicar em salvar.
Bom é isso. Se você chegou até aqui agora pode usufruir do Photoshop, ops, quis dizer Photopea sem grátis e sem anúncio.
Um grande beijo no seu coração e até o próximo artigo ^^ fui..