Tag: design

Efeito float label animado com CSS3 – Igual ao do novo login do Google

No post anterior, eu mostrei como fazer aquele efeito de label float do Material Design. Eis que esta semana eu me deparo com o novo input do login do Google e achei bem legal, mas pensei que ninguém ia se interessar.

Como vi uma pergunta em um grupo do Facebook, resolvi rapidinho então fazer uma variação do que foi feito no anterior, para atingir o mesmo efeito do input login do novo login do Google. Ah e, mais uma vez, sem javascript 😉.

Telefone

Nome de Usuário

HTML e CSS

Se precisarem de alguma explicação mais aprofundada, dê um olhada no artigo anterior. Só uma observação importante é que o top, do label, deverá ser ajustado de acordo com o tamanho da letra e a tipografia usada, pois tipografias diferentes mudam a sensação de tamanho.

<div class="label-float">
  <input type="text" placeholder=" ">
  <label>Telefone</label>
</div>
<br>
<div class="label-float">
  <input type="text" placeholder=" " required="">
  <label>Nome de Usuário</label>
</div>

.label-float{
  position: relative;
  padding-top: 13px;
}

.label-float input{
  border: 1px solid lightgrey;
  border-radius: 5px;
  outline: none;
  min-width: 250px;
  padding: 15px 20px;
  font-size: 16px;
  transition: all .1s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  -webkit-appearance:none;
}

.label-float input:focus{
  border: 2px solid #3951b2;
}

.label-float input::placeholder{
  color:transparent;
}

.label-float label{
  pointer-events: none;
  position: absolute;
  top: calc(50% - 8px);
  left: 15px;
  transition: all .1s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  background-color: white;
  padding: 5px;
  box-sizing: border-box;
}

.label-float input:required:invalid + label{
  color: red;
}
.label-float input:focus:required:invalid{
  border: 2px solid red;
}
.label-float input:required:invalid + label:before{
  content: '*';
}
.label-float input:focus + label,
.label-float input:not(:placeholder-shown) + label{
  font-size: 13px;
  top: 0;
  color: #3951b2;
}

E, como sempre, o link, com o exemplo do jsFiddle, se você deseja apenas experimentar e treinar um pouco:

Compartilhe se você achou legal!

21 de dezembro de 2018

Input Checkbox Switch ON / OFF apenas com CSS3

O CSS é o mecanismo utilizado pelos navegadores para informar a estes como deve ser exibido determinado elemento HTML. Desde a versão 3 muitas coisas novas permitiram que a web fosse cada vez bonita e funcional.

Eu estava um pouco cansado do trabalho e para relaxar fiquei pensando em uma solução simples para simular um Switch ON/OFF que pudesse ser aplicado no lugar de um checkbox. E, para isso, usei simplesmente CSS3 e pseudoclasses:

Basicamente, pseudoclasses nos permitem adicionar instruções específicas de acordo com determinados comportamentos ou condições dos elementos HTML. Neste pequeno exemplo, eu usei a pseudoclasse :checked, para verificar se está marcado ou não, e as que adicionam complementos antes e depois do elemento, são as :before e :after, respectivamente.

Mas o que você quer mesmo é o código, então para ficar fácil de você pegar, basta clicar visualizar o exemplo abaixo no JsFiddle:

Agora, se tudo o que você quer é o código puro, segue abaixo:

HTML e CSS

<div class="check-radio">
  <input type="checkbox"/>
</div>

/**
* CSS do componente
**/
.check-radio{
  position: relative;
}

.check-radio input{
  -webkit-appearance: none;
  appearance: none;
  background-color: #eee;
  width: 40px;
  height: 15px;
  border-radius: 10px;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
}

.check-radio input:focus{
  outline: none;
  cursor: pointer;
}

.check-radio input:before{
  content: '';
  margin-top: -2.5px;
  display: block;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #333, 0 2px 5px rgba(0,0,0,.5);
  position: absolute;
  left: 0;
  transition: left .3s ease-out;
  -webkit-transition: left .3s ease-out;
}

