DESIGNLAB

Design, Tipografia e Multimédia.

Archive for Tutorials

Links do dia: alteração de estados com CSS

Há muito tempo que não faço esta rubrica aqui, mas com as aulas a acabar, posso dar-me ao luxo de voltar a ler as mais de 50 abas que tenho abertas no Firefox e descobrir coisas absolutamente deliciosas.

Uma destas coisas é este truque conseguido apenas com um pouco de imaginação e CSS: http://jsfiddle.net/DMNSn/

Simon Madine consegue mudar o aspeto (propriedades de CSS) recorrendo apenas a hiperligações, um pouco de lógica de Box model, e ao atributo “:target”. A solução é assustadoramente simples e absolutamente deliciosa! Permite inúmeras aplicações em layouts interativos, exploratórios, jogos… Ah!… já disse que ele não usa Javascript?…

Via Creative Bloq: http://www.creativebloq.com/css3/tips-breathe-new-life-your-css-61411880

Webinar Adobe InDesign CC

Screen Shot 2013-07-07 at 7.03.48 PM

Imagem retirada do site da Adobe

Para quem quiser  investir no Design Editorial e na publicação digital, recomendo o próximo webinar gratuito da Adobe: https://www1.gotomeeting.com/register/145221617?et_mid=626755&rid=3807420

Na próxima terça-feira, 19:00

Boas práticas para a edição de Blogs

Pormenor da estratégia editorial de publicação (in Tidwell, 2009: 416)

Este texto resume um conjunto de boas práticas para a redação de Blogs. Surge em resposta ao desafio do Prof. Hélder Caixinha, no âmbito das aulas de  Projeto, e em resposta às necessidades de outras disciplinas como Multimédia Editorial, onde parte do trabalho dos alunos passa por criar um blog de documentação de desenvolvimento e de acompanhamento dos projetos.

Por uma questão de conveniência, este resumo está organizado nos seguintes temas:

Deve ser usado como um manual de linhas orientadoras para a redação e manutenção de um Blog. Não como um manual de regras obrigatórias.

Cada autor deve refletir sobre estes princípios e adapta-los da melhor forma ao seu Blog.

Uma vez que se trata de um resumo, os assuntos podem ser consultados de forma mais completa e ilustrada nas referências fornecidas. Conhecem outras , ou melhores referências? Deixem-me um comentário.

Conteúdo

Anatomia de um Blog (About.com)

O conteúdo refere-se às entradas cronológicas (“posts”), páginas de informação estática, ou pequenas secções (como as “sidebars” do Blog).

As entradas devem fornecer o contexto necessário de forma curta. Devem filtrar a informação desnecessária e oferecer hiperligações para informação adicional (fontes originais, textos longos, outras entradas, sites, ou blogs com informação adicional).

Devem procurar uma redação correta, sem erros, com princípio, meio e fim.

Agrupar a informação semelhante em pequenos segmentos, grupos, ou unidades, com uma ou duas ideias por cada.

As entradas, ou secções, devem possuir títulos significativos, uma breve descrição (se possível), data (de redação e de atualização), autor(es), e estar categorizadas com etiquetas e categorias significativas.

Se o texto for longo, podem escrever um resumo prévio, ou dividir em múltiplas entradas.

As entradas mais antigas devem ser atualizadas, editando-as, comentando-as, ou ligando-as às entradas mais recentes, ou a outras fontes de informação (internas, ou externas).

Estrutura

Exemplo de um Feedreader (NetNewsWire)

A estrutura refere-se ao tipo de informação, a sua marcação, as suas funções e o uso pretendido (interação) no Blog.

Devem usar estilos (HTML) “standard” para hierarquizar a o texto (H1, H2, Parágrafo, etc.). Bem como estruturas formais de texto tradicional (itálicos para destacar, listas de balas, numeradas, etc.).

A formatação visual (tamanho, cor, etc) deve ficar a cargo do tema/CSS do Blog, ou do Feedreader do utilizador final.

Deve-se fornecer uma opção de pesquisa dentro do próprio Blog.

