Apple風のテクスチャを GIMP 2.6.12 で作ってみた

簡単にできました

Appleの最近のプロダクトで使用されているかっこいいテクスチャをさくっと作るチュートリアル | コリスを参考にしました。

上記サイトで Adobe Photoshop で作っているのを、GIMP にあてはめてみました。

このエントリの目次

1. こんなテクスチャを作りました
2. 2枚のレイヤーを用意する
3. 1枚目のレイヤー(背面)にフィルタを適用する
4. 2枚目のレイヤー(前面)にフィルタを適用する
5. レイヤーを合わせて完成
6. さいごに

1.こんなテクスチャを作りました

(Flickrのぺージ)

本当は 640x1136 px で作ったのですが、Flickr にアップロードしたら 577x1024 px になってしまいました。

2.2枚のレイヤーを用意する

まず、GIMPを立ち上げて、「新しい画像」を作成していきます。
「ファイル」→「新しい画像」を選択します。


次のようなウインドウが現れるので、作りたい画像の縦と横のサイズを入力して、「OK」を押します。


これで、まっさらな画像が作られました。

続いて、基本となる色を画像につけていきます。
右クリックをして「色」→「単色塗り」を選択します。


下のようなウインドウが出てくるので、「カスタムカラー」のところをクリックします。


色を調整するウインドウが出てきます。
RGB をそれぞれ、0、33、66 と入力して、「OK」を押します。


プレビュー の色も変更されました。
問題ないので、「OK」を押します。


こんな画面になります。


ベースのレイヤーができたので、これを複製します。
右クリックをして、「レイヤー」→「レイヤーを複製」を選択します。


これで基礎となる2枚のレイヤーができました。

3.1枚目のレイヤー(背面)にフィルタを適用する

背面レイヤーに薄い縦縞がかかるようにします。

まずはフィルタのかかり具合を正確に見るため、倍率を 100% にします。


まずは背面のレイヤーから編集します。

下の図の赤丸のところ(目のアイコンのところ)をクリックして、前面のレイヤーを非選択状態にします。


これで背面のレイヤーを編集できるようになりました。

レイヤーにフィルタをかけていきます。
右クリックをして「フィルタ」→「ノイズ」→「HSVノイズ」を選択します。


下のようなウインドウが現れるので、保存度 = 1、色相 = 0、彩度 = 30、明度 = 30 として「OK」を押します。


これでノイズがかかりました。
次にこのノイズを薄い縦縞にします。
右クリックをして、「フィルタ」→「ぼかし」→「ガウシアンぼかし」を選択します。


下のようなウインドウが出てくるので、水平 = 0、垂直 = 50 と入力して「OK」を押します。


これで、1枚目のレイヤーが完成しました。

4.2枚目のレイヤー(前面)にフィルタを適用する

まずは前面のレイヤーを編集可能な状態にします。

「背面 コピー」(前面)の目のアイコンをクリックして表示させ 選択状態に、「背面」の目のアイコンをクリックして非表示にして 非選択状態にします。


前面のレイヤーは薄い横縞を作ります。
先ほどと同じように、まずはノイズを作成、続いてガウシアンぼかしをいれます。
このとき、下のように水平にぼかしをいれます。


これで2枚目のレイヤーも完成しました。

5.レイヤーを合わせて完成

仕上げに、前面のレイヤーの不透明度を 50% にします。


すると、以下のようなApple風の布っぽいテクスチャになりました！


あとは画像を保存して完了です。

6.さいごに

思ったよりも簡単に作れました。

「ノイズ」と「ぼかし」を組み合わせれば、色々な質感の素材が作れそうですね。

iOSでFacebookアプリを作ってみる その1

ちょっと前に iOS SDK 3.1がリリースされましたね

ですので、それを試してみます。

本エントリは、本家FacebookサイトのGetting Started with the Facebook SDK for iOS v3.1 - Facebook開発者を参考にしています。

また、実機確認は 第四世代 iPod touch の iOS6 で実施しています。

このエントリの目次

1. 必要な環境
2. Facebookのデベロッパ登録をする
3. Facebook App IDを作る
4. SDKを手に入れる
5. SDKをアプリに組み込む
6. さいごに

1.必要な環境

1. Mac OS X バージョン 10.8.x Mountain Lion
2. Xcode 4.5.x
3. Git (こちらは必須ではないですが、入れといて損はないです。本エントリでは使います)

2.Facebookのデベロッパ登録をする

まず、Facebook App Dashboardにいきます。 下記の画面の「Register as a Developer」ボタンを押します。


すると、下のような画面になりますので、「アカウントの認証を実行」を押します。

「携帯メールアドレス」を入力して、「承認」を押します。

下の画面になります。
で、すぐにケータイのメールに確認コードが送られてきますので、その画面に入力し、「承認」を押します。


改めて、デベロッパ登録をします。
「Register as a Developer」を押します。 Facebook App Dashboardにいきます。

下記の画面になるので、「続行」を押します。


デベロッパとしての経験や、どんなアプリを作ろうとしてるかなどのアンケートがあります。
「スキップ」 or 「続行」を押します。


これでFacebookデベロッパとして登録されました！
「Done」を押して完了です。

3.Facebook App IDを作る

再度、Facebook App Dashboardにて。
右上の「+新しいアプリを作成」をクリックします。


すると、以下のような画面になります。
App Name と App Namespace を入力して、「続行」を押します。


キャプチャによる認証をすると、下のような画面が表示されます。
赤い丸で囲んだ App ID は後でアプリ実装時に使うのでチェックしておいてください。


これでFacebook App ID の登録が完了しました。

4.SDKを手に入れる

facebook / facebook-ios-sdk からソースを落とします。

git clone git://github.com/facebook/facebook-ios-sdk.git

facebook-ios-sdk ディレクトリ直下を ls コマンドで確認すると、こんな構成になっています。

facebook-ios-sdk Y$ls
CONTRIBUTING.mdown README   samples   src
LICENSE   README.mdown  scripts

5.SDKをアプリに組み込む

Xcode を起動、新規プロジェクトを作成します。


Facebook SDK をソースに組み込みます。
facebook-ios-sdk/build 配下の FacebookSDK.framework を選択、プロジェクトのframeworksディレクトリに追加します。



続いて facebook-ios-sdk/build/FacebookSDK.framework/Resource 配下の FacebookSDKResources.bundle もプロジェクトの framework ディレクトリに追加します。


次に、他のframework を追加します。
AdSupport.framework、Accounts.framework、Social.framework を追加します。



Other Linker Flags に -lsqlite3.0 を追加します。


plist を編集します。


FacebookAppIDというキーを追加し、その値に 先ほどの「3.Facebook App IDを作る」 で作った App ID を設定します。

さらに、URL Schemesに fb<Facebook App ID>を設定します。
Facebook App ID が例えば 「hogehoge」なら、「fbhogehoge」と設定します。


これでSDKが組み込めました！

アプリを実行すると、特にエラーもなく真っ白画面のアプリが起動します。

今回はここまでです。

6.さいごに

とりあえずSDKは組み込めました。
次のエントリでは、Facebookにログインするところを書きたいと思います。

関係ないですが、b2gを Ubuntu、Mac で試したんですが、エラーが出てビルドできませんでした。
面白そうだったのに、悔しい！

それでは。