Home > チュートリアル Archive
チュートリアル Archive
可能性が広がってるFlex(AIR)を使いこなす為のチュートリアル集(国内)
今日はFlexについて詳しく書いてあるサイトを紹介します。
Flexとは?と思われる方もいると思いますが、簡単に説明するとFlexとはFlashPlayerを使って一般的なデスクトップアプリケーション並みの機能やユーザーインターフェイスとインタラクションを実現できます。
これにより様々なシステムやアプリケーションをActionScritp3を使って構築していきます。
ただ、Flexは素晴らしいのですが、FlashPlayerを使うためWebブラウザ上でしか実行できないため、Webブラウザの制限を超えることができません。
そこで、AIRの登場です。
AIRはFlexの機能をそのままに様々なプラットフォームに依存しないシステムやアプリケーションが構築することができます。
なので、インターネット上で使う場合はFlexで作成して、OS上などで使う場合はAIRで作成するという使い分けができます。
注意する点は最新のFlexやAIRではActionScriptがバージョンが3になったので、今までActionScript2以前のプログラムをしていた方には少々ハードルが上がったようです。
そこで、Flexなんて聞いたことない方から、初めてFlexを使う方やFlashは使った事あるけど・・・という人に参考になるチュートリアル(参考)サイトを紹介します。
- 先ずはAdobe社が提供しているFlexリソースサイトです。
コチラにインストール手順からユーザーガイド・リファレンスガイドからFlexを使ったAIRアプリケーションの開発やActionScript 3.0のプログラミング概念の基本など参考になるとこが多数記載されています。

http://www.adobe.com/support/documentation/jp/flex/ - こちらもAdobe社の提供しているサイトです。
ここでは、Flexでどういったサイトやシステムが構築できるかなどのサンプルが掲載されてます。それ以外にもFlex3の入門チュートリアルやコミュニティなども公開されていて内容は十分です。

http://www.adobe.com/jp/devnet/flex/ -
Flexについて詳しく解説しています。
いまさら聞けないFlex、そして、今こそ入門のとき!?と題をうってあるだけあって、詳しくわかりやすく書いてあると思います。

http://www.atmarkit.co.jp/fwcr/special/flexent/flexent_1.html
ここからはFlex2とバージョンが一つ前になりますが、参考になるので紹介します。
-
Flexで用意しているコンポーネントを紹介しているサイトです。

http://shigeru-nakagaki.com/index.cfm?Content=Flex2Samples -
Flex2でWebアプリ開発を紹介しているサイトです。
Webアプリケーション開発の基本を紹介しています。
http://www.atmarkit.co.jp/fwcr/rensai/flex201/02.html -
ゼロからはじめるFlex 2 - Flex 2で作る簡単なWebカタログと商品注文フォーム
ページ数が10ページにわたって詳しく書いてあります。
http://journal.mycom.co.jp/articles/2007/11/12/flex2/index.html - Flex2でアウトラインエディタを製作してみる
サンプルプログラムを作成して、Flexの基本を学べますが、細かいことは書いてありません。
http://codezine.jp/a/article/aid/1764.aspx - Flexの使い方や仕様変更を29回にわたって詳しく書いてあります。
Flex3の最新の事まで記載してあります。
http://itpro.nikkeibp.co.jp/article/COLUMN/20061110/253336/ - Flex2の基礎講座です。
インストールから様々な使い方・機能紹介など23章にわたって紹介してあります。
http://www.necst.co.jp/product/ibiz/column/flex/chap1.html
今回参考にしたサイト
http://diaspar.jp/node/165
- Comments: 0
- TrackBacks: 0
Webサイトを作る際に素材やサイトデザインの参考になるFireworksのチュートリアル集(海外)
Macromedia社がAdobe社に買収されて、Adobe社のCS3シリーズにFireworksも組み込まれました。
Adobe社の製品になったことで、PhotoshopやIllustratorなどとの連携が強化され使い勝手が良くなったと思います。
従来FireworksはPhotoshopと同じ部類に入り、Adobe社に買収された時に"Fireworksはもう新しいバージョンが出ない"と噂されてるほど、同じ事ができます。
しかし、Adobe社の考えは違うようです、FireworksはWebサイトのプロトタイプとデザインをすばやく作成するためのツールと考えているようです。
デザイナーさんの中にはWebデザインはPhotoshopよりFireworksを使って作るという方も多いようです。
そこで今回は、Webサイトを作るときに参考になりそうなチュートリアルのサイトを紹介します。
- グラデーションをうまく使ってWeb2.0の様な洗練されたっきりしたWebサイトのチュートリアル