As hiperligações para os conteúdos devem ser simples, evitando alterações, ou ligações quebradas. Tentar fornecer as hiperligações por extenso, sempre que possível.

Verificar como os conteúdos estão a ser indexados nos motores de busca e corrigir a meta-informação de acordo.

Ritmo e edição

Exemplo de painel de objetivos editoriais (WordPress.com)

Um autor de um blog é um como um editor tradicional. Deve possuir uma agenda de edição e uma estratégia de publicação.

Deve-se optar por um mínimo de um entrada semanal, e um máximo de uma entrada diária. Publicar de forma regular, agendando as entradas, ou criando uma agenda de entradas temáticas, se possível.

Evitar o “overshare”.

Agilizar o ritmo e interligação das entradas do Blog com outros meios de publicação e partilha social como o Twitter, ou o Facebook, como formas complementares de publicação e atualização de conteúdos mais curtos e imediatos. Ou de conteúdos de outra natureza, como os canais de Vídeo, ou Podcasts.

Design e ilustração

Seleção de temas visuais (WordPress.com)

O Blog deve ter um tema visual apelativo, relacionado com o conteúdo do Blog, sem perder de vista a funcionalidade (design funcional, ou minimalista).

Sempre que possível, devem ilustrar as entradas com imagens, vídeos, ou outro elemento multimédia, mantendo a dimensão (Kb) da página baixa.

Créditos e hiperligações

Exemplo de licenciamento disponível (Creative Commons)

Todos os materiais utilizados (textos, imagens, vídeos, etc) devem ser identificados com legendas, referências no texto e creditados corretamente.

O Blog deve conter a informação de “copyright” sobre o conteúdo próprio.

A privacidade dos autores deve ser protegida, mas ao mesmo tempo fornecer o máximo de informação sobre o Blog, sobre os autores, ou sobre o conteúdo, de forma a obter credibilidade (tipicamente, na página “About”).

Deve-se fornecer uma forma de contacto (direto) com o(s) autor(es).

Deve-se fornecer formas de ligação social (“feeds”, subscrições por email, etc.) de forma a que seja fácil os leitores tornarem-se “seguidores”.

Aproveitar a natureza de rede da Web para embutir conteúdo no Blog, ou estabelecer hiperligações nos conteúdos utilizados, abreviando as entradas e fornecendo informação em profundidade.

Estabelecer um Blogroll que vos ajuda a identificar e a serem identificados pelos vossos pares.

Feedback e estatísticas

Exemplo de estatísticas fornecidas pelo WordPress.com

Os Blogs possuem vários mecanismos de validação social visível e invisível para os leitores. Enquanto autores, estes mecanismos são fundamentais para entender e fomentar a leitura do Blog.

Mecanismos de validação e partilha social

Encorajar a dinamização e participação no Blog (de amigos, colegas, docentes, orientadores, etc.), através da disponibilização e manutenção dos comentários, formas de avaliação (votação, “ratings”, “likes”, etc.) e de mecanismos de partilha social online.

Dispor de uma medição estatística que permita recolher dados sobre os utilizadores, sobre o conteúdo consultado e sobre a navegação. Melhorar o Blog com esta informação.

Referências

Referências adicionais "obrigatórias"

BARBOSA, E.; GRANADO, A. – Weblogs: Diário de bordo. Porto: Porto Editora, 2004.  ISBN 972-0-45252-8.

BLOOD, R. – The Weblog Handbook: Pratical advice on creating and maintaining your blog. Cambridge: Perseus Books, 2002.  ISBN 0-7382-0756-X.

BORDEAU, J. – Blogging For Web Designers: Editorial Calendars and Style Guides [em linha]. Smashing Magazine. [Consult. 2012-02-08]. Disponível na Internet: <URL: http://www.smashingmagazine.com/2010/08/30/the-importance-of-consistency-using-editorial-calendars-and-style-guides>.

CRUMLISH, C.; MALONE, E. – Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience. Sebastopol: O’Reilly Media, 2009.  ISBN 978-0596154929. Disponível na Internet: <URL: http://www.designingsocialinterfaces.com>.

