The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
グラフィックデザイナーが作ったWebデザインをコーディングする、という案件を受けることがあります。 「デザインすること」については歴史が長いグラフィックデザイナーに一日の長があると思っていますが、Webにはグラフィックと違った特徴があります。 Webデザインを制作する際に知っておいてほしいことを挙げてみます。 タイポグラフィの制限 同じ文字でも、Webサイトには「画像」と「テキスト」が存在します。 簡単に区別すると、マウスカーソルで1文字ずつ選択できるものがテキスト、出来ないものが画像です。 画像はIllustrator・Photoshop等で制作したままの見た目を表示させることができますが、画像内に含まれる文章をGoogleなどに認識させにくいです。 テキストは情報をGoogleなどに認識させやすいのですが、フォント指定・装飾(袋文字や影など)・字詰めなどのタイポグラフィが苦手です。 画
フロントエンドと言っても、アプリやゲーム制作などではなく、いわゆるWebサイト制作のクライアントサイド側の話になります。 時代背景 おじいさんには、Photoshop、Illustrator、Dreamweaverという3種の神器がありました。当時のWebサイト制作は、これらのソフトを利用し、おじいさんが一人で行っていました。おじいさんのような仕事をする人は、Webデザイナーと呼ばれ、とても人気がありました。おじいさんは幸せでした。 いつしかWebデザインは分業化されるようになりました。おじいさんは久しくデザインをしていません。現在の彼の仕事は、デザイナから受け取ったPhotoshopデータを基にWebサイトを制作することです。それはHTML5サイトというとても都合の良いバズワードでまとめらてしまうこともあります。このことについて、おじいさんはやり場のない憤りを抱いています。 HTML/C
数カ月前に@suzukisan__が投稿された「Illustrator Unlimited Appearance - suzuki | JAYPEG」は、Illustratorのアピアランスを駆使して、1つのオブジェクトからカメラのアイコンを作るという、面白い試みをされていました。 アピアランスの可能性を示す、インパクトのある内容であったため、記憶に残っている方もいることでしょう。 このアイコンが投稿されてから時間がたっていますが、HTMLとCSSに分解されるイメージが自然に湧いてきたので、少しばかりのHTMLとCSSでアイコンを模写してみました。 HTML と CSS で作ったカメラアイコン 模写したカメラアイコンは、Internet Explorer 10以上 や、最新のChrome, Firefoxなどであれば表示されるはずです。 こちらがHTMLとCSSで書いたものになります。 ソ
List Adobe関連 Illustrator Photoshop Fireworks Indesign Acrobat HTML,CSS HTML 文字実体参照 CSS HTML5+CSS3サポートブラウザ Canvas Haml,Sass Haml Sass Vim,Zencoding Vim Zencoding javascript/jQuery javascript jQuery UNIX 正規表現 検証ツール Firebug Chrome Developer Tool ブラウザ関連 Chrome Safari Firefox IE Mac 参考 アプリ・ツール Adobe関連(CS5-CS6) CS5と6のチートシート上げてるけど、adobe製品なら簡単にエクスポートできると思う。例えばfireworksなら、メニューバーから[Fireworks>ショートカット>現在のセット:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く