Fireworksで立体的なアイコンを7分で作る方法 - EC studio デザインブログ
さて、今回は前回の「Fireworksで立体的なアイコンを作る方法」よりも もっと簡単にできるアイコンの作り方です。 今回は5分で作れるアイコンのご紹介！！ …の予定でしたが、ブログ記事用に作り直したら7分ちょうどかかりました。 すみません… 操作自体は簡単なので、速い方は5分でできると思います。 ぜひ、5分に挑戦してみてください！ アイコンはこちら、建物アイコンです。 ページ下部で制作動画の紹介や、ベクトルデータのダウンロードも可能です。 会社概要の見出しなどに使ってみてくださいね。 速く作るポイントは2つ パスの変形「歪みツール」を使う フィルター効果「シャドウ（内側）」を2つ重ねて使う たったこれだけです。 1.平面の形を作る パースのあるアイコンですが、 まずは真正面から見た図（平面図）をつくります。 2.歪みツールで立体的にする 平面ができたら、１面全部を選択し「歪みツール」で立
FireworksとPhotoshopの書き出し画像を比べてみた！～ドットコーダーセッションまとめ - EC studio デザインブログ
2010年9月25日に.coder「すこーし愛して。ながーく愛して。Webパフォーマンス」でプレゼンさせていただきました。 あまりのイケてるプレゼンテーターの中にちょっと申し訳ない感じでしたが、 みなさまアットホームに迎え入れていただき、楽しい1日を過ごすことができました。 私は「みんなで使おう！Fireworks！ 〜Fireworksで画像最適化〜」というお題で プレゼンしたので、簡単にその中身をここでも紹介させていただきたいと思います。 今回はFireworksとPhotoshopの画像の書き出し方を比較してみました。 ちなみに使用したアプリケーションはFireworks CS5 とPhotoshop CS5 です。 PNGの書き出しは実はFireworksのほうが軽量！？ PNGを書き出すときに画像データ以外のチャンクという必要のないデータも書き出されます。 実はそのチャンクデータ
HTML5を今すぐ使うためのコツや情報をまとめてみました - EC studio デザインブログ
この数カ月でHTML5のサイトが国内にも増えてきました。先日10周年を迎えた EC studio のサイトもHTML5で制作しています。マークアップの面でのHTML5の導入となりましたが、難しいと思う以上に勉強になることが多くありました。（今も改善を続けています。） http://www.ecstudio.jp/ 個人サイト以外でHTML5を導入するのをためらっている人が多いと思うので、今からでも使っていくためのコツやノウハウをまとめてみました。 新要素をJavaScriptで生成する HTML5の新要素はIEでは未知の要素です。そのため記述していてもDOMツリーが構成されなかったり、CSSが適用されないという問題が生じます。 そこでdocument.createElement(要素名);により、ブラウザ（ユーザーエージェント）にとって未知な存在の要素を生成し、認識させることができます。
簡単作業でスピードアップ！パフォーマンスアップまとめ - EC studio デザインブログ
以前にWeb Directions East 「パフォーマンスアップのウェブ技術 WDE-Express」で パフォーマンスアップについて記事を書きました。 今回はその記事や色々参照した本・セミナーを元に実際に改善をおこなって、 どれだけ高速化したかデータ上で確認し、まとめてみました。 できるだけ手間をかけずに簡単にできる改善方法をおこなってみたので、 しばらくリニューアルの予定はないが、サイトの表示を早くさせたいという方は ぜひ試してみてください。簡単作業でパフォーマンスアップできます。 CSSのコードを短縮して書こう え？こんなこと？と思うかもしれないですが、 どんどんコードを書いていくうちに肥大していくものです。 もう一度見直してコードを軽くしていきましょう。 今回コードの見直しのために使用したサイトはclean CSSです。 clean CSSを参考にカラーコードの短縮、 不必要な
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法 - EC studio デザインブログ
Zen-CodingでHTML/CSSコーディング作業の効率があがった人が増えてきたのではないかと思いますが、そこでさらにカスタマイズすることで効率化アップする方法を紹介します。 Zen-Codingではあらかじめ多くのHTML/CSSのショートコード、スニペットが登録されていますが、Zen-Codingを構成するファイルを少し修正するだけで、オリジナルのコードを登録することができます。 JavaScriptを触ることにはなりますが、JavaScriptを知らなくても大丈夫なぐらい簡単です。 zen_setting.jsに秘密がある Zen-Codingをダウンロードすると、対応アプリケーションごとのファイルをダウンロードすることができますが、そのダウンロードしたファイルの中にはzen_setting.jsというファイルが存在しています。 実はその中に、省略コードやスニペットがすべて書き込
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