FRANCO, G. – Como escrever para a Web [em linha]. S. l.: Knights Center fo Journalism, s. d. [Consult. 2012-02-08]. Disponível na Internet: <URL: http://knightcenter.utexas.edu/ebook/how-write-web>.

TIDWELL, J. – Designing Interfaces: Patterns for Effective Interaction Design. Sebastopol: O’Reilly, 2010.  ISBN 978-1-449-37970-4. Disponível na Internet: <URL: http://designinginterfaces.com>.

Instalar o Fontforge em 3 passos…

Pormenor do post no Typeforge

Ultimamente tenho trabalhado com alguns colegas e alunos de Design para organizar conferências e desenvolver fontes digitais no espaço de aula. É verdade que tenho usado o Fontstruct, mas quem me conhece sabe que a minha outra obsessão é o Fontforge.

Há uns dias publiquei no Typeforge as instruções para instalar o Fontforge no Mac OSX em 3 passos! Não podia ser mais fácil… Ainda há desculpas?

Blender 2.55 Beta com LuxRender

Splash screen da nova versão

Graças ao post do Mags no Blender-PT, soube agora que já está disponível o novo Beta do Blender 2.5 aqui: http://download.blender.org/release/

Instalei para experimentar e já configurei o LuxRender. Vem mesmo a calhar, porque estava a dar em doido com os quirks na interface da minha versão, que espero já não existirem e, para além do mais, acho que tinha estragado o meu LuxBlend hoje de manhã… veio mesmo a calhar, esta nova versão!

Printscreen do site oficial

Aproveitei e fiz um pequeno tutorial no post do Mags a explicar como colocar o LuxRender a trabalhar com o Blender. Aqui vai uma réplica ligeiramente editada:

O LuxRender, é um motor de render (physical/unbiased) alternativo ao(s) renderer(s) do Blender para quando se precisa de imagens (muito) realistas. Qualquer coisa parecida a usar a opção de Ambient Occlusion em esteróides!Para este motor funcionar correctamente, é necessário preparar os ficheiros da cena para o render. Como que “traduzir”o comportamento das luzes, dos materiais, etc, para o LuxRender poder interpretar, uma vez que os algoritmos são diferentes.

Para isso existe uma framework de exportação + um  script (LuxBlend25) que automatizam a maior parte do trabalho. É apenas necessário mapear algumas definições no Blender. Ora então um guia rápido:
1. Descarregar o Renderer:
http://www.luxrender.net/v/download

2. Instalar o Renderer (basta correr o instalador);

3. Descarregar a framework de exportação necessária:
http://src.luxrender.net/exporterframework

A nova versão 2.5 do Blender já têm a framework incluída. Se for a vossa, ignorem o passo 3 e 4.

4. Colocar a framework no sítio indicado:

Once you have an unpacked copy on disk, you should copy the folder named “extensions_framework” into your <blender scripts>/modules/ folder. Alternatively, you can save the files at any location you like and add the path to the “Scripts” path in Blender’s preferences.

5. Descarregar o Script de exportação:
http://src.luxrender.net/luxblend25

6. Coloca-lo no sítio indicado:

Once you have an unpacked copy on disk, you should see a folder called “src”. Inside this folder, there is a folder called “luxrender”. Copy this “luxrender” folder into your <blender scripts>/addons/ folder.

As instruções para a instalação estão todas aqui:
http://www.luxrender.net/wiki/index.php?title=LuxBlend_2.5_installation_instructions

Depois basta apenas arrancar o Blender e configurar algumas opções:

7. Activar o renderer nas preferências do programa

8. Escolher o novo motor de render no viewport 3D

9. Configurar os materiais, luzes e câmaras

10. Configurar as opções de Render—não esquecer de indicar a localização da instalação do LuxRender e de activar a opção “Run Renderer”

11. Correr o Render e esperaaaaaaaaaaaar….

Vencedores Natal Criativo

Vencedora do Grande Prémio Natal Criativo - Catarina Mouta

Como resultado da divulgação do Prémio Natal Criativo, acabámos por ter uma semana longa e de entregas. Entre o elevado número de submissões e a qualidade dos trabalhos tivemos a árdua tarefa de escolher um vencedor. E o resultado está à vista: O Grande Prémio vai para a Catarina Mouta.

