こちらのチュートリアルを参考に下のような画像を作ってみました。
illustratorのグラデーションで文字を金色&メタリックな輝きにするチュートリアル
学んだことなど
- グラデーションで、暗い色と明るい色を隣接させるときれいな色になる
- 影になっている文字は、半分くらいしか見えないようにした方が良かった
- 影の部分は、元サイトに比べるとイマイチだった
こちらのチュートリアルを参考に下のような画像を作ってみました。
illustratorのグラデーションで文字を金色&メタリックな輝きにするチュートリアル
PhotoshopのCS3で「パターンを定義を定義」しようとしたのですが、下のように選択できない状態になってしまいました。
こちらですが、モードが32 bit/チャンネルを選んでいるのが原因でした。
これを16 bit/チャンネルに変更することで「パターンを定義を定義」を選べるようになりました。
「webおよびデバイス用に保存」が選択できない問題も、モードを「16 bit/チャンネル」に変更する事で解消できました。
RGB 画像では、3 つのカラー(チャンネル)を使用して、画面上にカラーを再現します。1 チャンネルが 8 ビットの画像では、これらの 3 つのチャンネルは 1 ピクセル当たり 24(8 ビット × 3 チャンネル)ビットのカラーを表現します。24 ビット画像では、3 つのチャンネルによってピクセルあたり最大 1,670 万色を再現できます。48 ビット画像(16 bit/チャンネル)および 96 ビット画像(32 bit/チャンネル)では、さらに多くのカラーを再現できます。RGB モデルは、Photoshop で新規画像を作成する際の初期設定モードです。また、モニターでは常に RGB モデルを使用してカラーを表示します。このため、Photoshop では、CMYK などの RGB 以外のカラーモードを使用する画像の場合は、画面に表示するために CMYK 画像が RGB に変換されます。
RGBモードの場合、ビット数は1pxの1色のビット数を表すようです。
つまり8ビットは赤・青・緑のそれぞれに8ビットを割り当てる状態です。
Illustratorメッシュツールを試してみました。
まずは画面上に四角形を配置します。
次に、ツールボックスのメッシュツールを選びます。
その状態でオブジェクトをクリックするとメッシュラインが作成されます。
メッシュラインを選んだ状態で、カラーを変更するとオブジェクトにグラデーションが設定されます。
メッシュラインは複数配置する事もできます。
ラインを曲げると、それに合わせてグラデーションも変化します。
MYBlurIntroductionViewというウォークスルーを作るライブラリを試してみました。
インストールはCocoaPodsで行います。
target 'MyApp' do use_frameworks! pod 'MYBlurIntroductionView' end
実際に使うにあたって、まずは適当なアイコンをプロジェクトに追加します。
アイコンは下サイトのものを利用しました。
アイコンを追加したら実際に実装していきます。
おおまかな流れとしては「MYIntroductionPanel(ウォークスルーの各ページに相当)を複数個作成、それを元にMYBlurIntroductionViewを作って画面にセットする」という流れです。
import UIKit import MYBlurIntroductionView class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let headerView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 100)) headerView.backgroundColor = UIColor.blue let panel1 = MYIntroductionPanel(frame: view.bounds, title: "Welcome to MYBlurIntroductionView", description: "MYBlurIntroductionView is a powerful platform for building app introductions and tutorials. Built on the MYIntroductionView core, this revamped version has been reengineered for beauty and greater developer control.", image: #imageLiteral(resourceName: "book"), header: headerView) panel1?.backgroundColor = UIColor.darkGray let panel2 = MYIntroductionPanel(frame: view.bounds, title: "Automated Stock Panels", description: "Need a quick-and-dirty solution for your app introduction? MYBlurIntroductionView comes with customizable stock panels that make writing an introduction a walk in the park. Stock panels come with optional overlay on background images. A full panel is just one method away!", image: #imageLiteral(resourceName: "pen")) panel2?.backgroundColor = UIColor.lightGray let introductionView = MYBlurIntroductionView(frame: view.bounds) introductionView.buildIntroduction(withPanels: [panel1, panel2]) view.addSubview(introductionView) introductionView.backgroundImageView.image = #imageLiteral(resourceName: "pen") } }
アプリを起動すると、下のように2ページだけのウォークスルーを作成できました。
各ラベルへのアクセスできるので、フォントや文字色も簡単に変更できます。
let panel1 = MYIntroductionPanel(frame: view.bounds, title: "Welcome to MYBlurIntroductionView", description: "MYBlurIntroductionView is a powerful platform for building app introductions and tutorials. Built on the MYIntroductionView core, this revamped version has been reengineered for beauty and greater developer control.", image: #imageLiteral(resourceName: "book"), header: headerView) panel1?.panelTitleLabel.textColor = UIColor.darkGray panel1?.panelDescriptionLabel.textColor = UIColor.lightGray
delegateで、下のイベントを取ることが可能です。
extension ViewController: MYIntroductionDelegate { func introduction(_ introductionView: MYBlurIntroductionView!, didFinishWith finishType: MYFinishType) { } func introduction(_ introductionView: MYBlurIntroductionView!, didChangeTo panel: MYIntroductionPanel!, with panelIndex: Int) { } }
こちらの本を読んでみました。
Hookedというモデルを通して、インスタグラムなどの有名アプリのヒットの仕組みについて書かれています。
Hooked ハマるしかけ 使われつづけるサービスを生み出す[心理学]×[デザイン]の新ルール
iOS8から導入されたEmbedded Frameworkを試してみました。
Embedded Frameworkは動的なライブラリで、プロジェクト分割によってコンパイル速度が早くなる・Extensionとの共通処理を書きやすいと言った利点があるようです。
まずは新規プロジェクトの作成をします。
次に、Targetの追加を押します。
下の方にあるCocoa Touch Frameworkを選びます。
これでEmbedded Frameworkを作る事ができました。
作ると下のようにターゲットが追加されます。
同時に、下のようにフォルダが作られます。
続けてEmbedded Frameworkのコードを読み取ってみようと思います。
Embedded Frameworkにファイルを追加します。
外部からクラスを参照する場合はpublicを付ける必要があります。
import UIKit public class MyClass: NSObject { }
作ったクラスをプロジェクトから呼び出すには、下のようにimportします。
import UIKit import MyLibrary class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() _ = MyClass() } }
Palauというライブラリを試してみました。
インストールはcocoapodsで行いました。
target 'MyApp' do use_frameworks! pod 'Palau' end
使い方は下の通りです。
下のようにまずは変数を定義します。
import UIKit import Palau extension PalauDefaults { static var name: PalauDefaultsEntry<String> { get { return value("myName") } set { } } }
定義した変数は下のように使えます。
print(PalauDefaults.name.value) // → nil PalauDefaults.name.value = "MyString" print(PalauDefaults.name.value) // → MyString
String以外にも対応しています。
extension PalauDefaults { static var count: PalauDefaultsEntry<Int> { get { return value("myCount") } set { } } }
デフォルト値は下のようにwhenNilで定義します。
extension PalauDefaults { static var name: PalauDefaultsEntry<String> { get { return value("myName").whenNil(use: "myDefaultString") } set { } } }
didSetを使ってセット時のイベントを取る事ができます。
ブロックの第一引数が新しい値、第二引数が古い値です。
extension PalauDefaults { static var name: PalauDefaultsEntry<String> { get { return value("myName").didSet { print($0, $1) } } set { } } }
下のように条件付き値を扱う事もできます。
ここでは10以下場合は10がセットされるようにしています。
extension PalauDefaults { static var count: PalauDefaultsEntry<Int> { get { return value("myCount").ensure(when: { ($0 ?? 0) < 10 }, use: 10) } set { } } } PalauDefaults.count.value = 5 print(PalauDefaults.count.value) // → 10 PalauDefaults.count.value = 11 print(PalauDefaults.count.value) // → 11