.check-radio input:after{
  content: 'FF';
  display: block;
  margin-top: -2.5px;
  left: 20px;
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  transition: left .3s ease-out;
  -webkit-transition: left .3s ease-out;
  color: #666;
}

.check-radio input:checked{
  background-color: lime;
}

.check-radio input:checked:before{
  left: 22.5px;
  box-shadow: inset 0 0 0 2px green, 0 2px 5px rgba(0,0,0,.5);
}

.check-radio input:checked:after{
  content: 'N';
  left: 43.5px;
  color: green;
}

Por hoje é só… esse post foi rapidinho… Se gostou, compartilhe e nos siga nas redes sociais. VelhoBit, no Facebook, Twitter e Instagram.

15 de dezembro de 2018

Destacando um Elemento HTML (coachmark): Efeito Spotlight ( com CSS3 e Javascript puro)
Obs. Se você só quer o código pronto, pule para o final do post. Ou acesse o link do JSFiddle.

As vezes precisamos encontrar formas de destacar elementos na tela (coachmark). Isso é muito útil principalmente quando você está tratando de pequenos tutoriais, afim de ajudar os usuários. Convém, também, entregar soluções simples e esteticamente elegantes para que ajudem no relacionamento com a ferramenta.

Faz algum tempo, um cliente meu quis criar um modo tutorial em seu sistema. Esse tutorial não deveria permitir que outras áreas da tela fossem clicadas até que a pessoa confirmasse que compreendeu. Como designer, lembrei que, anos atrás, no Android, a Google usava uma espécie de spotlight, mas não vi nada a respeito para websites. E, também, eu precisava que fosse dinâmico. Então eu resolvi usar meus conhecimentos de CSS3 e Javascript para usar essa ideia. E é disso que eu falarei neste tutorial.

Apesar de eu ter usado originalmente jQuery, para compartilhar com todos, resolvi fazer uma versão com Javascript puro, de forma que você poderá adicionar a qualquer aplicação web que você já tenha.

Criando a Estrutura: HTML e o CSS3

Para criar o efeito, vamos usar uma propriedade interessante do CSS3 chamada clip-path. O clip-path permite que criemos elementos vetoriais que serão usados como máscaras. Já utilizamos essa propriedade em um outro exemplo, no caso, sobre um loader.

Exemplo de uso do clip-path:

Dessa forma, se já não tiver, teu projeto deve possuir um container principal que é pai de todos os elementos, mas abaixo do <body>. Se não houver, o crie, é até uma questão lógica de organização para evitar problemas futuros. Veja um código de exemplo:
```
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body>
	<div id="container" class="container">
	</div>
</body>
</html>
```
A div container vai ser justamente o elemento que iremos clippar. Para ajudar em nosso exemplo, vamos criar um form básico dentro do container, ficando assim:
```
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body>
	<div id="container" class="container">
		 <div class="form">
		  First name:<br>
		  <input type="text" name="firstname" id="firstname" value="Mickey">
		  <br>		  <br>
		  Last name:
		  <br>
		  <input type="text" name="lastname" id="lastname" value="Mouse">
		  <br><br>
		  <input type="submit" id="submeter" value="Submit">
		  <div class="btn_ajuda">?</div>
		</div> 
	</div>
</body>
</html>
```
Para finalizar nosso HTML, vamos colocar a caixa de mensagens. Repare que no código abaixo a caixa de mensagem vai ter uma div chamada spacer. O objetivo dessa div vai ser adicionar o espaço do elemento referência, para que o código funcione também em dispositivos móveis e ela deverá ficar fora do container da aplicação. Mais à frente isso vai ficar mais bem explicado.
```
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body>
	<div id="container" class="container">
		 <div class="form">
		  First name:<br>
		  <input type="text" name="firstname" id="firstname" value="Mickey">
		  <br>		  <br>
		  Last name:
		  <br>
		  <input type="text" name="lastname" id="lastname" value="Mouse">
		  <br><br>
		  <input type="submit" id="submeter" value="Submit">
		  <div class="btn_ajuda">?</div>
		</div> 
	</div>

		
		<div class="mensagem_area" id="mensagemAjuda">
			<div class="spacer"></div>
			<div class="mensagem">
				<h2></h2>
				<p></p>
				<button onclick="ocultarAjuda()">
				  OK, entendi
				</button>
			</div>
		</div>
</body>
</html>
```
Agora que o HTML está pronto, vamos para o CSS inicial. A primeira fase é estabelecer todo comportamento da div que estamos usando como container. Também precisamos adicionar uma cor ao plano de fundo, que vai ser a cor que usaremos como base para a área em lowlight.