[...] cursa actualmente Novas Tecnologias da Comunicação na Universidade de Aveiro, cidade donde é natural.
 Gosta de desenhar nos tempos livres e desde 2007 começou a fazê-lo por meio digital, especializando-se no Photoshop com mesa gráfica.
Galeria no DA:
 http://jellyfishy.deviantart.com/

O Júri a deliberar...

Após horas de discussão para decidir sobre o vencedor, acabámos por atribuir um grande prémio e duas menções honrosas. O prémio acabou por ser atribuído à Catarina, em grande parte pelo conceito desenvolvido e pelo processo de trabalho:

Processo de desenvolvimento da ilustração de Catarina Mouta

O conceito base é o de uma personagem feminina de cabelos brancos a puxá-los para frente da cara com a intenção de se parecer ao Pai Natal com as suas barbas brancas. [...] Utilizando a mesa gráfica, desenho directamente [...] o que me permite ter, desde o início, uma ideia de como resultará a ilustração no final. A partir deste ponto, também me é fácil chegar a um acordo sobre as cores, o enquadramento do desenho e as características da personagem. [...] Assim que me sinto minimamente satisfeita com o esboço inicial, começo a “limpar o desenho”.

No entanto, a escolha de apenas um vencedor não é justa. A qualidade dos postais que nos chegaram à caixa do correio justificou a escolha de duas menções honrosas: Bruce Leegia e Sara Cunha.

Bruce Leegia - Menção Honrosa do Grande Prémio Natal Criativo

Bruce Leegia - Menção Honrosa do Grande Prémio Natal Criativo

Sara Cunha - Menção Honrosa do Grande Prémio Natal Criativo

Como divulgado, entraremos em contacto brevemente com o vencedor para envio do respectivo prémio – o livro Digital Art Masters vol. 3.

A todos os que participaram fica aqui o nosso muito obrigado (foi divertido). Desejamos-vos um feliz Natal e um 2010 criativo!

Assinam a Marta, João e Pedro.

P.S.: Abrimos aqui o fórum para sugestões de tema e prémio para uma próxima edição…

Blast from the past – como criar padrões

Como criar um padrão / How to create a pattern tile

Há dois anos atrás, a Cristina, uma amiga, perguntou-me como se definia um padrão no Illustrator. À falta de uma explicação mais simples, dei-lhe a versão Photoshop da coisa. (Imagem acima. Cliquem para a versão de alta resolução).

Hoje incentivei duas alunas do primeiro ano a criarem um padrão a partir de fotografia no Photoshop, depois de terem experimentado um padrão sintético e pouco natural no Ilustrator. Fiquei muito contente de ainda ter isto no disco e aproveito para partilhar a explicação pouco rigorosa, mas muito útil de como criar um padrão a partir de qualquer imagem.

Em passos (mais ou menos) simples funciona assim:

  • Abram uma imagem (que vai servir de padrão) ou desenhem uma forma.
  • Coloquem-na num formato/enquadramento quadrado (pensem em azulejos). Crop, cliping mask, paste inside… o que funcionar melhor. Se for no Ilustrator, rectângulos também servem, mas…
  • Dividam a imagem em 4 partes/quadrantes (para maior controlo/rigor dividam em 9…)
  • Troquem as peças de baixo com as de cima (passo 1 da imagem)
  • Troquem as peças da esquerda com as da direita (passo 2 da imagem)

Prontíssimo!

No caso de imagens bitmap, o truque é disfarçar as “costuras” resultantes das trocas das peças (passos 4 e 5) com a vossa ferramenta de retoque favorita. Clone stamp, patch, healing brush… o que funcionar. (Passos 3 e 4 da imagem)

Para o padrão ser aplicado em preenchimentos, quer no Ilustrator, quer no Photoshop, primeiro é preciso defini-lo como padrão no menu Edit e depois aplicar nas formas pretendidas (passa a estar disponível nos padrões de preenchimento). (Passos 5 e 6 da imagem)

Follow

Get every new post delivered to your Inbox.

Join 129 other followers

%d bloggers like this: