Pesquisar aqui

Mostrar mensagens com a etiqueta imagem. Mostrar todas as mensagens
Mostrar mensagens com a etiqueta imagem. Mostrar todas as mensagens

sábado, 28 de novembro de 2020

[JPEG] - Compressão de uma imagem

    O JPEG, ou "Joint Photographic Experts Group", é um método de compressão de imagem muito utilizado em câmaras digitais como os telemóveis e as próprias camaras digitais. As extensões do jpeg são: .jpeg / .jpe / .jpg / .jfif / . jfi .

    Como deves saber tudo o que são ecrãs contem pixéis (junção das inicias de picture x element) que geralmente são quadrados organizados em três cores, Red (vermelho), Green (verde), Blue (azul). De certeza que já ouviste falar desta sigla: RGB, pois é, é o nome dado ao esquema de cores dos ecrãs onde é possível, apenas com estas três cores, criar cerca de 16,7 Milhões de cores.

    Aí que entra o JPEG, que foi criado para reduzir a informação necessária para produzir uma imagem, da seguinte forma: Os pixéis precisam de receber a informação de que cor devem reproduzir e essa informação nos ecrãs mais recentes é de 24-bit, porem como o olho humano não consegue distinguir cores muito próximas como o seguinte exemplo:


Como as cores são muito parecidas o JPEG tira partido de que não é possível distingui-las. Assim em vez de enviar 24-bits para cada o JPEG envia a mesma informação para pixéis de cores parecidas assim consegue comprimir um ficheiro até quase 10x.

Exemplo: Iremos imaginar uma foto em "raw" (ficheiro puro) que tem 18Mb de espaço ocupado, após todos os cálculos do JPEG, verificando as cores parecidas e enviando a mesma informação para esses pixéis diminuindo assim o ficheiro até aos 2MB, 9x mais pequeno! 

sexta-feira, 15 de maio de 2020

Iniciação ao HTML: imagens

Uma peça fulcral de muitos sites são as imagens, que ajudam na sua acessibilidade e embelezamento. Como tal, vou ensinar-vos como colocá-las num site a partir de HTML.

Código



Resultado do código




Como pode ver, para incorporar uma imagem é apenas necessário utilizar a tag "img" e no seu interior colocar a localização do ficheiro (no parâmetro "source", src). É aconselhável colocar sempre as imagens na mesma pasta em que o código HTML se encontra pois, dessa maneira, não será necessário utilizar domínios próprios para indicar a localização da imagem (como "C:\nomedoutilizador\imagens\..."), que podem vir a gerar erros. Por fim, é também aconselhável colocar uma imagem alternativa para a eventualidade da imagem não ser carregada (como foi o meu caso), para além disso, essa mensagem alternativa ajuda os invisuais a perceber que naquele lugar existe uma imagem e sobre o que ela é, pois o seu software irá ler a mensagem alternativa.

Imagem produzida pelo autor.

sábado, 28 de janeiro de 2017

SVG, um formato importantíssimo na Web

 SVG (acrónimo de Scalable Vector Graphics) é um formato, fruto da linguagem XML, que é descrito de estruturas graficas feitas apenas e só de vetores. Podendo criar caixas, caminhos, linhas, círculos, polígonos... 

  O que faz este formato tão importante para um WebSite é a sua flexibilidade. Isto é, uma imagem no formato svg reduz não só o espaço de armazenamento que ela ocupa no nosso disco, como também, mantem a qualidade do detalhe ao ser ajustada para qualquer tamanho, evitando quaisquer pixelizações. 


 No que toca à compatibilidade, o facto de o formato ser compatível com versões quer anteriores quer posteriores permitirá que seja usado quase intemporalmente. Quanto à sua acessibilidade, o formato é universalmente legível, o que é ajudado pelo facto de ter sido especificado diretamente pelo WorldWideWeb Consortium (W3C).´

 Podemos adicionar uma imagem neste formato recorrendo apenas à tag <img src:"imagem.svg"> ou então podemos ser nós próprios a criar a imagem. Para os mais curiosos segue aqui um pequeno tutorial que explica o processo de criação de figuras em svg:http://www.w3schools.com/html/html5_svg.asp

 Por último seguem aqui alguns exemplos de imagens neste formato:

  

quarta-feira, 4 de janeiro de 2017

Inserir Imagens em HTML


A tag para se inserir imagens é <img src="imagem.jpg"> .

Deve-se ter em atenção que o endereço da imagem a introduzir em "src" deve ter em conta a pasta onde a imagem está arquivada no servidor. Assim se a nossa página estiver na raiz, e a imagem estiver numa pasta chamada "fotos", a nossa tag para aquela imagem deveria ser:

<img src="fotos/imagem.jpg"> .

Atributo "alt"

O atributo "alt" deve ser usado para quando queremos que um texto apareça sempre que passarmos o rato sobre a imagem. Este texto também aparece como texto descritivo quando a exibição das imagens não está activa. A tag fica:

<img src="imagem.jpg" alt="Aniversário da Joana">


Definir Altura e Largura

Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em percentagem:

<img src="imagem.jpg" width="200" height="100">


Definir Contorno da Imagem
Para o contorno usa-se o atributo "border". O valor 0 faz com que a imagem fique sem contorno. Quanto maior for o valor definido maior é a espessura do contorno. O código pode ser por exemplo:

<img src="imagem.jpg" border="5">


Múltiplos Atributos

Se quisermos definir as dimensões da imagem, um contorno, e um texto "alt", podemos definir a tag com todos esses atributos. A ordem em que os colocamos não é importante:

<img src="imagem.jpg" border="5" alt="Aniversário da Joana" width="200" height="100">


Inserir Imagens em Links
Para fazer com que os visitantes possam ser levados para outra página ao clicar numa imagem, basta juntar o código HTML para imagem e o código HTML para links (que vamos abordar a seguir):

<a href="http://www.outra_pagina.com"><img src="fotos/imagem.jpg"></a>


Fonte do texto: http://www.comofazerumsite.com/criarsite/tutorial_html.html
Fonte da imagem: http://www.maikbasso.com.br/2011/12/inserindo-e-manipulando-imagens-em-uma.html

terça-feira, 6 de dezembro de 2016

A importância dos megapixeis em fotografia

Aqui temos um site que explica bastante detalhadamente assuntos tais como:

-O que são os megapixeis

-A resolução das imagens

-O tamanho (do sensor) interessa?



Autor: Omeubaú


Tipos de imagem

Aqui podemos ver um video que mostra as principais diferenças entre gif, Jpeg e Png:

Link: https://www.youtube.com/watch?v=FkdKN44tnP0

Autor: Universidade do site

Alterar a cor de uma imagem

Você pode ajustar a intensidade da cor (saturação) e o tom da cor (temperatura) de uma imagem ou recolori-lo. Você pode aplicar vários efeitos de cor a sua imagem.
Imagem original de flores rosas


Mesma imagem com saturação da cor alterada para 66%


Mesma imagem com efeito de Recolorir Azul-piscina


Mesma imagem com efeito de Recolorir Vermelho


Alterar a cor de uma imagem


Clique na imagem que você deseja alterar.


Em Ferramentas de Imagem, na guia Formatar, no grupo Ajustar, clique em Cor.



Caso você não veja as guias Formatar ou Ferramentas de Imagem, confirme se selecionou uma imagem. Talvez seja necessário clicar duas vezes na imagem para selecioná-la e abrir a guia Formatar.


Siga um destes procedimentos:


Para alterar a saturação de uma cor (saturação superior é mais vívida, menor saturação é mais cinza), clique em um dos ajustes comuns oferecido em Saturação da cor.


Para alterar a temperatura de cor, clique em um dos ajustes comuns oferecidos em Tom de cor.


Para aplicar um efeito estilizado interno, como escala de cinza ou tom sépia, clique em um dos ajustes comuns oferecidos em Recolorir.

DICA : Você pode mover o ponteiro do mouse sobre qualquer um dos efeitos para ver uma visualização de como sua imagem ficará com esse efeito aplicado antes de você clicar nele.


Opcionalmente, você pode ajustar a intensidade de sua alteração de cor clicando em Opções de cor da imagem, ou você pode personalizar sua própria cor clicando em Mais variações > Mais cores.

sábado, 12 de novembro de 2016

Importância da Cor para contar uma História

 A cor apresenta bastante importância na narração de uma história, na medida em que nos apela a certas emoções e nos faz olhar para o que nos é mostrado pela imagem de maneira diferente, consoante a matiz, a saturação e a sua tonalidade (o quão clara essa é). Desta forma a fotografia, o cinema e até mesmo o teatro utilizam a cor como forma de expressão.

 Por exemplo, a cor vermelha aponta para determinação e constância, podendo também representar o perigo ou até a própria sexualidade.

2001: A Space Odyssey, de Stanley Kubrick
O doutor Dave Bowman encontra-se numa situação de grande perigo (representada pelo vermelho do fundo que apresenta grande saturação), encontrando-se também num estado de fúria e constância interior (daí o tom vermelho da som pele).
No entanto, o mesmo vermelho ao ser representado com uma tonalidade muito superior (cor mais clara), apela a sentimentos diferentes em relação ao vermelho mais escuro.

Her, de Spike Jonze
Theodore a instalar o software "Samantha"; a cor vermelha presente quer na imagem remonta para o estado de espírito amoroso de Theodore, daí a forte tonalidade da cor presente.

 Para mais informações sobre qual a importância de uma cor na imagem, e de qual a função da matiz, tonalidade e saturação, segue aqui um vídeo feito por Lewis Bond, que engloba as técnicas utilizadas para colorir no cinema (também aplicáveis à fotografia):


http://causaemocional.blogspot.pt/2014/04/suas-emocoes-reveladas-pelas-cores.html

segunda-feira, 26 de setembro de 2016

PT1: Imagens estáticas e Photoshop CS6 Portable


Aplicações Informáticas B: 23/09/2016

As imagens estáticas são, tal como o nome indica, imagens que não possuem nenhum movimento na tela. Na aula passada trabalhámos um pouco a edição da imagem estática com a ajuda do programa Photoshop CS6  Portable por vários passos como:
  • sobreposição de várias imagens separadas.
  • uni-las com a ajuda das ferramentas do PS CS6.
  • e até alterar certos aspetos das imagens como o sua cor para criar uma nova imagem.

Esta semana irei continuar o meu trabalho neste projeto e aprenderei mais sobre este software de edição especialmente com a adição de novos elementos á tela em que estamos a trabalhar.


quarta-feira, 13 de janeiro de 2010

Adicione um simpson às suas fotos!

Adicione um personagem da série de "Simpsons" a qualquer foto sua, utilizando este site: http://simpsonspictures.net/generate.php.

Na prática:

- Seleccione na esquerda o personagem que deseja incluir, visualizando de imediato a respectiva "foto" em baixo.

-Clique sobre "Escolher ficheiro" e seleccione a sua própria foto, dentro da qual pretende inserir esse personagem.

-Digite uma pequena legenda em baixo, caso deseje e conclua com clique sobre "Generate". Irá ver a foto final. Para a guardar em disco faça um clique-direito sobre a foto e seleccione "Guardar como". Na direita pode ver o endereço dessa mesma foto na Web, que pode incluir no seu site/blogue ou em qualquer "rede social"...

quarta-feira, 6 de janeiro de 2010

Crie efeitos com as suas fotos!


Para a criação de efeitos ou animações com as suas fotos aqui tem mais um recurso: selecione o efeito desejado, "junte-lhe" a sua própria foto, "misture bem" (ajuste) e obterá o resultado pretendido...

Tratamento de beleza em fotos!

As fotos das celebridades são sempre "retocadas", sendo corrigidas as imperfeições. Também nós temos o direito a este "tratamente de beleza", e o seguinte site fá-lo de forma automatica: http://www.pictreat.com/

NA PRÁTICA:
a Utilização deste serviço é de facto simples:
- Escolha o ficheiro com a imagem que deseja"embelezar" e, assim que a enviar, pode seleccionar se deseja reduzir o efeito de olhos vermelhos ou se esta foto foi capturada por um temóvel (pouca qualidade).
- Aguarde que a foto seja processada e não necessita de fazer nada, irá ver a imagem original e tratada. Compare-as...
- Para guardar esta foto, tratada, no seu computador, clique sobre "save to your computer" na direita.
- Caso deseja a foto numa maior resolução (tamanho), para a imprimir com qualidade, encontra essa opção em "clique hero to get a high resolution printable version". Ser-lhe-á pedido para se registar, o que é gratuito.