A animação ficará a cargo do recurso transition do CSS3. Importante ressaltar que uma animação criada por CSS é mais leve e possui melhor frequência do que uma criada pelo Javascript. Isso porque o navegador tenta usar a renderização da GPU nesses casos. Dessa forma, vamos aplicar o parâmetro transition para aplicar o efeito.
```
body{
		    margin: 0;
		    font-family: sans-serif;
		    background-color: #15d115;
}
		    
.container{
			background-color: white;
			min-width: 100%;
/* Obs. A largura do clip-path, abaixo, está definido
como 3840 de diâmetro, porque ultrapassa
o tamanho do 4K - O clip-path considera o raio.
Posteriormente, você poderá trabalhar com
adição de classes, se você quiser evitar
a definição inicial desse tamanho,
mas é necessário haver uma para poder
ativar a animação.*/
			clip-path: circle(1920px at center);
			-webkit-clip-path: circle(1920px at center);
		    transition: 2s ease-in-out;
		    -webkit-transition: 1s ease-in-out;

		    position: absolute;
		    min-width: 100%;
		    min-height: 100%;
}
```
O parâmetro position como absolute, com suas larguras e alturas mínimas marcados como 100% servirão para emular o comportamento do body. Isso só é necessário porque alguns sistemas costumam ter áreas menores do que a primeira dobra do navegador. Nesse caso, apenas, é necessário aplicar esses três parâmetros.

Já para o CSS do bloco de mensagem, você pode fazer algo do jeito que preferir. Apenas é importante lembrar que esse bloco deverá ficar com position absolute, ou fixed, dependendo de como for sua aplicação, para que possa se encaixar no local correto.
```
.mensagem_area{
		 position: fixed;
		 opacity: 0;
		  pointer-events: none;
		  transition: 2s ease-in-out;
		  -webkit-transition: 1s ease-in-out;
		  color: white;
		    
		  display: flex;
		  justify-content: flex-start;
		  flex-wrap: wrap;
}
.mensagem_area.show{
		    opacity: 1;
		    max-width: 100%;
		    pointer-events: all;
}
.mensagem_area .spacer{
	visibility: hidden;  
}
.mensagem_area .mensagem{
		    width: 250px;
		    padding: 15px;
		    box-sizing: border-box;
 }
.mensagem_area .mensagem h2{
		    font-size: 18px;
		    font-weight: bold;
		    margin: 0;
}
.mensagem_area .mensagem p{
		    font-size: 16px;
}
```
Criando as Funções Javascript

Agora basta que a gente crie as funções de aparecer e desaparecer o spotlight. Originalmente eu havia usado jQuery, pois ele possui soluções rápidas e funcionais como o offset nativo e outerWidth, mas com uma pesquisa rápida conseguir adaptar, apesar do código ter ficado um pouquinho maior.