http://abduzeedo.com/tutorial-obamas-background-fireworks-part-1 - 上記のデザインをCSS構造に変換するチュートリアル

http://abduzeedo.com/tutorial-obamas-background-css-part-2 - ブログのデザインに使えそうなデザインのチュートリアルです。

http://abduzeedo.com/tutorial-newspond-menu-fireworks-part-1 - 上記のデザインをCSS構造に変換するチュートリアル(英文が多いです・・・(T□T))

http://abduzeedo.com/tutorial-newspond-menu-fireworks-part-2 - Windows Vistaのような近未来的な壁紙の作り方

http://firetuts.com/2007/12/21/create-vista-like-wallpapers-with-fireworks/ -
平面的な素材を立体的にするチュートリアル
http://www.brownbatterystudios.com/sixthings/2008/02/08/highlights/#more-34 - シールがはがれた表現・ヘッダーやロゴに使えそうなチュートリアル

http://firetuts.com/2007/11/23/creating-a-realistic-peelable-sticker-effect-in-fireworks/
素材ダウンロード - 光沢のあるWeb2.0のボタン素材の作り方

http://firetuts.com/2007/12/15/how-to-draw-a-marble-or-glass-ball/
素材ダウンロード -
簡単なバーコード素材の作り方

http://firetuts.com/2007/12/08/five-easy-steps-to-create-a-barcode-in-fireworks/ -
様々な形の素材をAqua(アクア)素材にするチュートリアル

http://imasters.uol.com.br/artigo/3417 -
かっこいい光沢感のあるフォルダアイコンの作り方
http://www.adobe.com/devnet/fireworks/articles/creating_icon_02.html -
写真が置いてあるような表現の仕方

http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/
素材ダウンロード
今回参考にしたサイト
http://www.smashingmagazine.com/2008/03/18/adobe-fireworks-tutorials-downloads-best/
http://firetuts.com/
- Comments: 0
- TrackBacks: 0
背景や壁紙に使えそうなIllustratorのチュートリアル集(英語)
- 2008年4月25日 16:38
- Illustrator | チュートリアル
今回は背景や壁紙の作成時に使えそうなIllustratorのチュートリアルです。
これらを応用して様々な作品を作成できそうです。
- Apple社の壁紙のようなデザイン
http://www.ndesign-studio.com/resources/tutorials/abstract-background/
データ用ダウンロード -
雪国を思わせるシンプルでスマートな壁紙のデザイン

http://veerle.duoh.com/blog/comments/swirly_curls_in_adobe_illustrator/ - 厚紙やTシャツなどにプリントしたような質感を出すデザイン

http://www.computerarts.co.uk/tutorials/2d__and__photoshop/t-shirts
データ用ダウンロード -
写真をイラストのように見せるデザイン
http://www.illustratortechniques.com/imitating-a-scanner-darkly.html - 滑らかなグラデーションを使ったデザイン

http://www.bartelme.at/journal/archive/creating_organic_desktops/
Illustratorを使ったデザインの参考になるサイトを今回はピックアップしました。
手軽に作成できるものから、手の込んだものまで紹介しました。
- Comments: 0
- TrackBack (Close): 0
光を効果的に使用したPhotoshopのチュートリアル集(英語)
最近は光り方や光沢感などがデザインでよくつかわれています。
このようなテクニックは使いこなせるようになるとデザインの幅が広がると思います。
ただ、サイト自体は英語のサイトなのですが、すべての作業に写真が掲載してあるので見るだけでわかる方が多いと思います。
-
様々なデザインに応用できそうなチュートリアルです。

http://psdtuts.com/tutorials-effects/seriously-cool-photoshop-explosion-effect -
ヨーロッパのクラブのようなイメージ画像になります。
http://veerle.duoh.com/blog/comments/creating_light_motion_trails -
一時期iPodのCMに見られたような効果の写真です。

http://luxa.org/tutorial_electrifying_energy_beams.php -
おしゃれな壁紙のようなチュートリアルです。

http://www.abduzeedo.com/magic_effect -
女の子が引き立ってます。トランシーなチュートリアルです。

http://abduzeedo.com/sparkling-hot-girl-photoshop -
洋服のブランドの看板のようなデザインです。
http://psdtuts.com/tutorials-effects/nopattern-jumper-effect/
今回参考にさせていただいたサイト
http://coliss.com/articles/build-websites/operation/design/925.html
- Comments: 0
- TrackBacks: 0
Home > チュートリアル Archive