O código consiste em 4 blocos:
- Capturar largura e posição em relação ao document, do objeto referência (que será passado como parâmetro), fazendo os cálculos apropriados para adição do círculo. Você irá reparar que é usado como base o raio e não o diâmetro, pois é a referência do parâmetro clip-path;
- Adicionar o clip ao container;
- Adicionar os textos da mensagem a partir dos parâmetros passados;
- Aplicar os estilos com os novos parâmetros. O timeout que precede a adição da classe show da mensagem existe para que o texto apareça após a transição do spotlight.
```
function mostrarAjuda(id_obj, titulo, mensagem){
	//Pegar raio e posição
	var raio = document.querySelector('#' + id_obj).offsetWidth / 2;
	var offset = document.querySelector('#' + id_obj).getBoundingClientRect();
		offset.top = offset.top + document.body.scrollTop;
		offset.left = offset.left + document.body.scrollLeft;
	
	//Adicionar clip
	var clip = "circle(" + parseInt(raio).toString() + "px at " + parseInt(offset.left + raio).toString() + "px " + parseInt(offset.top + offset.height/2).toString() + "px)";
	
	var container = document.querySelector('#container');
		container.style.clipPath = clip;
		container.style.webkitClipPath = clip;
		
	//Textos
	document.querySelector("#mensagemAjuda h2").innerHTML = titulo;
	document.querySelector("#mensagemAjuda p").innerHTML = mensagem;
	
	//Estilos
	document.querySelector("#mensagemAjuda .spacer").style.width = parseInt(raio * 2 + offset.left).toString() + "px";
	document.querySelector("#mensagemAjuda .spacer").style.height = parseInt(raio).toString() + "px";
	document.querySelector("#mensagemAjuda").style.top = parseInt(offset.top).toString() + "px";

	setTimeout(function(){
		document.querySelector("#mensagemAjuda").classList.add("show");
	}, 1500);
	
}
```
Por fim, basta adicionar uma função que restaure as configurações originais dos estilos e textos.
```
function ocultarAjuda(){
	//Limpar
	document.querySelector("#mensagemAjuda").classList.remove("show");
	container.style.clipPath = "circle(1920px at center)";
	container.style.webkitClipPath = "circle(1920px at center)";
	setTimeout(function(){
		document.querySelector("#mensagemAjuda h2").innerHTML = "";
		document.querySelector("#mensagemAjuda p").innerHTML = "";
	}, 2000);
}
```
Como sempre, deixei o código completo para você testar ou copiar. No caso, o código está no jsfiddle e você pode visualizar abaixo:

Se você gostou da publicação, curta e compartilhe esta página com o maior número de pessoas. Aproveite e curta nossa página do Facebook.

ATUALIZAÇÃO: Que tal experimentar uma versão com blur, usando o html2canvas? Obs. É meio pesado. Dê preferência a usar em projetos para desktop.
7 de dezembro de 2018
Como Criar Sua Própria Fonte e A Usar Como Ícone?
Quem está estudando para ser designer, precisa estudar um assunto muito importante: Tipografia. E, por muitas vezes, precisa criar a própria família tipográfica, ou seja, como criar fontes. Além disso, podemos usar uma tipografia personalizada como ícones, tornando o site ou o sistema, desenvolvido em HTML5, ainda mais leve e bonito.

Este tutorial visa ajudar você com o processo técnico de converter os símbolos e criar sua própria fonte OTF, TTF, SVG, etc. Também um pequeno resumo de como implementar sua fonte em CSS3 para funcionar como ícone.

Para começar, você vai precisar instalar o Inkscape em seu computador. Baixe a versão mais recente do aplicativo Inkscape. Ele está disponível para Windows, Linux e Mac. Caso você use o MacOSX, será necessário instalar o XQuartz.

Você vai precisar também de algum programa para desenho vetorial, pode usar qualquer um de sua preferência, como o Illustrator, CorelDRAW ou o próprio Inkscape.

Crie seu símbolo para cada caractere

Primeiramente, é necessário criar os glifos. Você pode utilizar o Illustrator ou qualquer outro programa de ilustrações vetoriais. Exporte o arquivo no formato SVG. Você pode, se quiser, colocar todas as ilustrações no mesmo arquivo. Os desenhos não deverão ter contornos, somente preenchimento e devem ser compostos somente de preto.

Anexando Glifos aos Caracteres no Inkscape

No Inkscape, selecione File>New>fontforge_glyph. Essa opção adiciona as predefinições necessárias para criação coerente da família tipografica.

Com o documento criado, importe os glifos (File>Import) criado anteriormente por você. Caso você tenha feito todos os glifos no mesmo arquivo, o Inkscape irá importar todos agrupados na organização que foi salvo.

Quando o arquivo é importado, ele vem agrupado e com algumas configurações que o Inkscape não reconhece corretamente.
Siga os passos abaixo para não haver erros e incompatibilidades:

Selecione o objeto, clique com o botão direito e escolha Ungroup. Faça isso quantas vezes for necessário até o objeto estar totalmente desagrupado;

Ainda com o objeto selecionado, vá no menu Path>Combine;

Em seguida vá no menu Path>Union;

Essas ações são necessárias para que o glifo se torne um unico objeto e possa ser anexado corretamente ao caractere escolhido.

O próximo passo é abrir a tela de edição de fontes. Selecione o menu Text>SVG Font Editor.

Será aberto o painel SVG Font Editor, que permite você criar uma fonte no formato SVG (interpretado pela maioria dos smartphones). A primeira coisa a se fazer é criar um nome e família para a fonte. No painel de edição de fonte, e com a guia GLOBAL SETTINGS ativada, clique no botão New. Em seguida, clique duas vezes no nome que foi gerado para que possa modificar e colocar o nome que você quiser.

Agora, ainda no mesmo painel, abra a guia GLYPH e clique no botão Add Glyph, ele irá criar uma nova linha na tabela Glyph name/Matching string. Você deve dar dois cliques no nome criado para editar o nome. Ao lado, você deve dar dois cliques no espaço vazio (logo abaixo de Matching String) e você descobrirá (sim, está escondido) que você pode editar esse campo. Simplesmente digite a letra a qual você quer assimilar o glifo.

No exemplo a seguir, assimilei o meu glifo de Editar a letra “e” minúscula. Vale salientar que você pode vincular a qualquer caractere que deseja, inclusive caracteres especiais como #,ø,®,†, etc.

Por fim, selecione o objeto (ou grupo) que você quer vincular ao caractere e clique no botão Get curves from selection. Para verificar se foi adicionado corretamente, digite, em Preview Text, o caractere que deseja verificar.

ATENÇÃO: Caso o ícone não apareça no Preview Text corretamente, como aparecer pequeno ou simplesmente não aparecer, você deve repetir os passos acima de Ungroup, Combine e Union do objeto. Provavelmente o objeto não foi preparado corretamente e por isso não relacionou como deveria.

Salve o arquivo normalmente. No formato padrão de SVG do Inkscape.

Transformando a fonte SVG em OTF ou TTF

O arquivo SVG está pronto. Agora precisamos converter para uma fonte usável pelo sistema operacional. Há muitos sites que fazem essa conversão.

O que recomendo que faça a conversão é o FreeFontConverter. Basta importar o seu arquivo SVG, escolher o formato (Aconselho OTF, primeiramente, que tem melhor acabamento) e depois clicar em convert. Ele fará o download automaticamente da fonte.

ATENÇÃO: Caso dê erro durante a conversão, você pode tentar salvar o arquivo em SVG Optmized, no Inskscape.

Você pode ver que a fonte pode ser instalada normalmente no seu sistema operacional.

Usando a fonte personalizada em CSS e usando-a como ícone

Para preparar um pacote com sua fonte personalizada, para ser usada em um site, o site FontSquirrel disponibiliza o WebfontGenerator. Para usá-lo basta enviar a sua fonte em OTF ou TTF, concorde com os termos e gere o kit.

Feito o download, está na hora de incorporamos a fonte no seu CSS. Para isso, basta você copiar as fonts que foram geradas no kit para uma pasta font (ou outra de sua preferência) no seu site e chamar via CSS.
```
@font-face {
    font-family: "minhafonteregular";

    src: url("fonts/minhafonte-webfont.eot");
    src: url("fonts/minhafonte-webfont.eot?#iefix") format("embedded-opentype"),
         url("fonts/minhafonte-webfont.woff") format("woff"),
         url("fonts/minhafonte-webfont.ttf") format("truetype"),
         url("fonts/minhafonte-webfont.svg#minhafonteregular") format("svg");

    font-weight: normal;
    font-style: normal;
}
```
Para usar como ícone em um botão (ou em qualquer outro componente HTML5), basta você usar a opção content, do CSS3, como descrito abaixo:
```
button.editar{
        padding:10px;
}

button.editar:before{
        font-family: "minhafonteregular";
        font-size:36px;
        content:"e";
        -webkit-content:"e";
        -moz-content:"e";
        -o-content:"e";
        -ms-content:"e";
}
```
E basta adicionar a tag Button com a classe determinada:

<button class=”editar”> </button>

ATENÇÃO (iOS): Devido a padrões do iOS, o ícone só vai aparecer se tiver uma cor de fundo (devido ao webkit-appearance), se você quiser, entretanto, usar a cor padrão, utilize o CSS abaixo:

button{
background-color: buttonface;
}

Abaixo, você pode ver o exemplo usado no vídeo (no topo do post), que tem uma forma um pouco diferente de usar.

Qualquer dúvida, deixe um comentário, mande uma mensagem no skype ou por email. Siga @velhobit no Twitter e curta nossa página no Facebook.

Até o próximo Tutorial.
29 de novembro de 2018
Adobe XD cheio de novidades anunciadas no AdobeMAX

O Adobe Experience Design, ou simplesmente Adobe XD, já é uma ferramenta extremamente democrática para quem ama design ou simplesmente quer prototipar seus projetos. Isto porque além de estar disponível no Windows, MacOS e extensões para iOS e Android, ainda possui um plano gratuito.

Como já não bastasse ser tudo de bom, a Adobe lançou novas funções neste dia 15 de Outubro de 2018. Funções essas que são de deixar de deixar qualquer Times com cara de Helvetica.

Gatilho por Voz

Com a chegada de novos assistentes para a casa, como o Google Home Hub e o Alexa Echo Show, os designers de interação precisam prototipar também aplicativos que irão responder ao comando de voz. Por isso mesmo, a Adobe introdução uma forma de passar a tela por comando de voz! Veja no vídeo abaixo um exemplo de protótipo do Alexa Echo Show.

Plugins? Temos sim.

Lembra que meses atrás a Adobe abriu um financiamento para quem quisesse desenvolver ferramentas para o Adobe XD (que você ainda pode se inscrever)? Pois é, e aqui está o resultado. A Adobe trouxe diversas integrações, até mesmo com o Slack, Trello e Microsoft Teams, que são ferramentas altamente usadas no ambiente de desenvolvimento.

Animação Automática

Pois é… tem gente que não é muito fã de passar um tempinho animando. Por isso, a Adobe introduziu um sistema de animação automática. Muito similar mesmo ao que a gente vê no Keynote, da Apple. Essa animação automática dá um resultado misto muito bom em elementos da tela, deduzindo o comportamento de cada elemento, para uma melhor transição dos mesmos.

Gatilho de Gesto de Arrastar

Uma das interações mais comuns dos dias de hoje é arrastar algo com o dedinho. Por que não ter isso no protótipo? Agora o AdobeXD tem um gatilho que nos permite arrastar um elemento para servir como gatilho para a passagem para a próxima tela, demonstrando o funcionamento correto daquele elemento.

E o que mais tem?

O Adobe XD ainda trouxe as opções de vincular símbolos, integrar facilmente elementos vetoriais do Adobe Illustrator CC (já havia no Photoshop) e ainda exportar, com alta fidelidade, o protótipo e suas animações, para o Adobe After Effects CC, ajudando o designer a vender mais facilmente sua ideia e criando mockups mais elegantes para apresentação.

O legal é que tudo isso já está disponível, e não só para os assinantes do plano Creative Cloud, como também para quem usa gratuitamente através do plano Starter.

Com notícias do The Blog, da Adobe.

15 de outubro de 2018
Photoshop Completo no iPad?? Como assim, Adobe?

Parece loucura, mas finalmente parece que a era dos laptops e desktops acabaram e darão espaço ao dispositivo móvel.

Já havíamos noticiado rumores de que a Adobe estaria com planos de lançar uma versão completa de seu principal produto para o iPad. Não é que era verdade mesmo?

Durante a conferência Adobe MAX, que está acontecendo esta semana, a Adobe oficializou o lançamento do Adobe Photoshop CC, o real Photoshop CC, com todas suas funções e ferramentas, para o iPad. Isso significa que o designer ou fotógrafo poderá trabalhar em seus projetos, PSD, exatamente da mesma forma, seja no desktop, laptop ou em seu iPad. E, não apenas isso, a Adobe planeja lançar para outros sistemas operacionais também (isso tem cheiro de Fuschia?).

Ainda segundo a Adobe, o código base será o mesmo de sua contraparte do desktop, como já acontece com o Adobe Lightroom CC e com o novo Adobe Premiere Rush CC. O que garantirá qualidade e performance nos resultados. A interface também está mais bonita, natural e adaptada ao toque.

O lançamento está previsto para 2019.

Mais uma coisa

Por enquanto já é possível ter uma ideia de como vai ser a interface e usabilidade através do Project Gemini, um novo aplicativo para iPad que está sendo lançado, já com as funcionalidades do pincel do Photoshop, e uma interface bem similar. Focado para ilustradores e desenhistas, a ferramenta usa bem as funcionalidades do Apple Pencil. Se você for artista ou curioso, pode fazer seu pedido para ser um beta testers do Gemini neste link.

Com informações do The Blog, da Adobe.

15 de outubro de 2018
Adobe Anuncia Plataforma Aberta para Experience Design com o Adobe XD CC
A Adobe anunciou que está abrindo uma plataforma para permitir que usuários, empresas e desenvolvedores criem ferramentas personalizadas para serem usadas com o ecossistema do Adobe XD.

Já disponível para parceiros, a API do Adobe XD agora é aberta para que os desenvolvedores possa adicionar novas ferramentas, automatizar projetos e conectar a ferramentas e serviços comuns aos designers ou específicas para cada projeto.

Junto a isso, o Adobe XD também agora apresenta integração com ambientes de colaboração populares como o Microsoft Teams, Slack e Jira Software Cloud.

“Estamos compromissados como o desenvolvimento de um ecossistema ricos acerca do Adobe XD, para atender as necessidades do designer moderno. (…) Oferecer experiências de usuário atraentes e engajadas é imperativo para marcas, empresas e todos os produtos digitas, e a Adobe está focada em prover aos designers poderosos recursos de colaboração”

Scott Belsky. Diretor de Produto e Vice-Presidente Executivo do Adobe Creative Cloud.

A plataforma aberta estará disponível ainda em 2018, mas a Adobe já vem trabalhando para construir plugins com o XD com parceiros como a Microsoft, Trello, UserTesting, Airtable, Dribble, Sillicon Publishg, Slope, inMotionNow, Astute Graphics, Anima e Google Cloud, além de suas próprias ferramentas como o Behance e Adobe Stock.

Fundo de 10 milhões de dólares para capacitação em inovação criativa

A Adobe também revelou que seu fundo de incentivo ao design, Adobe Fund for Design, criado em Maio deste ano, distribuiu uma grande quantidade de investimentos para desenvolvedores de UX em todo mundo. Os investimentos iniciais incluíram indivíduos e empresas, com diversos produtos disponíveis ainda este mês:
- CloudApp – Video, webcam, captura de tela com anotação e criação de GIF através da nuvem.
- Protoio, Inc., makers of Overflow – Capacita designers a projetar, apresentar e compartilhar bonitos diagramas de fluxo que contam uma história.
- Stark – Ajuda seu projeto e a construir produtos que são acessíveis éticos e inclusivos.
- Florian Schulz, Maker of Ratio – Criar ferramentas para integração de tipografia.
- Precious Design Studio – Um estúdio que ajuda inovadores a modelarem produtos e serviços que as pessoas amem interagir, bem como ferramentas de design como Data Populator e Open Color Tools.
- Odin Chart – Tyler Wolf é um designer de visualização de dados construtor do Odin Chart, uma ferramenta simples que cria gráficos para produtos digitais e publiccações.
- Iconscout by Chamestudio – Ícones de alta qualidade, ilustrações e fotos stock em um único lugar.
- Impekable – Agência digital especializada em experiência do usuário e desenvolvimento de softwares.
- UI Faces – Avatares para maquetes (mockups) de design.
- Prototypr.io – Comunide para designers que querem compartilhar seus trabalhos e ficarem atualizados com as últimas ferramentas e novidades sobre design.
- Modulz – Gerador de código para construção de interfaces gráficas sem a necessidade de programar.
- Design+Code – O time por traz dos populares cursos de código e dedsign e do plugin Angle.
- Yummygum – Criar designs belos e experiencias refrescantes para web e mobile.
A Adobe também anunciou algumas novidades para o Adobe XD, como facilidade nos workflows, para o processo designer-desenvolvedor e opções de extrair assets.

O Adobe XD está disponível gratuitamente através do plano Start da Adobe ou através dos planos de aplicativo único ou do Adobe CC.

Com informações do Abduzeedo e Adobe News
30 de agosto de 2018
Adobe pretende lançar versão completa do Photoshop para iPad

Com o poder de fogo atual dos iPads, já é possível executar softwares mais pesados e complexos. Por esse motivo, a Adobe está planejando lançar a versão completa de seu aplicativo de edição de fotos para o dispositivo da maçã. Esse processo é parte de uma nova estratégia para tornar seus produtos multiplataformas, algo que já começou com o Lightroom.

Além disso, nesta semana, a desenvolvedora Serif lançou uma versão do Affinity Designer, concorrente do Illustrator, para iPad. A introdução da versão completa do Photoshop para o dispositivo, traria ainda mais espaço para a Adobe no iOS, que no momento está com a área de design dominado por outras empresas.

O Lightroom para iPad e Desktop já compartilham a mesma versão e estrutura

Outro motivo pelo qual o Photoshop pode ser uma boa aposta da Adobe, é a função que tem o iOS de sincronizar arquivos entre vários dispositivos, facilitando a integração do usuário entre desktop e mobile. Ainda, o editor de imagens teria compatibilidade integral com o Apple Pencil.

O aplicativo está previsto para chegar ao mercado em 2019, caso não hajam problemas mais sérios em seu desenvolvimento.

“Os clientes da Adobe, particularmente em mídia e entretenimento, estão cada vez mais trabalhando em tablets, em vez de computadores de mesa, e pediram à empresa a capacidade de fazer ‘edições on the fly’ em seus projetos criativos“, disse Scott Belsky, vice-presidente executivo da Creative Cloud, à Bloomberg.

Diante dessa nova informação e do lançamento anterior do Lightroom, tudo indica que a criação de aplicativos multiplataformas é a estratégia da Adobe para os próximos anos . Uma nova versão do Illustrator também estaria em desenvolvimento, mas sem muitas informações e previsão de lançamento.

Com notícias da Bloomberg e Blog da Adobe.

15 de julho de 2018